小程序开发点滴记录

1、微信小程序中列表item点击之后的响应

昨天一直在纠结微信小程序中列表页点击之后的响应,按照传统的思想,绑定的是同一个函数,点击之后用this就可以知道具体点击了哪个item,但是微信小程序不能操作dom,昨天纠结了一下,今天上班看了一下官方文档,点击事件对象里面有个target属性,target的dataset可以自己获取到自己设置的“data-”的值,所以在渲染的数据里面加上了mark,在点击的时候获取“data-”的值,跟数据列表做对比,匹配的就是相应的item数据,做相应的修改就可以了。百度无果,还是多看官方文档啊,很多问题其实官方文档里面找得到线索的。

2、小程序循环列表的数据修改

小程序的setData方法可以对data对象中的数据进行修改,但是如果在for循环里面要对匹配的数据进行修改就比较蛋疼了,setData方法是支持key用字符串进行设置值的,但是不能放变量。于是我用了曲线救国的方法,将要修改的数据对象放到data对象外声明,然后操作这个对象的时候就不用setData方法了,数据修改完成之后在进行setData操作,这时候是将整个对象进行更新操作,所以就不存在key中有变量的情况了。

刚开始写数据驱动,真心不习惯,慢慢学习吧,加油!


<---------------------------------------------------------------------->

华丽的分割线

后来查看别人的程序,发现其实只要设置一个data-index,将循环时的index设置进去,然后点击的时候,拿到index,修改对应index的数组的数据再setData就可以了,不用做数据比较,节省运算量。

let index = e.currentTarget.dataset.index;
arr[index].isActive = true;
this.setData({
 arr: arr
})

3、text组件
在web开发中,编写span的内容的时候,在编辑器里面换行是不会影响正常的显示,顶多多一点空格,小程序则不同,如果在编写的过程中对text组件有换行的操作,会在页面完完全全地显示出来,找了挺久的,以为小程序里面的text组件的display也是block,找了很久,去掉换行才找到原因。

<text>1111
222
</text>

以上的代码,显示出来的结果是:
1111
222

如果换成以下的写法就不会换行了
<text>1111222</text>
显示结果是:1111222

4、小程序底部tabBar图标大小
小程序在app.json中可以配置底部的tabBar栏的图标跟文字,官方推荐图标大小为81x81,没有宽高的配置项。
前几天开发的时候想着好像大部分的图标大小都是这么大,官方也是这么规定的,自己的小程序底部的图标显得大就没理了,可是翻看了几个小程序之后,发现有的大有的小,但是官方又没有配置项,我心里在想,到底是怎么做到的呢。突然灵光乍现,可以把图标的规格定为81x81,然后留有一定的边距,让图标的内容部分缩小显示在正中间,就可以达到自己控制图标大小的目的了。如下图:



5、微信开发者工具获取座标的问题
微信开发者工具用了很久,每次获取座标都是0,不知道怎么模拟座标进去,每次在代码里改又很挫,找啊找,后来就忘记去改了,今天找了一下设置,设置成功了,之前貌似设置的地方不对,说一下设置方法:
一、在开发者工具右侧找到Sensor,选中

二、在Latitude跟Longitude填入模拟的值就可以了。


6、今天在不同页面传值时,使用了全局对象进行传值,由于不想对对象的属性进行遍历,就直接将后台返回的数据直接传给全局对象的一个属性,然后再对属性内的数据进行遍历处理,这么做相当于浅拷贝,修改数组的内容的时候,原先的数组内容也发生了变化,这就导致,如果第二次打开相同的页面,数组遍历部分会出错,找了好几个方法,最后有一个最便捷的。就是使用JSON将对象转换为字符串,然后再将转化后的字符串转换为对象,这样就相当于深拷贝了。
首先:data = JSON.stringify(globalData);
然后:data = JSON.parse(data);
就完成深拷贝了。

7、小程序引用文件:include和import
import wxml文件这个没什么好说的,按照官方的写就行了 。
include wxml文件的时候,要注意不要保留template标签,同时,可以在要引入的文件里面import其他wxml文件。

8、小程序页面间的通讯
有个需求,列表页每项都有显示人数,进入详情页处理之后回来页面对应项的人数要+1,刚开始想到的方法是返回的时候调用声明周期的onShow方法,进行页面刷新,但是这个方法很挫,如果我看到列表页的最后一个数据,进去详情页,返回却回到列表页的第一个,就很不科学了,于是找啊找啊,找到一个不错的库,github地址:https://github.com/binnng/broadcast.js
在列表页和详情页引入broadcast的包,在列表页注册函数:broadcast.on('fn_name',data => {//处理}),在详情页需要的地方写上broadcast.fire('fn_name',{//id:id}),这样操作的时候,就可以只修改列表页对应的数据了,没必要全部刷新。
这么做有个bug,如果详情页可以分享,会报错,原因是fn_name还没注册,所以需要在app.js的onLaunch的时候,把对应的函数名注册上,这时候就可以解决这个问题了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章