本站地址：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

百家之長

在看完微信小程序開發(fā)文檔，下載專用IDE進(jìn)行開發(fā)后，如果用一個(gè)詞形容小程序，那就是集百家之長。

下面我們大概扯下有哪些比較先進(jìn)的技術(shù)被用于其中。

模板語法

數(shù)據(jù)綁定

<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之類的雙向數(shù)據(jù)綁定方式開發(fā)起來還是非常方便快捷的。不像React單向數(shù)據(jù)流的方式，需要將數(shù)據(jù)綁定于狀態(tài)機(jī)中，學(xué)習(xí)成本略高。

不同的是，小程序中沒有用 html，頁面文件后綴為 .wxml（不是w-xml，是wx-ml）。所以內(nèi)部使用的不是傳統(tǒng) html 標(biāo)簽，而是封裝好的組件。

注意，在小程序中是沒有 window 和 document 對(duì)象的。

模塊化

工程目錄

不像一般web項(xiàng)目需要自己規(guī)劃目錄，小程序通過IDE可以快速生成一個(gè)基本的項(xiàng)目結(jié)構(gòu)。根目錄的 pages 下每一個(gè)文件夾代表一個(gè)頁面，其中的 wxml 文件會(huì)自動(dòng)加載同級(jí)目錄下的 wxss（css）和 js 文件。

wxml模塊化

wxml 可以將通用的模板（template）單獨(dú)保存，在需要的地方引用。

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

<!-- index.wxml -->
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

wxss模塊化

wxss 可以實(shí)現(xiàn) css 預(yù)編譯工具那樣的模塊化引用。

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

布局

如果有人做過混合開發(fā)應(yīng)用（hybrid）的項(xiàng)目，比如 AppCan 或者 ReactNative 就會(huì)知道，這些工具會(huì)支持一種很強(qiáng)大但在瀏覽器環(huán)境兼容不太好的布局方式——彈性盒模型。

微信小程序不出意料地支持了這種布局方式，大大提高了布局效率，并且讓2016年的web開發(fā)人員不再為各種場(chǎng)景下的垂直居中浪費(fèi)時(shí)間。

各屏幕適配

在閱讀文檔時(shí)，看到的最大的驚喜就是微信小程序有自己獨(dú)特的尺寸單位——rpx。

用法就是當(dāng)設(shè)計(jì)給出750像素的設(shè)計(jì)稿時(shí)，你只需要把設(shè)計(jì)稿里每個(gè)元素尺寸單位改成rpx，就可以適應(yīng)所有的手機(jī)屏幕了，不需要為了適應(yīng)屏幕進(jìn)行一定的百分比計(jì)算。

這簡(jiǎn)直是吊炸天的存在！遺憾的是在博主測(cè)試的時(shí)候該單位并未生效，不過相信很快會(huì)修復(fù)這個(gè)問題的。退一步可以使用 rem 作為單位。

發(fā)起請(qǐng)求

在小程序里并不是通過 Ajax 發(fā)起請(qǐng)求的，而是通過 wx.request API 來發(fā)請(qǐng)求，傳遞參數(shù)方式與 jq ajax 類似，同時(shí)也沒有跨域的煩惱。

要注意的是，訪問的接口需要提前進(jìn)入小程序后臺(tái)，以管理員身份設(shè)置“開發(fā)設(shè)置”，配置“request合法哉名”。否則會(huì)報(bào)“接口不在合法列表里”的錯(cuò)誤。

目前只能配置一個(gè)請(qǐng)求域名，且一個(gè)月內(nèi)只能修改3次。

其他

· 小程序擁有自己的動(dòng)畫API，同時(shí)也支持傳統(tǒng)的CSS3動(dòng)畫，性能上的對(duì)比有興趣的朋友可以自己試驗(yàn)下。

· 小程序有諸如：錄音、重力感應(yīng)、羅盤等原生應(yīng)用上才能實(shí)現(xiàn)的功能API。

· 小程序中有列表上下滑動(dòng)的組件（scroll-view），也有支持滑塊左右滑動(dòng)的組件（swiper），但如果需求要求你支持二者，那么嵌套這兩個(gè)組件會(huì)出現(xiàn)很明顯的卡頓。

· 通過這次的DEMO制作，發(fā)現(xiàn)性能方面，尤其是動(dòng)畫，比原生應(yīng)用還是有一定差距，頁面元素越多越明顯，感覺不適合做太復(fù)雜的應(yīng)用。

感謝你的瀏覽，希望能有所幫助