微信小程序开发小结

　　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、小程序版本检测更新：

可在onLaunch方法中调用如下方法
// 获取小程序更新机制兼容
    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: "当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。"
      });
    }

 

　　10、小程序定时器之setInterval

　　问题：例如点击一个按钮，调用服务端接口拿到截止时间与服务器当前时间，然后在弹窗中实现一个定时器。最初我是这么实现的，直接一个setInterval完事儿，乍一看，完全没问题，可是当我关闭弹窗再次点击按钮时，发现弹窗中的定时器会运行的很快，没啥规律，或者当我进到其他页面时，再回过头来进入该页面，发现定时器也会有类似问题，究其原因，发现原来是定时器没有及时清除搞的鬼。

　　解决：关闭弹窗时，清除定时器。页面执行onHide与onUnload生命周期时，也清除一遍定时器。然后顺利解决了。

 

　　11、小程序之阻止遮罩层底下的页面滑动（目前测的ios端没问题，android端后续再测）

　　问题：小程序自带的遮罩层会默认阻止遮罩层底下页面滑动，但是如果是我们自定义的遮罩，底下的页面是可以滑动的，虽然无伤大雅，但是总感觉怪怪的，于是网上查询资料半天，最终找到了一种简单粗暴的方法。特此记录下。

　　解决：为遮罩层绑定catchtouchmove='preventD'，preventD为事件名，这个事件名可以随意取，事件里面啥也不用写，就能成功解决。

 

　　12、小程序分包加载：

　　（1）、在app.json中配置如下：

{
  "pages": [
    "pages/index/index"
  ],
  "subPackages": [
    {
      "root": "package_a",
      "pages": [
        "pages/home/home"
      ]
    },
    {
      "root": "package_b",
      "pages": [
        "pages/home/home"
      ]
    }
  ],
  "tabBar": {
    "color": "#444",
    "selectedColor": "#fe4d4d",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "pages/index/home.png",
        "selectedIconPath": "pages/index/home_select.png"
      },
      {
        "pagePath": "pages/prefer_goods/prefer_goods",
        "text": "拼好货",
        "iconPath": "pages/prefer_goods/prefer_goods.png",
        "selectedIconPath": "pages/prefer_goods/prefer_goods_select.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "pages/my/my.png",
        "selectedIconPath": "pages/my/my_select.png"
      }
    ]
  },
  "window": {
    // 相关配置
  },
  "navigateToMiniProgramAppIdList": [
     // 所要跳转的小程序appid
  ]
}

　　（2）、与app.json同级目录新建package_a目录（该目录下新建images目录与pages目录，然后pages目录下像之前一样正常操作）与package_b目录（该目录下新建images目录与pages目录，然后pages目录下像之前一样正常操作）

　　（3）、上述操作完后，保存，然后会报错，错误如：“pages *** 不应该在分包 subPackages[*] 中”。这个错误的原因是通过编辑器右键添加page的话，主包中会自动加入page路径，此时我们再去创建新的分包如果没有去掉主包路径就会报错。解决办法就是去掉主包中的路径即可。

 

　　13、绘制圆角矩形函数封装（在安卓机上会有bug）

roundRectColor: function (context, x, y, w, h, r) {  //绘制圆角矩形（纯色填充）
    context.save()
    if (w < 2 * r) {
      r = w / 2
    }
    if (h < 2 * r) {
      r = h / 2
    }
    context.beginPath()
    context.setFillStyle('#fff')   // 填充颜色为白色
    context.setStrokeStyle('#fff')  // 描边颜色为白色
    context.moveTo(x + r, y)
    context.arcTo(x + w, y, x + w, y + h, r)
    context.arcTo(x + w, y + h, x, y + h, r)
    context.arcTo(x, y + h, x, y, r)
    context.arcTo(x, y, x + w, y, r)
    context.fill()
    context.closePath()
  }

　　可使用arc与lineTo方法

roundRectColor: function (context, x, y, w, h, r, c) {  //绘制圆角矩形（纯色填充）
    context.save()
    if (w < 2 * r) { r = w / 2; }
    if (h < 2 * r) { r = h / 2; }

    context.beginPath();
    context.setStrokeStyle('#fff');
    context.setFillStyle('#fff');

    context.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
    context.moveTo(x + r, y);
    context.lineTo(x + w - r, y);
    context.lineTo(x + w, y + r);

    context.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
    context.lineTo(x + w, y + h - r);
    context.lineTo(x + w - r, y + h);

    context.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
    context.lineTo(x + r, y + h);
    context.lineTo(x, y + h - r);

    context.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
    context.lineTo(x, y + r);
    context.lineTo(x + r, y);

    context.fill();
    context.stroke();
    context.closePath();
   
  }

　　

　　14、小程序中使用rsa加密：

　　下载wx_rsa.js文件，在页面中引入rsa.js文件。如：const RSA = require('../../utils/wx_rsa.js') 

let publicKey = ''                                      // 加密密钥
let encrypt_rsa = new RSA.RSAKey()
encrypt_rsa = RSA.KEYUTIL.getKey(publicKey)
let encStr = encrypt_rsa.encrypt(pass)                  // pass为需要加密的内容
encStr = RSA.hex2b64(encStr);

如需要进行encode编码，则pass = encodeURI(encStr)即可