微信小程序开发经验

一，笔记
小程序分为渲染层和逻辑层，渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本，一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端做中转，逻辑层发送网络请求也经由Native转发。

二，开发经验总结

1：点击一个链接跳转之后，再返回到这个页面，需要重新加载的版块就放到onshow()生命函数中，不需要从新加载的放到onload()生命周期函数中

2：需要加载的模块页面需要加载动画，不要都放到整个页面都呈现出一个加载动画。

3：小程序json配置文件的key必须是双引号，且json文件最后一个值不要有 " ," 逗号出现。

4：小程序中的使用图片一定要设置宽高，否则微信会默认给设置一个宽高

5：小程序中如果设置平方字体（苹果手机中才会出现的字体）：

view{ font-family: "PingFangSC-Thin"; }

6：页面能写成一个一个组件拼装起来，就写成组件的形式:，这样可以实现代码复用。

7：小程序中的api用promise对象进行封装，实现一致性异步操作

//request请求
function request(url, data, method, type) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: url,
      data: data,
      dataType: type,
      method: method,
      success: resolve,
      fail: reject
    })
  })
}

module.exports = {
  request
}

8：为了减少全部变量，将公用的信息写在一个配置文件中。新建config.js

const base_host_url = "https://www.test.com/api";

module.exports = {
  base_host_url 
}

9：image文件夹的置放，如果是page中用到的图片，建议image放到page的同级目录，如果是自己写的组件中用到的图片，或者第三方组件中用到的图片，就放到component下的文件中，新建一个image,为了区分开

10：切记，千万不要在for循环中使用this.setData({key:value});减少对this.setData()的调用

例如：
for(let i = 0;i<10;i++){
  if(i > 1){
    this.setData({index:10});
  }else{
    this.setData({index:2});
  }
}
修改成：
var index;
for(let i = 0;i<10;i++){
  if(i > 1){
    index = 10;
  }else{
    index = 2;
  }
}
this.setData({index:10});
否则，严重了会造成小程序直接运行卡掉

11：能封装在app.js中的代码就不要在重新建一个文件再去封装。否则还得再js文件中先引入，才能使用
12：标签中没有特殊需求的话，都加上mode=‘withFix’
图片的缩放模式，保持图片的宽高比不变

<image bindtap="lookImg" src="{{url}}/{{item.path}}" mode='widthFix'></image>

来源：CSDN

作者：long shen

链接：https://blog.csdn.net/shenshulong/article/details/104305211