? ? ? ? 本篇文章適合有一定編程基礎(chǔ)、剛接觸微信小程序的興趣愛好者閱讀。如果您是前端工程師可以直接去看微信小程序的接口文檔就會(huì)了。

? ? ? ? 雖然微信小程序的IDE非常非常的不好用，但本人對前段開發(fā)不是很熟，為了不麻煩，就湊合用了。。。至少比文本編輯器強(qiáng)啊。。。

? ? ? ? 還在開發(fā)過程中，會(huì)隨時(shí)更新記錄細(xì)節(jié)。

正文開始：

? ? ? ? 首先說一下IDE的使用吧，打開需要輸入appid及使用微信掃描登錄。這個(gè)appid及開發(fā)權(quán)限需要在微信開放平臺(tái)申請小程序的時(shí)候獲取，包括以后的秘鑰等等。如果是自己的小程序OK，如果是team需要讓創(chuàng)建者將自己的微信ID加入到開發(fā)者里面就可以了。功能都是中文得，稍微有點(diǎn)開發(fā)基礎(chǔ)都知道何時(shí)使用。微信IDE不自動(dòng)保存代碼，需要時(shí)長ctrl+s，當(dāng)然保存的同時(shí)也會(huì)重新編譯的。（這里有個(gè)flag，如果ctrl+s編譯后還是有問題，點(diǎn)上方的編譯按鈕。在編譯過程中請不要點(diǎn)擊畫面調(diào)試，會(huì)中斷編譯）

? ? ? ? 微信小程序的開發(fā)就是前端的開發(fā)，用的是xml、css和js，只不過微信的名字是wxml、wxss以及js，代碼通用。微信小程序的開發(fā)過程比較簡單，涉及手機(jī)功能的東西都被封裝了，不像android和ios的開發(fā)需要調(diào)用應(yīng)用層各種異常的處理等等。但是越簡單的東西往往可控性也不高，所以微信小程序的開發(fā)還是有許多問題的，而有些問題一旦發(fā)生是開發(fā)者無法控制的，尤其在適配環(huán)節(jié)等等，具體請?zhí)D(zhuǎn)至《踩坑篇》。

? ? ? ? 前端語言只在大學(xué)期間接觸過，微信的前端是<view>標(biāo)簽。。。但也是接受<button><text>純html標(biāo)簽等。這一塊真沒什么說的，說一下點(diǎn)擊事件和前臺(tái)xml傳參吧。點(diǎn)擊事件是用bindtap=""，參數(shù)是{{}}，例：<view bindtap="toLocationPage"> {{locationName}}</view> ，點(diǎn)擊標(biāo)簽進(jìn)入toLocationPage方法，參數(shù)是js中的locationName參數(shù)，并且值動(dòng)態(tài)的隨js的改變而改變。這一個(gè)用的比較多，其他的詳見文檔吧，小程序團(tuán)隊(duì)的文檔做的還是挺好的，里面的示例粘過來用就行。（當(dāng)然也有部分文檔的示例粘過來竟然給我報(bào)錯(cuò)。。。也是醉了）

? ? ? ? 對于UI方面，官方也給了很多建議和資源庫，建議開發(fā)者和設(shè)計(jì)師們盡量采用微信的樣式。一是因?yàn)楸緛砦⑿诺谋馄交疷I就做的很舒服的，再就是畢竟是寄生在人家上面的東西，你打開了來個(gè)支付寶風(fēng)格的用戶也會(huì)覺得很突兀不舒服。

? ? ? ? 這里著重說一下js。因?yàn)槲医佑|的js也比較少，不是很熟，如果有問題還請指出。微信js命名的方式是xxx : function(){...}，好像和前端的反了過來。微信的page里記錄了js中需要的全局變量，通常在方法中調(diào)用是this.data.xxx，this就是指的此頁page。但是在wx的方法體中是不能這樣調(diào)用的，因?yàn)閣x方法中的this指的就不是本頁page了。所以如果需要在wx的方法中使用，需要在調(diào)用wx方法前聲明一個(gè)變量代替page，廢話不多說，show code：

Page聲明變量

微信掃碼

? ? ? ? 在使用的時(shí)候即可以用變量替換this點(diǎn)出變量賦值，也可以使用setData的方式給多個(gè)變量賦值，上例即使用后者方式賦值。

? ? ? ? js導(dǎo)入的方式如下，后面直接用jsonUtil.xxx調(diào)用導(dǎo)入js方法即可。

導(dǎo)入js

? ? ? ? 對前端開發(fā)人員來說，跨頁的變量保存一般會(huì)使用Cookie或者Session；對java開發(fā)來說，最簡單的全局變量保存的方式是給一個(gè)專門存放變量的類（這里不考慮內(nèi)存等性能因素）。微信小程序我沒搜到關(guān)于全局變量這一說法，它的數(shù)值的保存方式是暫存到本地：

微信獲取本地變量

? ? ? ? 具體的使用方式參考《微信官方文檔》即可，這里只提供一種思路。這種數(shù)據(jù)的存儲(chǔ)方式類似于Android中的Sharepreference，微信的官方文檔有給出使用的注意問題。

? ? ? ? 對于僅僅是跳轉(zhuǎn)傳值可以不使用這種方式，微信提供了跳轉(zhuǎn)帶參的方式，文檔都有，我就不畫蛇添足了。

? ? ? ? 差不多這些基礎(chǔ)，再參考官方文檔的SDK，然后看運(yùn)氣和能力能否解決非應(yīng)用端代碼的bug，基本就可以做出大眾化的微信小程序了。