精品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制作，發現性能方面，尤其是動畫，比原生應用還是有一定差距，頁面元素越多越明顯，感覺不適合做太復雜的應用。
感謝你的瀏覽，希望能有所幫助
