微信小程序开发小结

  1、点击按钮分享功能:

  使用Button组件,设置open-type="share",然后在js文件的onShareAppMessage方法中设置如下:

onShareAppMessage: function (options) {
let shareObj = {}
if (options.from == "button") {
    //设置title、path、imageUrl
   shareObj.title = ‘‘
   shareObj.path = ‘‘
   shareObj.imageUrl = ‘‘
}
return shareObj
}

 

  2、Navigator组件中的子元素也绑定了事件,点击子元素触发时,页面会跳转。

  解决:子元素绑定事件时不要用bindtap,改用catchtap

 

  3、获取当前页面的url(完整路径)。写成工具函数如下:

function getCurrentPageUrlWithArgs(){
    var pages = getCurrentPages()    //获取加载的页面
    var currentPage = pages[pages.length-1]    //获取当前页面的对象
    var url = currentPage.route    //当前页面url
    var options = currentPage.options    //如果要获取url中所带的参数可以查看options
    var urlWithArgs = ‘‘
    //拼接url的参数
    if (options) {
      urlWithArgs = url + ‘?‘
      for(var key in options){
        var value = options[key]
        urlWithArgs += key + ‘=‘ + value + ‘&‘
      }
    } else {
      urlWithArgs = url + ‘ ‘
    }
    urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length-1)
    return urlWithArgs
}

 

  4、小程序分页数据限制:

  常规的做法是,将每次新获取的数据拼接到当前数组中去。这样,对于数据量较小的情况下是没什么问题的,但是如果数据量比较多,很容易就超出1024kb的限制。

  那么该如何缓解这种问题呢?这里参照了百度小程序的解决方案,就是使用二维数组来解决。

this.setData({
  [‘hotTodayList[‘ + curPage + ‘]‘]: res.list,  // curPage表示二维数组的下标,如果分页是从1开始,则curPage等于当前页减去1,如果分页从0开始,则curPage就等于当前页数
  pageNum: this.data.pageNum + 1,
  totalPage: totalPage,
})

  在页面渲染的时候,就要使用两个for循环来渲染数据了。 

<block wx:for="{{hotTodayList}}" wx:for-item="arrItem" wx:for-index="arrIndex">
  <block wx:for="{{arrItem}}" wx:for-item="item" wx:key="index" wx:for-index="index">
    // 需要渲染的页面结构
  </block>
</block>

  注意:在刷新的时候要清空原数据,防止新数据与原数据冲突,如本例,直接hotTodayList = []就行了。

  这虽然能解决在分页数较多,单次设置数据较大的问题。但是如果单页中后台一次性返回的数据大于1024kb时,依然会出现问题的,特别是有商品sku这种情况下,是很容易碰到的,所以还是需要与后端协商一下,尽量不要返回不必要的数据。

 

  5、小程序遇到了偶发性微信加密数据解密失败的问题:

  在这一步的开发中,一定要按照这样的顺序 1. 小程序请求login,拿到code  ;2.然后小程序调用getuserinfo接口拿到encryptedData,iv,还有之前的code,然后传给服务端;4.服务端拿到客户端的encryptedData,vi还有sessionKey去解密得到 unionId等用户信息;不然就会出现这样的问题,这种情况偶然出现的原因就是,在服务端还未去获取sessionKey的时候就去调用了getuserinfo,有时候会比服务端快,有时候会比服务端慢,所以就出现了偶然性。

 

  6、小程序上线后打开出现了调试模式:

  这是因为在开发版本打开了调试模式,然后再用线上版本也会有。在开发版中关闭调试模式就行。好在这个只有自己有,用户是没有的。

 

  7、用户长按二维码进入小程序后,获取二维码中的参数失败:

    微信小程序开发小结

    以上是官方文档给的说明。之所以失败是因为二维码只认scene字段,也就是用options.scene可以获取,二维码中的这个参数不能随便传,否则虽然能进入到小程序,但是无法获取到想要的参数。

 

  8、小程序使用canvas画图,保存到本地:

  问题:使用网络图片时,在开发者工具上是没问题的,能正常显示,但是在真机上测试,发现图片不显示,开启调试,发现也没报错。

  原因:小程序canvas不支持在真机上绘制在线图片。

  解决办法:将在线图片(网络图片)使用wx.getImageInfo方法转换为本地路径,然后在使用canvas中的drawImage即可。注意:网络图片需先配置download域名才能生效

 

  9、小程序版本检测更新:

// 获取小程序更新机制兼容
    if (wx.canIUse("getUpdateManager")) {
      const updateManager = wx.getUpdateManager();
      updateManager.onCheckForUpdate(function (res) {
        // 请求完新版本信息的回调
        if (res.hasUpdate) {
          updateManager.onUpdateReady(function () {
            wx.showModal({
              title: "更新提示",
              content: "新版本已经准备好,是否重启应用?",
              success: function (res) {
                if (res.confirm) {
                  // 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
                  updateManager.applyUpdate();
                }
              }
            });
          });
          updateManager.onUpdateFailed(function () {
            // 新的版本下载失败
            wx.showModal({
              title: "已经有新版本了哟~",
              content: "新版本已经上线啦~,请您删除当前小程序,重新搜索打开哟~"
            });
          });
        }
      });
    } else {
      // 如果希望用户在最新版本的客户端上体验您的小程序,可以这样子提示
      wx.showModal({
        title: "提示",
        content: "当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。"
      });
    }

 

微信小程序开发小结

上一篇:微信小程序退款


下一篇:人人商城小程序用户授权问题