微信小程序开发遇到的问题
这篇博客记录学习开发微信小程序时遇到的问题。此次学习开发的是一个功能小程序，提供电影信息模块及文章阅读模块。下面简单说下概况以及开发过程中遇到的问题。在以后开发新的项目时会持续更新，想做点有自己想法的东西。
概况
小程序啊
截止写这篇博客，此学习项目算是结束了，小程序是个及其容易上手的新东西。如小程序开发者文档中所说：
小程序提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼合成自己的小程序。
确实如此，我们不需要像开发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 初稿