精品demo探趣实战教程：微信小程序初体验与DEMO分享
前言
前一段时间微信公布小程序，瞬间引来了大量的关注。博主的公司也将其定为目标之一，遂派本菜为先头兵（踩坑侠）。
这次开发了一个比较完整的DEMO，模仿自某个APP首页，由于保护隐私的目的我把数据拷贝出来而不是通过接口的方式访问，请求接口的方法我会在后面详细说明。
废话不多说，先上原码：https://github.com/Darylxyx/wx-app/tree/master/tanqu-wx。有兴趣的朋友可以下一个IDE导入项目玩玩。
本站地址：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=620
文档地址：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html。
IDE下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=20161107
百家之长
在看完微信小程序开发文档，下载专用IDE进行开发后，如果用一个词形容小程序，那就是集百家之长。
下面我们大概扯下有哪些比较先进的技术被用于其中。
模板语法
数据绑定
<view>{{message}}</view>
Page({
data: {
message: 'Hello MINA'
}
});
小程序的模板语法与Vue.js十分相似，甚至很多语法只是前缀更改了。
条件渲染
<!--Vue.js-->
<div v-if="ok">Yes</div>
<div v-else>No</div>
<!--小程序-->
<view wx:if="{{ok}}">Yes</view>
<view wx:else>No</view>
列表渲染
<!--Vue.js-->
<div v-for="item in array">
{{ item.message }}
</div>
<!--小程序-->
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
可以看出小程序在模板语法方面不知道是不是借鉴Vue.js（不了解不敢乱说），但总的来说这种Angular、Vue之类的双向数据绑定方式开发起来还是非常方便快捷的。不像React单向数据流的方式，需要将数据绑定于状态机中，学习成本略高。
不同的是，小程序中没有用 html，页面文件后缀为 .wxml（不是w-xml，是wx-ml）。所以内部使用的不是传统 html 标签，而是封装好的组件。
注意，在小程序中是没有 window 和 document 对象的。
模块化
工程目录
不像一般web项目需要自己规划目录，小程序通过IDE可以快速生成一个基本的项目结构。根目录的 pages 下每一个文件夹代表一个页面，其中的 wxml 文件会自动加载同级目录下的 wxss（css）和 js 文件。
wxml模块化
wxml 可以将通用的模板（template）单独保存，在需要的地方引用。
<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template>
<!-- index.wxml -->
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
wxss模块化
wxss 可以实现 css 预编译工具那样的模块化引用。
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
布局
如果有人做过混合开发应用（hybrid）的项目，比如 AppCan 或者 ReactNative 就会知道，这些工具会支持一种很强大但在浏览器环境兼容不太好的布局方式——弹性盒模型。
微信小程序不出意料地支持了这种布局方式，大大提高了布局效率，并且让2016年的web开发人员不再为各种场景下的垂直居中浪费时间。
各屏幕适配
在阅读文档时，看到的最大的惊喜就是微信小程序有自己独特的尺寸单位——rpx。
用法就是当设计给出750像素的设计稿时，你只需要把设计稿里每个元素尺寸单位改成rpx，就可以适应所有的手机屏幕了，不需要为了适应屏幕进行一定的百分比计算。
这简直是吊炸天的存在！遗憾的是在博主测试的时候该单位并未生效，不过相信很快会修复这个问题的。退一步可以使用 rem 作为单位。
发起请求
在小程序里并不是通过 Ajax 发起请求的，而是通过 wx.request API 来发请求，传递参数方式与 jq ajax 类似，同时也没有跨域的烦恼。
要注意的是，访问的接口需要提前进入小程序后台，以管理员身份设置“开发设置”，配置“request合法哉名”。否则会报“接口不在合法列表里”的错误。
目前只能配置一个请求域名，且一个月内只能修改3次。
其他
· 小程序拥有自己的动画API，同时也支持传统的CSS3动画，性能上的对比有兴趣的朋友可以自己试验下。
· 小程序有诸如：录音、重力感应、罗盘等原生应用上才能实现的功能API。
· 小程序中有列表上下滑动的组件（scroll-view），也有支持滑块左右滑动的组件（swiper），但如果需求要求你支持二者，那么嵌套这两个组件会出现很明显的卡顿。
· 通过这次的DEMO制作，发现性能方面，尤其是动画，比原生应用还是有一定差距，页面元素越多越明显，感觉不适合做太复杂的应用。
感谢你的浏览，希望能有所帮助
