小程序笔记

最近接触了一段时间小程序，记录了在开发过程中的一些结论

小程序开发

1. 小程序前后端交互过程

   • wx.login()获得code，传给后台服务器
   • 后台服务器请微信服务器请求，返回openId/sessionKey（用于获取用户已授权的其他数据，如运动步数），后台把openId/sessionKey存储在session，前端header里就会得到一个set-cookie
   • 小程序前端要缓存（setStorageSync），每次请求携带cookie，后台就可以判断是哪个用户，这个过程要自己实现（和浏览器不一样）

2. 用户授权过程

   • 授权窗口按确定

   <button  open-type='getUserInfo' bindgetuserinfo="getUserInfo">
       <text>微信授权</text>
   </button>
   
   getUserInfo: function(res) {
       xxxx
   }
   

3. 改变小程序每个页面或者单页面的背景色

   • 在app或者xx.wxss 加入，page 前面不用点

   page {
       background-color: #f4f4f4;
   }
   

4. wx：key 在渲染中的作用

   • 当指定wx:key时，列表改变时（包括内容和顺序），渲染时只是重新排序各组件，而不用重新创建
   • key 要求唯一
   • key 对性能提高有好处

5. 小程序异步问题，首页onLoad() 抢在app.js 的login 方法之前执行

   • 封装代码方法，函数回调

   function waitFlag(signalOrigin, flag, status) {
       return new Promise(function(resolve, reject) {
           let i = 0
           let check = function() {
               if (!!signalOrigin[flag] === !!status) {
                   resolve()
               } else if (i++ > 1000) {
                   reject()
               } else {
                   setTimeout(check, 50)
               }
           }
           check()
       })
   }
   
   waitFlag.waitFlag(app.globalData, 'hasGet', true).then(() => {
       xxxxxx
   })
   

6. 轮播图，图片，高度自适应(提前知道图片的WH，赋值给swiper)

   • 图片设置为 懒加载，否则加载过多图片手机迅速发烫

7. 点击图片放大功能

8. 视频图像得先下载，再保存到相册

9. 给图片添加水印，或者二维码（建议后端来做：一条linux命令搞定）

   • cavans 画图，加字
   • cavans 利用绝对定位隐藏，画图是visable: true
   • visable: false，导出图片到相册

10. ios 下video 出问题，无法部分视频

    • 设置 video 的custom-cache="{{false}}"

11. e.currentTarget.dataset/e.Target.dataset 的区别

12. 图片加载时的占位图

13. 视频不在可视范围，停止播放

ready() {
    // 在自定义组件内，一定要加上后面参数 this
    this.videoContext = wx.createVideoContext('swiperVideo', this)

    if (this.videoContext) {
        this.createIntersectionObserver().relativeToViewport({
            top: -100,
            bottom: -100
        }).observe('.swiper-video', (res) => {
            this.videoContext.pause();
        });
    }
}

欢迎大家给我留言，提建议，指出错误，一起讨论学习技术的感受！