小程序开发技巧总结

0.小程序如何请求设置头信息

由于在前一篇文章中写过，这里就不重复了。参考下面这个链接:

ASP.NET WebAPI 双向token实现对接小程序登录逻辑

下面这个链接是参考资料，直接参考这一篇就明白怎么设置请求头
jquery ajax 设置请求头header参数

1. 微信小程序引用同一js文件中的方法函数（function）

如上图红色框所示，引用同一js文件中的函数不像普通js调用，需要加上下面代码段加粗部分。（不知道在代码段里面为什么不显示粗体了，就是**这里）

onLoad: function (options) { **var that=this;** **this.loadList();** }, **loadList**:function(e){ wx.request({ url: app.globalData.apiurl + '/api/NoUploadBackBill', data: { mobile: app.globalData.phone, }, header: { 'content-type': 'application/json', // 默认值 'Authorization': "BasicAuth " + util.getToken() }, success(res) { console.log(res.data.length); } }) }, 2. 小程序中循环遍历(即列表渲染)

我的需求是显示返回的列表数据，页面需要分条显示。通常是要用js遍历，但在小程序里面，只需要返回数据集，在wxml页面用wx:for绑定数组即可显示。如下图所示，使用wx:for后没有提供wx:key会报一个warning，在这小节后面第一个链接是官方的文档，里面有提到【如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。】

wxml页面： <view wx:for="{{newBillList}}" wx:key="*this"></view>

该数组要在js文件的data内声明。

js文件： 声明： data: { newBillList: [], //要显示的列表以及搜索操作后的列表 }, 赋值： loadList: function(e) { //发起请求，根据手机号加载未上传回单 wx.request({ url: app.globalData.apiurl + '/api/NoUploadBackBill/Loading', data: { mobile: app.globalData.phone, }, header: { 'content-type': 'application/json', // 默认值 }, success: res => { if (res.data.length > 0) { var list = []; for (var i = 0; i < res.data.length; i++) { res.data[i].ImageList = []; list.push(res.data[i]); } this.setData({ billList: list, **newBillList: list** }); } }, fail(res) { console.log("loadList fail:" + res.data); } }) }

小程序-视图层-WXML-列表渲染

小程序for循环

3. 小程序js传递多个参数

小程序的js里面和通用的js传参一样，通过全局变量传递，或函数参数传递。

//调用处理列表图片的方法 this.addImageList(1, 0); //重新处理数据，把图片列表加入 addImageList: function (type, count) {} 4. this.setData is not a function

在微信小程序中，一般通过this.setData来修改值。比如在函数里面修改数据，如下代码段所示：search要在data内初始化

searchinput: function (e) {//查询输入框赋值 this.setData({ search: e.detail.value }) }

但是，当通过wx.request请求数据成功后绑定数据却出现this.setData is not a function的错误。

//发起请求，根据手机号加载未上传回单 wx.request({ url: app.globalData.apiurl + '/api/NoUploadBackBill', data: { mobile: app.globalData.phone, }, header: { 'content-type': 'application/json', // 默认值 }, success(res) { console.log(res.data); if(res.data.length>0){ this.setData({ billList: res.data }); } },fail(res){ console.log("fail"+res); } })

为什么会出现这个error呢，我当时百思不得其解，也没有想到作用域这一层，是查找资料才解决该问题。

原因是因为：因为this作用域指向问题 ，success函数实际是一个闭包 ， 无法直接通过this来setData。

第一种方法： var that=this; this.setData({billList:res.Data}); 第二种方法： success:res=>{ this.setData({billList:res.data}) }

具体原因要参考这个链接

参考资料：微信小程序中this指向作用域问题this.setData is not a function报错

5. 小程序点击控件隐藏一个View，显示另一个View

隐藏和显示，一定明白是用样式控制了。而且是在JS控制样式，代码段如下：

wxml页面： <view wx:for="{{billList}}" wx:key="*this" > /** * 页面的初始数据 */ data: { **billdisplay**:'block',//回单列表是否显示 **searchdisplay**:'none'//查询列表是否显示 }, searchList:function(e){//搜索事件 var _this=this; //设置首次加载的回单列表隐藏，显示查询的列表 _this.setData({ billdisplay:'none', searchdisplay:'block' }); }