post.wxml文件：
post.wxss文件：
运行结果：
json配置文件的官方参考文档：
<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html">https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html</a>
注：除了app.json之外的json文件都只能配置window属性，由于只能配置window属性所以就不需要显式标明了，直接设置window中的属性+值即可。
构建一个简单的新闻列表示例：
post.json文件：
小程序中的js文件结构与我们平时在web前端开发中的js文件有些差别，在小程序中需要把变量、函数等代码写到Page( )里。有点像json注册信息一样，在格式上也有点像，以下是小程序工具自动生成的js文件代码：
从以上生成的代码可以看到，所有的函数都写在Page里，而且如果js文件中没有这个Page就会报错，所以即便不写代码也要写个空Page在那。
官方给出的关于page页面生命周期的文档：
<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html">https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html</a>
在实际开发中，我们的数据都是需要临时从服务器上download下来的，例如在web开发中我们都是通过JavaScript脚本代码去请求服务器，得到服务器返回的数据然后将其在页面上显示出来，在小程序中也是如此。
在小程序中获取脚本文件的数据是通过数据绑定的机制来获取的，不需要像web中那样通过getElementById函数来获得元素对象，然后再设置到元素上，例如：
然后在wxml中通过两个大括号就可以获得值了：
注：在小程序中，这种数据绑定是单向的。
现在我们就可以把数据都转移到js文件中，然后通过数据绑定机制来在xwml中获得数据：
post.js代码：
post.wxml代码：
从以上两个对应的代码片段可以看到，数据绑定机制的方便之处。
注意：我们都知道在一些标签的属性上需要提供布尔类型的值，例如，之前提到过swiper的vertical属性，但是有时候会遇到明明给的值是false，却依旧还是垂直滚动，这是因为给的并不是布尔值，而是一个false字符串，在小程序中只要字符串不为空都会被认为是true，解决这种问题就需要使用数据绑定的语法来设定值：
关于嵌套数据的拿值方式：
在设置数据属性的时候可以把一组同类的数据都设置在一个数据里形成一个数组形式，例如我把设置照片路径数据的属性都统一写在img属性里：
拿值的时候通过访问符 . 来访问就可以了， 例如：父属性.子属性 就可以了：
控制一个标签显示/隐藏的语法：
小程序里有一个语法可以控制标签的显示或隐藏：
使用数据绑定机制：
运算：
在两个大括号中可以进行一些简单的运算，例如：数值型的数据可以进行算术运算，字符串则可以进行字符串连接运算等。
简单的加法运算示例：
以下是官方的参考文档：
<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/data.html">https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/data.html</a>
以上我们虽然通过数据绑定解决了动态加载服务器数据的问题，但是还有一个问题就是组件代码重复太多，因为上线使用后不可能只有两篇文章，会有很多篇文章。如果每一篇文章都得重复的去拷贝相同的代码就有点麻烦了，所以我们还需要解决这个代码重复的问题——使用for循环：
1.首先将js文件中的数据整合成一个数组：
2.使用for循环来进行数据绑定：
注：wx:for-item和wx:for-index不设置也可以，因为默认值就是item和index，直接用就可以了。
可以看到以上示例使用循环后就减少了很多重复性的代码。
到目前为止，我们就编写好了两个页面——启动页面和新闻列表页面，现在我们需要通过小程序的事件机制，让我们点击启动页面的时候，就能够进入到新闻列表页面。
以下是官方给出的事件使用文档：
<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html">https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html</a>
我们需要用到的事件是 tap ，这个事件相当于html中的click事件。小程序中有个规定，需要在事件名称前加上bind或者catch。例如我要使用tap事件，那么就需要在前面加上bind或者catch，结合起来就是bindtap或catchtap。
示例：
welcome.wxml文件代码：
welcome.js文件代码：
编写完以上代码后，就可以点击启动页中的view组件跳转到新闻列表页面了。
redirectTo方法是重定向方式的跳转，这种方式的跳转是完全跳转到另一个页面中，由于重定向跳转会卸载掉当前页面，这个过程会触发Page生命周期中的Unload事件。示例：
从运行结果可以看到，没有返回上一级页面的按钮
控制台打印结果：
unloading this page
另一种跳转方式是使用navigateTo方法进行跳转，这个方法只会导航到另一个页面，当前页面只是隐藏掉，所以跳转之后还可以返回上一级页面，同样的这个过程也会触发相应的事件，这个事件就是onHide事件。示例：
hideing this page
以上演示的navigateTo方法只是部分结构，完整的结构如下：
注：redirectTo方法也是一样的，完整结构也是会有三个回调函数。
冒泡事件与非冒泡事件的区别：
冒泡事件就是当父节点和子节点都有监听事件时，触发子节点的事件也会一并触发父节点的事件。但是触发父节点的事件并不会触发子节点的事件，这种机制就是冒泡事件，示例：
wxml代码：
js代码：
触发子节点的事件后控制台的打印结果：
excute onSubTap excute onContainerTap
触发父节点的事件后控制台的打印结果：
非冒泡事件则是反之，触发子节点的事件并不会触发父节点的事件。
在小程序中，我们可以阻止事件的冒泡，让原本有冒泡性质的事件指定为非冒泡性质，方法也很简单，就是把bind改为catch即可，示例：
js代码不变，触发子节点的事件后控制台的打印结果：
注：在小程序中，绝大多数的事件都是冒泡事件。
本文转自 ZeroOne01 51CTO博客，原文链接：http://blog.51cto.com/zero01/2058435，如需转载请自行联系原作者