详解微信小程序 同步异步解决办法

详解微信小程序 同步异步解决办法

小程序中函数体还没有完成,下一个函数就开始执行了,而且两个函数之间需要传参。那是因为微信小程序函数是异步执行的。但微信小程序增加了ES6的promise特性支持,微信小程序新版本中移除了promise的支持,需要自己使用第三方库来自行实现ES6的promise特性。

WxService.js

import Tools from 'Tools'
import es6 from '../assets/plugins/es6-promise'

class Service {
 constructor() {
  this.__init()
 }

 /**
  * __init
  */
 __init() {
  this.tools = new Tools
  this.__initDefaults()
  this.__initMethods()
 }

 /**
  * __initDefaults
  */
 __initDefaults() {
  // 缓存非异步方法
  this.noPromiseMethods = [
   'stopRecord',
   'pauseVoice',
   'stopVoice',
   'pauseBackgroundAudio',
   'stopBackgroundAudio',
   'showNavigationBarLoading',
   'hideNavigationBarLoading',
   'createAnimation',
   'createContext',
   'hideKeyboard',
   'stopPullDownRefresh',
  ]

  // 缓存wx接口方法名
  this.instanceSource = {
   method: Object.keys(wx)
  }
 }

 /**
  * 遍历wx方法对象,判断是否为异步方法,是则构造promise
  */
 __initMethods() {
  for (let key in this.instanceSource) {
   this.instanceSource[key].forEach((method, index) => {
    this[method] = (...args) => {
     // 判断是否为非异步方法或以 wx.on 开头,或以 Sync 结尾的方法
     if (this.noPromiseMethods.indexOf(method) !== -1 || method.substr(0, 2) === 'on' || /\w+Sync$/.test(method)) {
      return wx[method](...args)
     }
     return this.__defaultRequest(method, ...args)
    }
   })
  }

    /**
     * 保留当前页面,跳转到应用内的某个页面
     * @param {String} url 路径
     * @param {Object} params 参数
     */
  this.navigateTo = (url, params) => {
   const $$url = this.tools.buildUrl(url, params)
   return new es6.Promise((resolve, reject) => {
    wx.navigateTo({
     url: $$url,
     success: res => resolve(res),
     fail: res => reject(res),
    })
   })
  }

  /**
  * 关闭当前页面,跳转到应用内的某个页面
  * @param {String} url 路径
  * @param {Object} params 参数
  */
  this.redirectTo = (url, params) => {
   const $$url = this.tools.buildUrl(url, params)
   return new es6.Promise((resolve, reject) => {
    wx.redirectTo({
     url: $$url,
     success: res => resolve(res),
     fail: res => reject(res),
    })
   })
  }
 }

 /**
  * 以wx下API作为底层方法
  * @param {String} method 方法名
  * @param {Object} obj  接收参数
  */
 __defaultRequest(method = '', obj = {}) {
  return new es6.Promise((resolve, reject) => {
   obj.success = (res) => resolve(res)
   obj.fail = (res) => reject(res)
   wx[method](obj)
  })
 }
}

export default Service

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

时间: 2017-06-21

微信小程序与php 实现微信支付的简单实例

微信小程序与php 实现微信支付的简单实例 小程序访问地址: payfee.PHP: include 'WeixinPay.php'; $appid=''; $openid= $_GET['id']; $mch_id=''; $key=''; $out_trade_no = $mch_id. time(); $total_fee = $_GET['fee']; if(empty($total_fee)) //押金 { $body = "充值押金"; $total_fee = float

微信小程序开发中的疑问解答汇总

前言 最近总结一篇微信小程序解答,作为小程序填坑人深有体会这里的变化,小程序刚发布消息的时候我就说了一个观点,只要小程序提供的组件或API丰富,稳定,兼容性好,才能实现小程序快速开发的理念,先如今还有很多组件的兼容不理想,有一些还在的优化中,因基于小程序这个平台开发限制很大,只能坐等中...如果想用第三方库来实现,小程序明文规定不支持第三方库的做法,这样做最终小程序审核环节百分百的不通过. 1.scroll-view 在 iOS 上存在 bug 在使用这个组件开发页面的时候,因自带滚动效果,Y

详解微信小程序 template添加绑定事件

详解微信小程序 template添加绑定事件 对于模板的使用,我是想将模板的事件单独出来,其他引用模板的页面中不再掺杂模板事件,比较方便管理,如果还有其他好的解决办法, 请赐教. template.wxml <view bindtap="clickView" class="tempClass">temp模板</view> template.js var temp = { clickView: function () { console.log

详解微信小程序 登录获取unionid

详解微信小程序 登录获取unionid 首先公司开发了小程序, 公众号网页和app等, 之前都是用的openid来区分用户, 但openid只能标识用户在当前小程序或公众号里唯一, 我们希望用户可以在公司各个产品(比如公众号, 小程序, app里的微信登录)之间, 可以保持用户的唯一性, 还好微信给出了unionid. 下面分两步介绍一下 微信小程序 获取unionid的过程. 1. 首先 在微信公众平台注册小程序 , 然后在小程序上模拟登录流程. 注 : 这里只是简单登录流程, 实际中需要维护

详解微信小程序设置底部导航栏目方法

详解微信小程序设置底部导航栏目方法 小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家. 好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的. 我们先来看个效果图 这里,我们添加了三个导航图标,因为我们有三个页面,小程序最多能加5个. 那他们是怎么出现怎么着色的呢?两步就搞定! 1. 图标准备 阿里图标库  http://www.iconfont.cn/collections/show/29 我们进入该网站,鼠标滑到一个喜欢的图标上面  点击下

微信小程序之网络请求简单封装实例详解

微信小程序之网络请求简单封装实例详解 在微信小程序中实现网络请求相对于Android来说感觉简单很多,我们只需要使用其提供的API就可以解决网络请求问题. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downloadFile) WebSocket通信(wx.connectSocket) 为了数据安全,微信小程序网络请求只支持https,当然各个参数的含义就不在细说,不熟悉的话可以:可以去阅读官方文档的网络请求api,当我们使用request

微信小程序 Buffer缓冲区的详解

 微信小程序 Buffer缓冲区的详解 JavaScript 语言自身只有字符串数据类型,没有二进制数据类型. 但在处理像TCP流或文件流时,必须使用到二进制数据.因此在 Node.js中,定义了一个 Buffer 类,该类用来创建一个专门存放二进制数据的缓存区. 在 node.js 中,Buffer 类是随 Node 内核一起发布的核心库.Buffer 库为 Node.js 带来了一种存储原始数据的方法,可以让 Node.js 处理二进制数据,每当需要在 Node.js 中处理I/O操作中移动

微信小程序的分类页面制作

微信小程序实的分类页面制作 先上效果图. 这个界面布局难度不是很大,css基础好的,很快就实现了,分类界面,左边是一级目录,右边是一级目录对应的二级目录,根据 这个需求,我们数据设计的结构一定是数组嵌套数组,第一个数组包含一级目录数据,嵌套的数组包含的是二级目录的数据. 代码的实现 classify.js Page({ data: { cateItems: [ { cate_id: 1, cate_name: "护肤", ishaveChild: true, children: [ {

微信小程序 跳转页面的两种方法详解

微信小程序 跳转页面 小程序页面有2种跳转,可以在wxml页面或者js中: 1,在wxml页面中: <navigator url="../index/index">跳转到新页面</navigator> <navigator url="../index/index" open-type="redirect">在当前页打开</navigator> <navigator url="../i

微信小程序返回多级页面的实现方法

微信小程序返回多级页面的实现方法 微信小程序开发中,返回上一页是很普遍的操作,最常见的是点击手机的返回键和点击自定义的按钮返回上一页这两种情况.点击手机的返回键我们不需要做处理,如果是自定义按钮实现返回效果,就要调用微信提供的API: wx.navigateBack(OBJECT) 也可以通过 wx.navigateBack 方法实现返回多级页面,只要设置 delta 的值就可以: //在C页面内 navigateBack,将返回A页面,delta = 1 时与 wx.navigateBack(

微信小程序 详解页面跳转与返回并回传数据

微信小程序 详解页面跳转与返回并回传数据 A页面: .wxml文件 <view class="flex-wrp"> <text style="width: 32%;">选择城市</text> <input style="width: 68%;" type="text" bindtap="city" placeholder="请选择城市" valu

微信小程序 设置启动页面的两种方法

 微信小程序 设置启动页面 在开发微信小程序的时候,除了tabBar上设置的页面之外,想进入肯定要走跳转之类的进入,但是我们开发的时候肯定想要直接看到该页面,那么我们就需要设置一下启动页面了有两种方法. 方法一 在app.json文件中,pages数组,设置在第一个的页面就是默认启动页面,所以你只需要调整你当前开发的页面顺序就好了. 方法二 在编译的地方设置,你只需要设置页面的路径,勾选上"使用以上条件编译",如果页面需要参数,那可以把参数也传上.这样启动的就是你设置的页面. 感谢阅读

详解微信小程序中的页面代码中的模板的封装

详解微信小程序中的页面代码中的模板的封装 最近在进行微信小程序中的页面开发,其实在c++或者说是js中都会出现这种情况,就是相同的代码会反复出现,这就是进行一定的封装,封装的好处就是可以是程序中在于减少一定的代码量,并且可是使代码结构更加清晰.那今天所要记录的就是关于微信小程序中的页面的模板封装. 在微信小程序中的文件名都带有wxml等样式,在wxml中提供了模板,即可以在模板中定义代码片段,然后可以在页面中的不同位置进行调用,模板的定义: <templatename="products&

微信小程序之分享页面如何返回首页的示例

做小程序开发发现,页面分享出去后,用户通过分享进去的页面很难找到返首页的情况.(微信官方操作是点击右上角三个点,在手机下方显示返回首页).民间很多方案是自己在页面加个悬浮Home标注. 今天我分享另外一种方法.请看下面.gif; 有没有发现,左上角有返回按钮了.原理简单,在你要分享的页面,分享配置时配置你的首页,并带上对应的参数,在首页 onLoad方法中可以获取.代码如下: <!--index.wxml--> <view class="container">

微信小程序之判断页面滚动方向的示例代码

微信小程序中如果判断页面滚动方向? 解决方案 1.用到微信小程序API 获取页面实际高度 nodesRef.boundingClientRect([callback]) 监听用户滑动页面事件onPageScroll. 2.获取页面实际高度 <!--WXML--> <view id="box"> <view class="list" wx:for="{{List}}" wx:key="List{{index}

微信小程序实现购物页面左右联动

本文实例为大家分享了微信小程序实现购物页面左右联动的具体代码,供大家参考,具体内容如下 效果图: wxml <view class="pro-container"> <scroll-view class="left-menu" scroll-y scroll-with-animation="true" scroll-top="{{leftMenuTop}}"> <view class="

微信小程序实现tab页面切换功能

效果图如下所示: wxml <scroll-view scroll-x="true" class="ip_tab_comtainer"> <view class="ip_tab_comtainer_padd"></view> <block wx:for="{{ips}}" wx:for-item="ip" wx:key="{{ip.id}}"&g