一些在开发微信小程序中常见的问题
-
页面渲染
微信小程序中规定所有页面上渲染出来的数据,包括文字和图片皆包含在在每个页面文件夹中的js文件中的page这个内置函数的参数data中,page({data:{,}}),其实这个page的data感觉就是一个前端可以指定后台对象的一个快捷的方式,在wxml文件中可以用{{}}直接在页面展示page中的对象或数据,这就是说这个page是前端和你的代码唯一的渲染方式,官方文档中有明确的说明,如果想要更改page中的任何一个变量或者json对象,必须要用,this.setData({name:value})这种方式,也就是说类似与key value的 重新设定value值。所以,在你代码中处理了数据,在结尾一定要setData一下你page中要展示的数据,页面上才会改变,这个setData的作用像是告诉页面,page中data的某个对象或者变量被更新了。这一点要切记。
容易出现的问题
1.将page的中的某个变量 a=8;在代码中,var b=this.data.a,然后操作b,但是页面只会渲染a,你所有在代码中var的 与页面均无关,所以在确定处理过b的值后,一定要setData({ a=b});这样a才会改变。
2.page中有某个json数组:list:[1,2,3];代码中,var arr=this.data.list, 然后 arr.push(4),结果发现,page中的list确实是[1,2,3,4],但是页面上只是显示[1,2,3]
下面是问题2的实例:
js文件中page中data中的数组array
wxml中页面的渲染列表
js中的自定义方法
页面上按钮绑定anyx方法
结果
后台:
我们看到了,后台的你在后台放入一个4进入了that.data.array这个数组中,但是页面渲染出来的还是[1,2,3],所以必须将这个var arraynow=that.data.array这个数组,setData({ array:arraynow}),这样才能展示最新的
改写代码为
结果是,每次都向数组添加一个length+1的数字
后台:
-
并发请求
微信小程序的官方文档中明确的说明,每个小程序的并发请求的上限为5,而且小程序的本地数据为10M,在wx.storage中,因为小程序没有数据库所以必须要用到接口去服务器拿数据。
所以如果没有自己的服务器去处理数据单独为小程序准备数据的包,那么将会很麻烦,假如现在有3种数据,A,B,C ,每种有将近1500条,而收费接口(不是你自己的服务器提供的接口)如果每次request只给你返回80条,就意味着所有的数据你发送50多次请求才能都拿完,并且这些请求不能并发超过5,这要看接口速度和小程序的运行速度,这个数据是我开发项目当中的数量级,大概如果每拿到80条成功后再下一次这样拿,需要大概20多秒,才能完成。这当然是行不通的。
所以可以想到用3个request递归方式去拿,但是遗憾的是那也是相当慢的,也需要14秒左右,所以答案只能是,将数据在自己的服务器打成大包一次性的给小程序,让时间用在处理数据上,而不是重复的发送请求。
-
接口的规定
由于是第一次开发微信的小程序,对于接口以为只要随便能拿到数据,但是遗憾的是,接口必须要安全具有SSL证书的可以https访问的数据接口,而我所用的付费接口只支持http访问,所以悲剧的是,在接口这块又不得不用自己的服务器转一次,而且通过这个还检测出了我的服务器的ssl证书链不完整,所以如果想开发微信小程序的朋友,请一定先准备好https的数据接口,加上处理好的打包数据,再开始写小程序的逻辑。
-
小程序的搜索
开发项目的时候,涉及到一个搜索的问题,很多现在搜索都是时时,只要搜索框中的value 一改变,就执行一次搜索数据,介于前面频繁请求导致时间长的问题考虑,最好把需要搜索的集合尽量下载到小程序的10M的Storage存储中,我之前拿的将近4500条数据,就是搜索的列表,这里又碰到了问题,搜索切记不要像写demo那样用for遍历,如果是在你的开发工具当中,你觉得体验还算可以,但是要考虑到这是多次触发的搜索,只要我删除一个字符或者增加一个字符,就会触发,所以搜索的算法还是建议用一些优秀的,将数据在服务器进行排序处理后,再一次性打包给小程序,然后在小程序这边进行二分法搜索,至于二分法是什么请自行了解,这里不介绍。