小程序开发技巧总结 (2)

后记：当时因为想法不完整，所以把显示数据列表用两个View表示，用样式控制，但其实这两个View显示的内容是一样的。后来通过初始化两个数组，一个显示查询后的列表，一个是原始数据的列表，用两个数组通过在使用中重新push数据，这样解决了用两个view处理的冗余办法。这个做法在第12点。

6. 小程序里push的用法

在小程序里面，在data里初始化的变量是无法直接push的。要在使用的时候另外声明变量，push，最后再赋值。如下代码段加粗部分（即有**的部分）:

//重新处理数据，把图片列表加入 addImageList: function (type, count) { var that = this; **var listArr = [];//声明一个可操作变量数组** for (let i = 0; i < this.data.newBillList.length; i++) { if (this.data.shipmentid == this.data.newBillList[i].ShipmetId) { //累加上传的回单 var cnt = this.data.newBillList[i].DocumentsCnt; count=count+cnt; let row = { ShipmetId: this.data.newBillList[i].ShipmetId, EarliestPickTime: this.data.newBillList[i].EarliestPickTime, FromAddress: this.data.newBillList[i].FromAddress, ToAddress: this.data.newBillList[i].ToAddress, DriverName: this.data.newBillList[i].DriverName, LicenseNumber: this.data.newBillList[i].LicenseNumber, DocumentsCnt: type == 1 ? this.data.newBillList[i].DocumentsCnt : count, ImageList:this.data.imageListArr } **listArr.push(row);** } else { let row = this.data.newBillList[i]; **listArr.push(row);** } } //赋值 that.setData({ //显示列表 **newBillList: listArr** }); },

参考资料
小程序push数组报错解决办法

7. 小程序获取view的ID wxml页面： <button catchtap="removeImg" type="default" data-shipmentid="{{item.ShipmetId}}">移除</button> js页面： //直接获取ID var viewId = e.target.id; console.log(viewId); //获取data-shipmentid var shipmentid=e.target.dataset.shipmentid; console.log(shipmentid);

本来想贴一下官方的api有关e.target以及e.current.target的资料，但是忽然搜索不出来.....

8. 字符串拼接值（官方叫字符串运算）

这里比较简单，又易理解，直接贴官方的代码

<view>{{"hello" + name}}</view> Page({ data:{ name: 'MINA' } }) 9. 引入util.js出错

如上图所示，我当前开发中的文件目录如下:
pages/business/nouploadbackbill/nouploadbackbill,
我在js文件中引用util.js的时候，我以为可以这样的:

const util = require('../../utils/util.js')

但是，实际上似乎要根据当前开发文件的目录结构引用

//引用 const util = require('../../../utils/util.js')

不知道是不是这样理解，如有误导或错误请指正批评~

10. 小程序remove元素

没有remove，没法remove，只能通过操作数组处理。代码段参考第6点以及第12点

11. 小程序获取上级元素

当时的问题是这样的，因为有一个view有id，然后view里有一个button，这个button事件需要取到view的id进行移除操作，需要标识是移除哪一个view。
但是后现发现，view可以不用给id属性，button可以直接给id属性，直接用它自己的id值判断就可以操作。
代码参考第7点。

12. 小程序所有页面路径都要放在app.json

当时我以前在app.json文件配置的都是主页。主页里面跳转的页面不必配置。直到报错才知道所有页面都要放在app.json里面配置。不然运行的时候会报not in app.json。如下图所示：

13. 小程序操作动态循环的数据

因为显示列表里面还有一个图片列表的数组，该列表有一个上传图片和移除图片操作，上传图片就把图片push到这个图片数组，然后重新push列表显示，移除也一样，把要移除的图片从列表里排除，重新push列表显示。

以下这段代码非常重要！因为正是看到了以下这段代码，我遇到的难题得以解决，感恩遇见~，哈哈~

由于这个链接是在小程序社区看到的，所以两个链接都贴出来，参考链接如下：

for (var i = 0; i < this.data.newBillList.length; i++) { if (e.target.dataset.id == this.data.newBillList[i].shipmentid) { newBillList[i] = { id: this.data.newBillList[i].id, price: this.data.newBillList[i], one2one: this.data.newBillList[i], } } else { txtArray1[i] = { id: this.data.liuliangItems[i].id, changeColor: false, price: this.data.liuliangItems[i].price, name: this.data.liuliangItems[i].name, one2one: this.data.liuliangItems[i].one2one } } }

小技巧系列

微信小程序点击button或view后选中其它反选