这篇博客记录学习开发微信小程序时遇到的问题。此次学习开发的是一个功能小程序,提供电影信息模块及文章阅读模块。下面简单说下概况以及开发过程中遇到的问题。在以后开发新的项目时会持续更新,想做点有自己想法的东西。

概况

小程序啊

截止写这篇博客,此学习项目算是结束了,小程序是个及其容易上手的新东西。如小程序开发者文档中所说:

小程序提供了丰富的基础组件给开发者,开发者可以像搭积木一样,组合各种组件拼合成自己的小程序。

确实如此,我们不需要像开发web页面一样,使用各种标签来实现我们自己的组件,我们只需要想搭积木似的,即可完成基本的页面。当然你得会一点CSS和JS。另外,我们更改页面数据,不再需要像jquery那样先获取dom再去修改,小程序借鉴了AngularJs等数据驱动的框架,页面通过数据驱动再真正实现了MV分离。本来想介绍下小程序一个页面包含哪些文件,每个文件的作用等等,后来发现还不如去看小程序的官方文档,就罢了。

但个人觉得理解小程序应当就把它当作一个原生的App,只是它的操作系统是微信。如同安卓一样,页面的组件需要配置在xml里面,只是在小程序里面组件的样式(wxss)与组件的定义(wxml)是分离的.同样,安卓程序里面每个页面称为activity,在小程序里面则被称为Page(这个可能更好理解),有页面则肯定需要页面的跳转,安卓使用趋势,小程序则使用路由。当然,小程序还有自己的生命周期,知道的生命周期才知道什么时候该做什么样的事。对比看来,是很好理解的,带着开发原生app的思想用开发web的方法去开发小程序。

小程序还在成长阶段,它的思想是很好的,如张小龙所说好的程序是用完即走的,那么微信小程序是个好的产品,微信不是。我还喜欢它的slogan,”再小的个体,也有自己的品牌”,这个真是无法抗拒。于是,以今天这个项目作为入门,鉴于思想,一起成长。

入门

下面说说这个学习项目的概况。电影信息主要展示从豆瓣获取的数据,包含正在热映、即将上映和豆瓣Top250模块,可查看电影的基本信息;文章阅读提供文章列表以及查看详情,由于小程序中没有DOM,因此不能够像web那样可以定义好样式,将标签等信息直接存入数据库,另外小程序虽现在支持web-view,但没有对个人开发者开放,因此也不能够直接跳转到我的博客地址。于是,目前界面渲染的数据,都不是从数据库中获取,是将数据写入某个js中,假装作为本地数据库,所以看到的都是假的,只是实现了页面功能,另外还加了个音乐播放。

Q&A and Tips

Q&A

Q1:编写完app.json配置后(页面注册)编译出现脚本错误或者未正确调用 Page()
A1:新编写的页面中没有自动生成内容,需要添加Page({}),否则会报错,同样的问题还出现在json文件中,如果json文件为空,应当填入{},在目前的开发工具中已经会提示哪里错了

Q2:控制台出现Now you can provide attr "wx:key" for a "wx:for" to improve performance.警告,警告不处理不影响程序运行,但看着就很奇怪
A2:在wx:for后面添加wx:key="key"wx:for-index='idx'可消除警告

当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。–开发者文档

tips

tip1:标签中若有bool类型,都应该采用数据绑定,如`vertical="{{false}}"`若使用vertical="false",小程序仍会解析成true

tip2:使用`wx:if={{condition}`来控制组件显隐(wx:elif wx:else

tips3:小程序中绑定事件使用bind或catch,如catchtap='onItemTap',其中bind为冒泡事件,catch为非冒泡事件

tips4:使用require引入js,需将当前js导出为模块`module.exports = {}`(这个如同AMD)

tip5:require引入js只能使用相对路径,这个不知后期会不会有更改

tip6:小程序总是会读取data对象下面的属性值来做数据绑定,这个动作执行是在onLoad事件执行之后发生的

tip7:像template的传入数据时,在数据前加…(扩展运算符…)可平铺对象,可直接使用对象的属性,而不用那对象进行点,如:`{{item}}`则使用item.title,`{{…item}}`则直接使用title

tip8:data-xxx 称为自定义属性,必须用data-开头,后面跟自定义名称,在js中获取时,如点击事件则使用event.currentTarget.dataset.data-xxx获取。当data后的自定义名称为驼峰式时,会被全部转换成小写,当采用连字符时将被转换成驼峰式,如:data-postId转换为postid, data-post-id转换为postId

tip9:小程序缓存的上限最大不能超过10兆

tip10:点击事件event对象下:target:指的是当前点击的组件,currentTarget指的是事件捕获的组件(处理冒泡事件是很有帮助)

tip11:使用上滑加载更多应当使用scroll-view,还要给scroll-view一个高度才能触底加载更多,小程序中没有dom,应当采用更新数据模型来渲染页面,将新获得的数据追加到数据模型中进行数据驱动。

tip12:小程序从版本130400之后下拉刷新和scroll-view不可以同时使用,导致onPullDownRefresh事件函数无法执行的原因是页面里包含一个scroll-view组件。而scroll-view组件和onPullDownRefresh在130400版本里是冲突的。当我们在页面里滑动scroll-view时,只是滑动这个组件,不再可以触发onPullDownRefresh。因此换一种方法,放弃使用scroll-view,MINA在Page里还提供了一个onReachBottom事件,使用这个事件来监听页面上滑到底。将scroll-view组件换成view组件,并去掉了scroll-view组件原有的属性以及绑定事件,在js里提供onReachBottom,方法体与之前绑定的事件相同。
但更改后出现一个问题,上滑刷新时没有之前使用scroll-view顺滑,因此个人认为页面没有强下拉刷新需求时,可考虑去除这个功能。

tip13:input事件bindblur只可监听失焦,bindchange可监听失焦和键盘确定(回车,bindconfirm可监听键盘确定(回车)


编辑与2018.2.4 17:00 初稿