微信小程序异步处理详解,小程序传递详解

网页程序迁移至微信小程序web-view详解

2018/08/02 · JavaScript
· 小程序

原文出处: NeoPasser   

小程序以后尤其流行,然则集团的过各种类都是用网页写的,小程序语法不匹配原生网页,使得旧有品种搬迁至小程序代价很高。

小程序此前开放了webview功用,可以说是网页应用的一大福音了,可是微信的webview有一些坑,那篇小说就是列举一下作者在支付进度中相遇的有个别题材以及本人找到的有的化解方案。

微信小程序异步处理详解,小程序异步详解

本文实例为大家大饱眼福了微信小程序异步处理的具体方法,供大家参考,具体内容如下

平素看难点:

图片 1

下一场看打印的结果:

图片 2

依据地点两图可以看出,代码上先举办的互连网请求,再实施打印的变量,然则从下边打印的结果来看,先出结果的是实施打印变量的函数(aafn函数),再打印出网络请求success的回调里再次来到的数量和赋值后的变量的值;

何以先实施的aafn,并且打印的值没有赋值上?

因为wx.request是2个异步的呼吁,所以数据请求的同时,可以持续向下实施函数。所以那边值还向来不赋值上就开首打印了变量的值;

那种情况,怎么化解呢?

方法一:

嵌套

在wx.request的success回调里执行aafn函数

图片 3

接下来运转结果

图片 4

此间就取到值了

唯独假使逻辑很复杂,须求用到很多层异步,如同这么:

asyncFn1(function(){
 //...
 asyncFn2(function(){
  //...
  asyncFn3(function(){
   //...
   asyncFn4(function(){
    //...
    asyncFn5(function(){
      //...
    });
   });
  });
 });
});

这般代码看起来就很不佳看,代码的可读性和可维护性就不佳了

那怎么解决那么些标题吧?Promise那种概念的发出,很好地消除了这一切,Promise是如何?那里本人就不多说了有趣味的友爱去看一看,Promise介绍链接

先看看Promise的方式:

function asyncFn1(){
 return new Promise(function (resolve, reject) {
  //...
 })
}

// asyncFn2,3,4,5也实现成跟asyncFn1一样的方式...

调用

asyncFn1()
 .then(asyncFn2)
 .then(asyncFn3)
 .then(asyncFn4)
 .then(asyncFn5);

那样的话,异步函数就能够依次执行了

微信小程序的异步API怎么协助Promise呢?大家得以二个3个的用Promise去包装那一个API,不过这一个如故比较费心的。但是,小程序的API的参数格式都相比较统一,只接受贰个object参数,回调都以在那些参数中设置,所以,那为了统一处理提供了有益,写三个工具方法,来成功这么的劳作

先是必要引用一个叫bluebird.js的公文;

进入bluebird官网下载:

图片 5

微信小程序异步处理详解,小程序传递详解。那些近乎是不只怕下载的,可是你可以点击进入,然后复制,在小程序里创建2个js文件,将代码复制到那一个js里面,然后引用。

然后再写三个JS,里面写工具方法:

图片 6

下面是prom.js

图片 7

接下来须要采用的百般页面的js里引入prom.js:

图片 8

调用:

图片 9

打印结果

图片 10

那般就足以了,已毕。

如上就是本文的全体内容,希望对我们的求学抱有资助,也希望我们多多协助帮客之家。

本文实例为大家分享了微信小程序异步处理的具体方法,供大家参考,具体内容如下
直接看问…

微信小程序 参数传递详解,小程序传递详解

微信小程序的出产,无疑将会在运动互连网行业里再度引发风波。

有人会狐疑小程序会不会火, 会不会火自身不亮堂,
看微信的用户量即可驾驭一切。

微信小程序-参数传递

此间自身找到三种小程序上的参数传递形式,为了便于,小编独自拿出去和大家大饱眼福下.

一、通过事件进行参数传递

先来看眼小程序对事件的定义:

#什么是事件?

此地是列表文本事件是视图层到逻辑层的报导方式。
此地是列表文本事件可以将用户的作为上报到逻辑层进行拍卖。
此处是列表文本事件可以绑定在组件上,当达到触发事件,就会履行逻辑层中对应的事件处理函数。
那边是列表文本 事件目的足以带领额外音信,如id, dataset, touches。

很彰着的指出了是视图层【wxml】到逻辑层【js】的通讯形式,时间对象足以辅导额外音讯,用那几个事件来传递参数肯定没错了,接下去大家就来其实看下例子:

视图.wxml

  <view id=”tapTest” data-hi=”MINA”
bindtap=”tapName”> Click me! </view>

逻辑.js

Page({
 tapName: function(event) {
      console.log(event.target)
 }
})

log打印

图片 11

可以看来 dataset
里面就是大家设置的data-hi=”MINA”的值了。将来大家来看下刚刚大家写的,
首先
bindtap,以bind初始的就是要给她绑定个事件,那个事件的名字就是“=”号前面的数值就是绑定的轩然大波名称,须要在
逻辑【js】层定义上。 然后就是传值了,注意到的仇人可以看出
大家这边写了data-hi
和大家平时写js的传值是同贰个定义方法。那个data-*就对应事件的本性target里的dataset
值。那里大家要求调用的话就是
event.target.dataset.hi就能取到data-hi所对应的值。

那边需求小心下 data的概念名称: 书写格局:
以data-早先,八个单词由连字符-链接,不只怕有大写(大写会自动转成小写)如data-element-type,最终在
event.target.dataset 中会将连字符转成驼峰elementType。

官方示例:

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

Page({
 bindViewTap:function(event){
  event.target.dataset.alphaBeta == 1 // - 会转为驼峰写法
  event.target.dataset.alphabeta == 2 // 大写会转为小写
 }
})

二、navigator 跳转url传参

*.wxml

<view class="btn-area">
 <navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
 <navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">在当前页打开</navigator>
</view>

*.js 跳到新页面之后在onload里面一向收受参数,接收形式也就是options.[参数值]

Page({
 onLoad: function(options) {
  this.setData({
   title: options.title
  })
 }
})

好啊,明日就写到那里,笔者顺便把文档链接写上,上边写的文档里都有。作者只是把它们搬出来了,用自家的话说了四回。
…(⊙_⊙;)…

多谢阅读,希望能支持到大家,谢谢大家对本站的支撑!

参数传递详解,小程序传递详解
微信小程序的生产,无疑将会在活动网络行业里再度抓住风云。
有人会狐疑小程序会不会火…

近期开支3个品种由于小程序有些零部件的限量,然后想到嵌入网页,然而境遇一个题材:网页端调取多少的时候须求小程序传递七个参数值才能用,怎么着传值呢?

相遇的题材

  1. openid登录难点
  2. webview动态src
  3. 支出成效
  4. 享用功用
  5. 举目四望普通二维码跳转特定页面
  6. 回来按钮缺失难点

  最初我想到是<web-view
src=”

openid登录难题

微信webview的使用方法很简短,只要如下设置src就能够来得具体的网站了。

<!– wxml –> <!– 指向微信公众平台首页的web-view –>
<web-view src=”;

1
2
3
<!– wxml –>
<!– 指向微信公众平台首页的web-view –>
<web-view src="https://mp.weixin.qq.com/"></web-view>

微信环境里的成百上千网页都以用页面要贯彻网站的报到作用,只要把登录的音讯,比如openid恐怕其它新闻拼接到src里就好了。

此间有个难题,公众号的账号种类一般是以openid来判定唯一性的,小程序是可以获取openid的,不过小程序的openid和原公众号之类的openid是不均等的,须求将本来的openid账号连串升级为unionid账号连串。

以下是微信对unionid的牵线

收获用户中央音讯(UnionID机制)

在关切者与公众号发生音讯交互后,公众号可取得关心者的OpenID(加密后的微信号,各个用户对各样公众号的OpenID是绝无仅有的。对于分化公众号,同一用户的openid不一致)。公众号可经过本接口来依据OpenID获取用户宗旨新闻,包含昵称、头像、性别、所在城市、语言和关注时间。

请留心,如若开发者有在八个公众号,或在公众号、移动应用之间联合用户帐号的急需,须求前往微信开放平台(open.weixin.qq.com)绑定公众号后,才可利用UnionID机制来满足上述须要。

UnionID机制表达:

开发者可由此OpenID来收获用户主题新闻。更加需求留意的是,假如开发者拥有八个运动应用、网站使用和群众帐号,可经过取得用户中央消息中的unionid来分歧用户的唯一性,因为只借使同三个微信开放平台帐号下的移位应用、网站采纳和公众帐号,用户的unionid是绝无仅有的。换句话说,同一用户,对同1个微信开放平台下的不等采纳,unionid是一致的。

做完以上步骤,就可以调用小程序api wx.getUserInfo()
来得到用户音讯了,此步骤须求开展后台音信解密进度,在此就不再赘言,结合小程序api文档操作就好。

赢得到unioid之后,将unionid音讯拼接到src就足以开展网页登录操作了(前提是网页可以用跳转链接的方法登录,类似群众号页面拿到openid的花样)。

  经过测试安卓端可以赢拿到那个id ;

webview动态src

微信的webview有个坑的地方,不会动态的监听src的更动,那就招致了一个难点,要由此转移src完结页面跳转就不得以了。
自作者尝试了一部分方法之后,找到了1个消除方案:

微信webview在页面load的时候会加载五回webview,大家就应用这些特点来兑现动态src难题。

  1. 率先把要跳转的链接音讯设置成全局变量,要转移src的时候,先把要src以’?‘拆分为链接和参数两某个,存入全局函数,再调用onLoad就可以已毕webview刷新了。
  2. 页面跳转时,我们也亟需src的动态刷新,所以要把链接新闻存入全局函数;页面跳转时,onShow函数会被调用,那时候再调用两回onLoad就可以了。

data: { url: ”, loaded: false } // 小程序js里的onLoad函数可以写成那样
onLoad: function () { this.setData({ url: getApp().globalData.urlToken +
‘?’ + getApp().globalData.urlData }) }, changUrl: function () {
getApp().globalData.urlToken = ”
getApp().globalData.urlToken = ‘a=1&b=2’ //
直接调用onLoad,就会兑现src的刷新 this.onLoad() }, onShow: function () {
if (!this.data.loaded) { // 首回不运转 this.setData({ loaded: true })
return } // 直接调用onLoad,就会完结src的基础代谢 this.onLoad() } //
wxml可以写成这么 <web-view src=”{{url}}”></web-view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
data: {
    url: ”,
    loaded: false
}
// 小程序js里的onLoad函数可以写成这样
onLoad: function () {
    this.setData({
      url: getApp().globalData.urlToken + ‘?’ +  getApp().globalData.urlData
    })
},
changUrl: function () {
    getApp().globalData.urlToken = ‘https://www.example.com’
    getApp().globalData.urlToken = ‘a=1&b=2’
    // 直接调用onLoad,就会实现src的刷新
    this.onLoad()
},
onShow: function () {
    if (!this.data.loaded) {
      // 第一次不运行
      this.setData({
        loaded: true
      })
      return
    }
    // 直接调用onLoad,就会实现src的刷新
    this.onLoad()
  }
 
// wxml可以写成这样
<web-view src="{{url}}"></web-view>

  可是ios上测试提醒undefined ?

相关文章