? ? ? ? 本篇文章適合有一定編程基礎(chǔ)、剛接觸微信小程序的興趣愛(ài)好者閱讀。如果您是前端工程師可以直接去看微信小程序的接口文檔就會(huì)了。
? ? ? ? 雖然微信小程序的IDE非常非常的不好用，但本人對(duì)前段開(kāi)發(fā)不是很熟，為了不麻煩，就湊合用了。。。至少比文本編輯器強(qiáng)啊。。。
? ? ? ? 還在開(kāi)發(fā)過(guò)程中，會(huì)隨時(shí)更新記錄細(xì)節(jié)。
正文開(kāi)始：
? ? ? ? 首先說(shuō)一下IDE的使用吧，打開(kāi)需要輸入appid及使用微信掃描登錄。這個(gè)appid及開(kāi)發(fā)權(quán)限需要在微信開(kāi)放平臺(tái)申請(qǐng)小程序的時(shí)候獲取，包括以后的秘鑰等等。如果是自己的小程序OK，如果是team需要讓創(chuàng)建者將自己的微信ID加入到開(kāi)發(fā)者里面就可以了。功能都是中文得，稍微有點(diǎn)開(kāi)發(fā)基礎(chǔ)都知道何時(shí)使用。微信IDE不自動(dòng)保存代碼，需要時(shí)長(zhǎng)ctrl+s，當(dāng)然保存的同時(shí)也會(huì)重新編譯的。（這里有個(gè)flag，如果ctrl+s編譯后還是有問(wèn)題，點(diǎn)上方的編譯按鈕。在編譯過(guò)程中請(qǐng)不要點(diǎn)擊畫面調(diào)試，會(huì)中斷編譯）
? ? ? ? 微信小程序的開(kāi)發(fā)就是前端的開(kāi)發(fā)，用的是xml、css和js，只不過(guò)微信的名字是wxml、wxss以及js，代碼通用。微信小程序的開(kāi)發(fā)過(guò)程比較簡(jiǎn)單，涉及手機(jī)功能的東西都被封裝了，不像android和ios的開(kāi)發(fā)需要調(diào)用應(yīng)用層各種異常的處理等等。但是越簡(jiǎn)單的東西往往可控性也不高，所以微信小程序的開(kāi)發(fā)還是有許多問(wèn)題的，而有些問(wèn)題一旦發(fā)生是開(kāi)發(fā)者無(wú)法控制的，尤其在適配環(huán)節(jié)等等，具體請(qǐng)?zhí)D(zhuǎn)至《踩坑篇》。
? ? ? ? 前端語(yǔ)言只在大學(xué)期間接觸過(guò)，微信的前端是<view>標(biāo)簽。。。但也是接受<button><text>純html標(biāo)簽等。這一塊真沒(méi)什么說(shuō)的，說(shuō)一下點(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è)用的比較多，其他的詳見(jiàn)文檔吧，小程序團(tuán)隊(duì)的文檔做的還是挺好的，里面的示例粘過(guò)來(lái)用就行。（當(dāng)然也有部分文檔的示例粘過(guò)來(lái)竟然給我報(bào)錯(cuò)。。。也是醉了）
? ? ? ? 對(duì)于UI方面，官方也給了很多建議和資源庫(kù)，建議開(kāi)發(fā)者和設(shè)計(jì)師們盡量采用微信的樣式。一是因?yàn)楸緛?lái)微信的扁平化UI就做的很舒服的，再就是畢竟是寄生在人家上面的東西，你打開(kāi)了來(lái)個(gè)支付寶風(fēng)格的用戶也會(huì)覺(jué)得很突兀不舒服。
? ? ? ? 這里著重說(shuō)一下js。因?yàn)槲医佑|的js也比較少，不是很熟，如果有問(wèn)題還請(qǐng)指出。微信js命名的方式是xxx : function(){...}，好像和前端的反了過(guò)來(lái)。微信的page里記錄了js中需要的全局變量，通常在方法中調(diào)用是this.data.xxx，this就是指的此頁(yè)page。但是在wx的方法體中是不能這樣調(diào)用的，因?yàn)閣x方法中的this指的就不是本頁(yè)page了。所以如果需要在wx的方法中使用，需要在調(diào)用wx方法前聲明一個(gè)變量代替page，廢話不多說(shuō)，show code：
? ? ? ? 在使用的時(shí)候即可以用變量替換this點(diǎn)出變量賦值，也可以使用setData的方式給多個(gè)變量賦值，上例即使用后者方式賦值。
? ? ? ? js導(dǎo)入的方式如下，后面直接用jsonUtil.xxx調(diào)用導(dǎo)入js方法即可。
? ? ? ? 對(duì)前端開(kāi)發(fā)人員來(lái)說(shuō)，跨頁(yè)的變量保存一般會(huì)使用Cookie或者Session；對(duì)java開(kāi)發(fā)來(lái)說(shuō)，最簡(jiǎn)單的全局變量保存的方式是給一個(gè)專門存放變量的類（這里不考慮內(nèi)存等性能因素）。微信小程序我沒(méi)搜到關(guān)于全局變量這一說(shuō)法，它的數(shù)值的保存方式是暫存到本地：
? ? ? ? 具體的使用方式參考《微信官方文檔》即可，這里只提供一種思路。這種數(shù)據(jù)的存儲(chǔ)方式類似于Android中的Sharepreference，微信的官方文檔有給出使用的注意問(wèn)題。
? ? ? ? 對(duì)于僅僅是跳轉(zhuǎn)傳值可以不使用這種方式，微信提供了跳轉(zhuǎn)帶參的方式，文檔都有，我就不畫蛇添足了。
? ? ? ? 差不多這些基礎(chǔ)，再參考官方文檔的SDK，然后看運(yùn)氣和能力能否解決非應(yīng)用端代碼的bug，基本就可以做出大眾化的微信小程序了。
