微信小程序是一個介於原生app和H5之間的一個東東。如果用過cordova,Hbuiler,appCan之類的開發過混合式app,那么微信小程序可能與這種方式更為接近。不過微信小程序是依賴微信開發平台的，甚至連IDE都是專用的，做出來的成品，也只能在微信中通過搜索或掃碼找到入口，然后進行訪問。這些天一直在嘗試用微信小程序來改寫原來的H5項目。有一些小小的心得，怕過久了會忘記，於是就寫下來，當作一個備忘隸，也給正好給想要學習微信小程序的同學分享一下。
微信小程序是國產的，不用擔心文檔看不懂，也不用擔心網絡被牆，這一點很方便。官方的起步教程寫的很簡單，直接給鏈接 。 如果你之前沒有接觸過微信小程序，那么可以跟着我的步驟一起來。
首先是下載開發工具，磨刀不誤砍材工。點此下載 這是一個針對微信小程序開發的IDE工具，集預覽，打包發布，調試，語法提示於一身，僅管如此，我還是不太習慣，我習慣是在sublime中進行代碼的編輯，只是用它進行代碼的調試。
安裝挺簡單，就不多說了。雙擊打開它，如果提示要掃碼登陸，則通過微信掃一掃進行授權，然后就可以進行下面的操作了。
我現在只想體驗一下，點擊 `無APP` ， 項目名稱自己根據實際需要真寫，目錄選一個空目錄就好了。點擊添加項目，完成效果如下：
點擊編輯，左側是目錄結構，中間是預覽效果，右則是控制台。
如果鈎選了就會生成示例代碼，則目錄下面有三個app開頭的文件及pages,utils兩個目錄，關於整個目錄結構，請參考官方關於框架介紹部分，下面是需要搞明白的一些知識點：
.js是小程序的腳本代碼，.wxss是樣式，.json是配置信息。每新增一個頁面，就要在app.json的page項中進行新增一條配置。如增加一個“關於我們”：
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/about/about" //添加關於我們
],
保存之后，自動會生成必要的文件和目錄，接下來，就是根據自己的業務進行相應的修改。注意，在微信小程序中，不能再用jQuery/zetpo這類工具了。因為微信小程序中沒有window
對於自己創建的頁面，都以Page({})開始，如果用過Vue的話，就想象成new Vue({}) 的調用方式。微信小程序的語法和思想和Vue像極了,說不定是參考它的方式也是可能的。
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
onLoad: function () {
//初始化
}
})
微信小程序的頁面部分，是以.wxml結尾的，當成.html就好，只是它的語法，是類似於xml結構的，標簽要自閉合，如<input />。小程序中，把有着固定用法的標簽，叫作組件，如<view>視圖容器組件，<swiper>滑塊組件，<icon>圖標組件，如果用過React，那么就會有似曾相識的感覺。view的用法：
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
組件的用法很簡單，<開始標簽>中間內容區</結束標簽> ，組件要成對使用，如果是單標簽就用自閉合的形式。組件通過添加屬性來修飾，如class,id,data-*等，這和html標簽用法一致，所有組件名和屬性名都是小寫，中間可用“-”連接。（在React中的class要寫成className，組件首字母大寫，這里沒有這個限制),
圖片組件的用法示例：
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
其中的src是變量，用{{變量名的形式邦定}}。如果app中的數據進行了變化，view中會自動更新。
對於在樣式中使用本地圖片，要小心坑哦：
對於樣式中的圖片地址，如:background-image:url('../images/logo.png') 這樣子是不行滴，打包之后，看不到圖片，解決辦法有兩種：
1. 用<image>標簽代替樣式。
2. 用絕對路徑。如:http://img.server.com/logo.png
邦定事件，如點擊事件：
<view bindtap="bindViewTap" class="userinfo">
bindtap是固定寫法就相當於onclick，bindViewTap就是事件要做的事情。相當於onclick=bindViewTap，不過和直接在html中的on綁定又有點區別，這里用的bindtap是虛擬邦定，最終都是通過事件代理進行實際派發，所以event對象也是一個二次封裝的對象。這一點和React中的事件邦定用法是同樣的套路。
在view上邦定好事件類型和方法名之后，要在頁面（比如index)中添加相應的事件函數。比如：
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//事件處理函數
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
}
更多參考信息
變量循環：wx:for
頁面中使用 block 控制標簽來組織代碼，在 block上使用 wx:for 綁定 循環數據，並將 循環體數據循環展開節點
<block wx:for="{{數組變量}}">
{{item}} //item數組成員
</block>
頁面跳轉：wx.navigateTo
wx.navigateTo({
url: '../about/about'
})
插件API:
依靠插件，微信小程序可以使用原生APP才有的功能，具體內容查看官方插件列表。下面以調用攝像頭和相冊為例，介紹插件的用法：
wx.chooseImage
首頁在頁面中綁定一個點擊事件：
<!--pages/about/about.wxml-->
<view>
<text>pages/about/about.wxml</text>
<icon type="success" bindtap="bindEvent"></icon>
</view>
然后在about.js中添加事件函數
// pages/about/about.js
Page({
data:{},
//....省略無關代碼
bindEvent:function(e){
wx.chooseImage({
count: 1, // 默認9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
success: function (res) {
// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
var tempFilePaths = res.tempFilePaths
}
})
}
})
預覽：
點擊IDE工具的左邊，“項目” ，如果有AppID ，可以上傳，通過手機在微信中進行查看。
其它：
微信小程序中有許多與傳統開發方式不一樣的地方，需要多留意官方的F&Q ,避免趟一些不必要的坑。