微信小程序开发技巧汇总

1.全局变量的使用

每个小程序都需要在 app.js 中调用 App 方法注册小程序示例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。
详细的参数含义和使用请参考 App 参考文档 。

整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 示例，获取App上的数据或调用开发者注册在 App 上的函数。

我们在做小程序的时候往往需要大量的请求，而请求的域名也都是相同的，我们可以把域名储存到全局变量中，这样会方便后面请求域名的修改。（user_id、unionid、user_info之类经常用到的都可以放在全局变量中）

//app.jsApp({ globalData: {  user_id: null,  unionid:null,  url:"https://xxx.com/index.php/Home/Mobile/",   //请求的域名  user_info:null }})

当在页面中使用时记得要引用下app.js，小程序已经提供了方法

//index.js//获取应用实例const app = getApp()  //获取app//let url = app.globalData.url; //使用方法，可先定义或者直接使用app.globalData.urlwx.request({  url: app.globalData.url + 'checkfirst', //就可以直接在这里调用  method:'POST',  header:{"Content-Type":"application/x-www-form/"}  data:{},  success:(res)=>{}

2.箭头函数的使用

当我们调用接口请求时要通过请求返回的数据改变页面数据经常要用到临时指针来保存this指针。

但如果使用ES6的箭头函数就可以避免

使用临时指针

onLoad: function (options) {  let that = this //保存临时指针  wx.request({   url: url + 'GetCouponlist',   method: 'POST',   header: { 'Content-Type': 'application/x-www-form-urlencoded' },   data: { },   success(res) {    that.setData({  //使用临时指针     coupon_length:res.data.data.length    })   }  })

使用ES6箭头函数 ( ) => {}

success:(res) => {    this.setData({  //此时this仍然指向onLoad     coupon_length:res.data.data.length    })   }

3.HTTP请求方法的封装

在小程序中http请求是很频繁的，但每次都打出wx.request是很烦的，而且代码也是冗余的，所以我们要把他封装起来
首先要在utils文件夹中新建一个js，我命名为request.js,在里面封装出post和get的请求，记得最后要声明出来

//封装请求const app = getApp()let host = app.globalData.url/** * POST 请求 * model:{ * url:接口 * postData:参数 {} * doSuccess:成功的回调 *  doFail:失败回调 * } */function postRequest(model) { wx.request({  url: host + model.url,  header: {   "Content-Type": "application/x-www-form-urlencoded"  },  method: "POST",  data: model.data,  success: (res) => {   model.success(res.data)  },  fail: (res) => {   model.fail(res.data)  } })}/** * GET 请求 * model:{ *  url:接口 *  getData:参数 {} *  doSuccess:成功的回调 *  doFail:失败回调 * } */function getRequest(model) { wx.request({  url: host + model.url,  data: model.data,  success: (res) => {   model.success(res.data)  },  fail: (res) => {   model.fail(res.data)  } })}/** * module.exports用来导出代码 * js中通过 let call = require("../util/request.js") 加载 */module.exports = { postRequest: postRequest, getRequest: getRequest}