小程序笔记

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

小程序开发

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();
            });
        }
    }

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