浅谈微信小程序开发

  • 2018-12-01
  • 0
  • 0

最近开发小程序,第一版开发阶段算是接近尾声,今天周末,总结下

微信账号通用

先说说这个问题,如果你要实现微信账号登录APP、网页、小程序、公众号数据互通,保存的微信标识必须是unionid,因为这是官方唯一指定,同一用户,对同一个微信开放平台下的不同应用,unionid是相同的,openid在每个应用里是固定不变,但是在不同应用下,是不同的,因为公司项目之前app端用户绑定微信保存的表示并不是unionid,所以数据互通这块,并不能使用微信号来链接互通,只能换成以用户注册的手机号来牵连,显然,这并不是最好的。

So,做第三方账号关联前,先网上了解下,再动手,一旦动手,上线,就不是很方便改喽

小程序开发者工具迷之BUG

某天,更新了小程序开发者工具,然后打开项目就一直提示“小程序重启耗时过久,请确认业务逻辑中是否有复杂运算,或者死循环”如下图
img
这个情况还特别难处理,重启电脑,重装都没用,只能自己去调试查看错误问题;微信开发者工具->调试->调试微信开发者工具,然后点编译,报了个如下图的错误(我把翻译了下)
img

虽然不知道什么意思,但是玩linux系统经常遇到一些不能访问,端口关闭,开端口的经验告诉我这就是和防火墙有关系,于是,关闭电脑防火墙,再次进入,没问题,加载出来了,然后再回去把防火墙开启,再次打开,依然没问题,ok,任督二脉打通,解决
img

谈谈小程序过滤器

vue是有过滤器这个玩意的,但是小程序没有,怎么办?

可以用wxs来做,但是要注意wxs不支持es6等等,wxs并不是js,它有自己的一套规则,详情可以去看开发文档,就是说以前vue用的过滤器那些方法,直接拿过来,可能会报错,需要自己去排查更改,比如jsnwe Date()在小程序里就没有这个操作,得使用它们的getDate(),简单演示下怎么使用

先建个filter.wxs,简单写个保留2位小数过滤方法

function toFixed(value,places) {
  return Math.floor(value * Math.pow(10,places)) / Math.pow(10,places)
}
module.exports = {
  toFixed: toFixed
}

在页面wxml中使用

<!-- src引入filter.wxs(路径只能用相对路径), module给模块起名 -->
<wxs src="../utils/filter.wxs" module="filter" />
<text>{{filter.toFixed(money)}}</text>

小程序之本地缓存

这里就简单说下缓存隔离级别问题,其它看官方开发文档

  1. 同一手机,不同小程序应用,至少在逻辑存储上肯定不是共享缓存,满足应用级别隔离
  2. 同一手机,同一个小程序,不同微信用户扫码使用,经测试,也不共享缓存,目前测试条件下,是用户级别隔离
  3. 同一手机,同一个小程序,同一微信用户两次扫码使用,经测试,是共享缓存
  4. 同一手机,同一个小程序,不同微信用户切换使用(分别扫码两次),经测试,同一个用户共享缓存,不同用户间不共享缓存
  5. 同一手机,线上版本、开发版、体验版是共享缓存的

以上是在真机测试得到的结果,结果不一定完全准确,仅供参考

小程序图片地扯转base64解决方案

wx.request({
    url: res.detail.userInfo.avatarUrl, // 这里填图片地址
    method:'GET',
    responseType: 'arraybuffer',
    success:function(res){
        console.log(res)
        let base64 = wx.arrayBufferToBase64(res.data);
        base64 = 'data:image/jpg;base64,' + base64;
        console.log(base64)
    }
})

返回上一页,上一页数据并不会初始化

这是个比较坑的地方,你需要手动在onShow()去初始化一些数据

小程序页面/自定义组件之间通信

页面之间通信

  1. url传参

    与网页get传参一样,在路径后面加参数,跳转过去后,在onLoad()通过参数可以拿到

    /**
     * 注意:
     * 1、url传参只能在onLoad()里拿
     * 2、wx.switchTab()不能传参
     * 3、wx.reLaunch()如果跳转的页面路径是 tabBar 页面也不能带参数
     */
    // a页面
    wx.navigateTo({
      url: `/pages/b/b?num=1&url=papp.vip`
    })
    // b页面
    onLoad(options) {
      console.log(options.num)  // 1
      console.log(options.url)  // papp.vip
    }
    
  2. localStorage(这个不多说了)
  3. 小程序globalData(全局变量)
    /**
     * 友情提示:
     * 尽量不要过多使用全局变量
     */
    // app.js
    App({
      globalData: {
        num: 1
      }
    })
    // a页面
    const app = getApp()
    Page({
      toB() {
        app.globalData.num = 2
        app.globalData.url = 'papp.vip'
        wx.navigateTo({
          url: `/pages/b/b`
        })
      }
    })
    // b页面
    const app = getApp()
    onLoad() {
      console.log(app.globalData.num)   // 2
      console.log(app.globalData.url)   // papp.vip
    }
    

页面与自定义组件

  1. localStorage
  2. globalData(同页面之间通信使用方法)
  3. WXML 数据绑定
    // page.wxml
    
    // page.js
    Page({
      onMyEvent(e) {
        console.log(e.detail) // 自定义组件触发事件时提供的detail对象
      }
    })
    // 组件js
    Component({
      properties: {
        //配置页面传过来的值,key值要一一对应
        'url':{
         type: String, //必填,目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
         value: ""     //可选,默认值,如果页面没传值过来就会使用默认值
        },
      },
      methods(){
         fun(){
           let myEventDetail = {} // detail对象
           this.triggerEvent("myevent", myEventDetail) //triggerEvent函数接受三个值:事件名称、数据、选项值  
         }
      },
      // 组件生命周期
      ready() {
        console.log(this.data.url)  // papp.vip
      }
    })
    
    

页面生命周期与自定义组件生命周期执行顺序

created(组件)–>attached(组件)–>onLoad(页面)–>onShow(页面)–>ready(组件)–>onReady(页面)

setData修改数组或对象中的一个属性值

  onShow() {
    // 不能这样写
    // this.setData({
    //   obj.id: 1,
    //   arr[2].id: 2
    // })
    let index = 2
    this.setData({
      [`obj.id`]: 1,
      [`arr[${index}].id`]: 2
    })
  }

 

后续

暂时就这些吧,以后遇到再续加,本来想写写自定义组件这块,但是自己还不是很熟悉,无法表达清楚,只能说,如果你要学习这块,可以去看看iview的weapp小程序UI库的源码,我自己写的组件,都是从这里学习的

评论

还没有任何评论,你来说两句吧