微信小程序项目总结，持续更新

1.报错组件或者说，说明组件 toast，详见 menu 文件夹

2.IDE快捷键 ctrl+shift+P 手机自动预览， ctrl+？快捷注释与取消

3.小程序单元测试目前使用 miniprogram-simulate

4.1线上api请求获取到的src图片地址转换base64

  arrayBufferToBase64 (src) {
    let _this = this
    wx.request({
      url: src,
      method: 'GET',
      responseType: 'arraybuffer',
      success: function (res) {
        let base64 = wx.arrayBufferToBase64(res.data);
        _this.setData({
          base64String: base64
        })
      }
    })
  }

4.2本地上传图片或照片转base64

　　首先用微信提供的API，wx.chooseImage，参考https://developers.weixin.qq.com/miniprogram/dev/api/

　　然后结合API，wx.getFileSystemManager

wx.getFileSystemManager().readFile({
          filePath: res.tempFilePaths[0], //选择图片chooseImage返回的相对路径
          encoding: 'base64', //编码格式
          success: res => { //成功的回调
            that.setData({
              base64String: res.data
            })
            // console.log("ourUrl=" + that.data.ourUrl)
            // console.log("data:image/jpeg;base64," + res.data)
          }
        })

4.3 【走不通了...】本地上传照片或图片获得的src转base64

　　由于后端提供了upload接口，首页通过wx.chooseImage选择图片上传至，照片服务器API：upload 返回src

wx.uploadFile({
          url: upload,
          filePath: res.tempFilePaths[0],// wx.chooseImage返回的数据
          name: 'file',
          header: {
            token: app.globalData.token
          },
          success(res) {
            console.log(res.data)
            that.arrayBufferToBase64(res.data)
          }
        })

5.小程序加载，有时需要 setTimeout 后才有效，例如用户点开分享的小程序，需求立马跳出选择组件。

6.skeleton

7.图片太多加载慢：

　　判断用户的设备（主要用在移动端）、网络等，分别加载不同质量的图片（例如高端 iPhone wifi 情况下，就可以加载双倍高清图等，蜂窝网络下面，就加载个单倍或者有损压缩过的）。

　　或者先加载低质量的图片，让浏览者可以看到，然后再在后台加载更高清的，等加载完了，浏览者还在观看，就插入替换掉。

　　或者先加载低质量小图片列表，然后让用户点击，触发类似 fancybox 的效果，弹窗出现大图片。

　　或者利用资源预加载（三个 HTML5 不常见特性简介）当用户还没打开的时候，就开始加载。

　　还有好多思路，后面想到再补充。

8.侧滑 https://juejin.im/post/5c63770de51d45272c3fb33a?utm_source=gold_browser_extension

9.setData 复杂的对象

// 比如 marquee: { page: '../user/lost/lost', text: '' }
// marquee 是变量
this.setData({
      [`${'marquee'}.width`]: '1',
      bolClose: true,
      [`${'marquee'}.text`]: 1

})    

// marquee 是属性
this.setData({
       ['marquee.text']: '1'
})

10.百度：微信小程序1rpx border ios真机显示不全问题分析及解决方案

11.json 文件配置

window: {
    "backgroundTextStyle": "light",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "",
    "navigationBarBackgroundColor": "#ffffff",
    "backgroundColor": "#efeff4",
    "disableScroll": true,    // 禁止下拉
    "enablePullDownRefresh": true,      // 下拉刷新
    "navigationStyle": "custom",    // 自定义导航
    "usingComponents": {
        "nav-bar": "../../components/nav-bar/nav-bar"
     }  
    // 待补充
}

12.方法传递参数

// 传递参数只能通过 WXML 上面的属性值来传递，需要在标签上增加 data-xx 这样的属性，可以在 fn 内 event 对象的 target/currentTarget 的 dataset 获取参数。如 
const {name, detail} = e.currentTarget.dataset

13.IDE

VS Code + minapp 插件

传递参数只能通过 WXML 上面的属性值来传递，需要在标签上增加 data-xx 这样的属性，可以在 fn 内 event 对象的 target/currentTarget 的 dataset 获取参数。如 const {name, detail} = e.currentTarget.dataset

微信小程序项目总结，持续更新

猜你喜欢