一、小程序開發教程

1、注冊微信小程序賬號

2、獲取APPID

APPID在哪里獲取呢，根據第一步注冊的小程序帳號，然后登(deng)陸上，找(zhao)到左側“設置”，“開發設置”，就看到APPID啦(la)，把APPID復制下來(lai)，留作備用。

3、綁定開發者

如(ru)果在第一步注冊小程序帳號的時候(hou)，你不是管(guan)理員，那么這個時候(hou)，還(huan)需(xu)要綁定(ding)個開發(fa)者，直(zhi)接登錄小程序后(hou)(hou)臺，點左側(ce)“用戶(hu)身份”-點右(you)側(ce)“編(bian)輯(ji)”添加成員，出現個二維碼，管(guan)理員掃描二維碼后(hou)(hou)，然(ran)后(hou)(hou)輸(shu)入開發(fa)者微(wei)信號，勾選權限(xian)，確定(ding)，就可以(yi)了。

該圖片由注冊用戶"互聯網說"提供，版權聲明反饋

4、下載微信小程序開發者工具

直接在微(wei)信(xin)小程序官方下載即可(ke)，根(gen)據不同的電腦系統下載對應的版本，安(an)裝(zhuang)即可(ke)。

5、創建微信小程序項目

打開步(bu)驟4中安裝好的(de)(de)小程(cheng)序開發工(gong)具，然后用開發者（或者管理員(yuan)）掃碼(ma)登(deng)錄，選擇(ze)創建(jian)“新項(xiang)目”，填入(ru)步(bu)驟2獲取(qu)到的(de)(de)AppID，設置一個本地項(xiang)目的(de)(de)名稱，并選擇(ze)一個本地的(de)(de)文件夾作為代(dai)碼(ma)存儲的(de)(de)目錄，點(dian)擊「新建(jian)項(xiang)目」就(jiu)可以了。

6、編寫微信小程序代碼

編寫代碼(ma)對新(xin)手來說有點難度，不(bu)過我(wo)們可以從微信小程序(xu)官方(fang)上(shang)直(zhi)接下載代碼(ma)實例，下載后，直(zhi)接解壓到(dao)步驟(zou)5代碼(ma)存儲目錄內即可。這時(shi)我(wo)們會發現，有三個后綴(zhui)(zhui)的(de)文(wen)件，分別為app.js、app.json、app.wxss。其(qi)中，.js后綴(zhui)(zhui)的(de)是(shi)(shi)(shi)腳(jiao)本文(wen)件，.json后綴(zhui)(zhui)的(de)文(wen)件是(shi)(shi)(shi)配置文(wen)件，.wxss后綴(zhui)(zhui)的(de)是(shi)(shi)(shi)樣(yang)式表文(wen)件。

app.js是(shi)小程序(xu)的(de)(de)(de)腳本(ben)代碼(ma)。我們可以在(zai)這(zhe)個(ge)文件中監聽并處理小程序(xu)的(de)(de)(de)生命周期函數(shu)、聲明全局(ju)變量。調用MINA提供(gong)的(de)(de)(de)豐富的(de)(de)(de)API，如(ru)本(ben)例的(de)(de)(de)同步存儲及(ji)同步讀取本(ben)地(di)數(shu)據。

app.json是對整(zheng)個小程序的(de)全局配置。我們可(ke)以(yi)在這個文(wen)件中(zhong)配置小程序是由哪(na)些頁面組成，配置小程序的(de)窗(chuang)口背景色，配置導航條樣(yang)式，配置默認標題(ti)。注意(yi)該文(wen)件不(bu)可(ke)添(tian)加任何注釋。

app.wxss是整個小程序的(de)(de)公共樣式(shi)(shi)表。我們可以在(zai)頁(ye)面(mian)組(zu)件的(de)(de)class屬性(xing)上直接使app.wxss中聲明的(de)(de)樣式(shi)(shi)規則。

7、創建微信小程序頁面

微(wei)信小程(cheng)序中的(de)(de)每一個頁(ye)面(mian)(mian)的(de)(de)【路徑+頁(ye)面(mian)(mian)名】都(dou)需要寫在app.json的(de)(de)pages中，且pages中的(de)(de)第一個頁(ye)面(mian)(mian)是(shi)小程(cheng)序的(de)(de)芒果视(shi)频(pin)下载(zai)。

每一個(ge)小(xiao)程序(xu)頁(ye)(ye)面(mian)是(shi)由同(tong)路徑下同(tong)名的(de)四個(ge)不同(tong)后(hou)(hou)綴(zhui)(zhui)文(wen)件的(de)組成，如：index.js、index.wxml、index.wxss、index.json。.js后(hou)(hou)綴(zhui)(zhui)的(de)文(wen)件是(shi)腳(jiao)本文(wen)件，.json后(hou)(hou)綴(zhui)(zhui)的(de)文(wen)件是(shi)配置文(wen)件，.wxss后(hou)(hou)綴(zhui)(zhui)的(de)是(shi)樣式表(biao)文(wen)件，.wxml后(hou)(hou)綴(zhui)(zhui)的(de)文(wen)件是(shi)頁(ye)(ye)面(mian)結構文(wen)件。

8、手機預覽

開發者工具左(zuo)側(ce)菜單欄選擇"項(xiang)目"，點擊"預覽"，掃(sao)碼后即可在(zai)微信客戶端中體(ti)驗。

9、上傳小程序代碼

開(kai)發者工具左(zuo)側菜(cai)單(dan)欄選擇"項目"，點擊(ji)"上(shang)傳"即可將代碼上(shang)傳到(dao)微信小程序(xu)服務器。

10、提交微信審核及小程序發布

步驟(zou)9上傳好小程(cheng)序(xu)代碼后，提交微(wei)信進(jin)行審(shen)核(he)(he)。審(shen)核(he)(he)現在也很快，一(yi)把(ba)幾個小時就(jiu)審(shen)核(he)(he)過了，慢(man)的話估計2-5天吧，等審(shen)核(he)(he)通過后，就(jiu)可(ke)以在小程(cheng)序(xu)后臺，進(jin)行發布上線(xian)了。

1、友好禮貌

為了避免用戶在微信中使用小(xiao)程(cheng)序服務(wu)時(shi)，注(zhu)意力被(bei)周圍復雜環境干(gan)擾(rao)，小(xiao)程(cheng)序在設(she)(she)計時(shi)應該注(zhu)意減少無關(guan)的(de)(de)設(she)(she)計元素對(dui)用戶(hu)目標的(de)(de)干(gan)擾(rao)，禮(li)貌地(di)向用戶(hu)展(zhan)示(shi)程(cheng)序提供的(de)(de)服務(wu)，友好地(di)引導(dao)用戶(hu)進行操作。

每(mei)個(ge)頁面(mian)都(dou)應(ying)有(you)明確的(de)(de)(de)(de)重(zhong)點，以便(bian)于用戶(hu)(hu)每(mei)進入(ru)一個(ge)新頁面(mian)的(de)(de)(de)(de)時候(hou)都(dou)能(neng)快速地理解頁面(mian)內容(rong)。在確定了重(zhong)點的(de)(de)(de)(de)前(qian)提下，應(ying)盡量(liang)避免(mian)頁面(mian)上(shang)出現其它與(yu)用戶(hu)(hu)的(de)(de)(de)(de)決策和操作(zuo)無(wu)關的(de)(de)(de)(de)干擾因素。

2、流程明確

為了讓用(yong)戶順暢地使用(yong)頁面，在用(yong)戶進行某(mou)一個操作(zuo)流(liu)程(cheng)時，應避(bi)免出現用(yong)戶目(mu)標流(liu)程(cheng)之(zhi)外的內容(rong)而打(da)斷用(yong)戶。

3、便捷優雅

從PC時代的(de)物理鍵盤(pan)鼠標(biao)到移動(dong)端時代手(shou)指，雖然輸入設備極大(da)精簡，但是手(shou)指操作(zuo)的(de)準確(que)性卻(que)大(da)大(da)不(bu)如鍵盤(pan)鼠標(biao)精確(que)。為了(le)適應這(zhe)個變(bian)化，需要開發者在設計(ji)過程中(zhong)充分利用手(shou)機(ji)特性，讓用戶(hu)便捷優雅(ya)的(de)操控界面。

4、統一穩定

除了(le)以(yi)上(shang)所提到的(de)種種原則，建(jian)議接入微(wei)信的(de)小程序還應該時刻注(zhu)意不(bu)同(tong)頁面(mian)間的(de)統一性和延(yan)續性，在(zai)不(bu)同(tong)的(de)頁面(mian)盡量使用(yong)一致的(de)控件和交互方(fang)式。

統一的(de)頁面體驗和有延續性的(de)界(jie)面元素都將幫(bang)助用(yong)最少的(de)學(xue)習成(cheng)本(ben)達成(cheng)使用(yong)目(mu)標，減輕(qing)頁面跳動所(suo)造成(cheng)的(de)不適感。正因如此，小(xiao)程(cheng)序可根據需要使用(yong)微信提供的(de)標準控件，以達到統一穩(wen)定的(de)目(mu)的(de)。

5、字體

微信(xin)內字(zi)體的使用與(yu)所運行(xing)的系(xi)統字(zi)體保持(chi)一致，常(chang)用字(zi)號為20,18,17,16,14 13,11(pt)，主內容(rong)Black黑色(se)(se)(se)(se)，次要內容(rong)Grey灰(hui)色(se)(se)(se)(se)；時間戳與(yu)表單(dan)缺省(sheng)值Light灰(hui)色(se)(se)(se)(se)；大(da)段的說明(ming)內容(rong)而且屬(shu)于主要內容(rong)用Semi黑。藍色(se)(se)(se)(se)為鏈接用色(se)(se)(se)(se)，綠色(se)(se)(se)(se)為完成字(zi)樣(yang)色(se)(se)(se)(se)，紅色(se)(se)(se)(se)為出(chu)錯用色(se)(se)(se)(se)Press與(yu)Disable狀態分(fen)別降低透(tou)明(ming)度為20%與(yu)10%。