zoukankan      html  css  js  c++  java
  • 微信小程序开发小结

      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)即可
    

      

  • 相关阅读:
    rocketmq的broker如何同步信息的?
    SO_LINGER 选项
    哈哈哈
    NAG博客目录
    事后分析$eta$
    项目展示$eta$
    测试报告$eta$
    发布声明$eta$
    Scrum meeting 10
    技术博客6--Django实现列表分页
  • 原文地址:https://www.cnblogs.com/jf-67/p/10303099.html
Copyright © 2011-2022 走看看