一、小程序開發教程

1、注冊微信小程序賬號

2、獲取APPID

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

3、綁定開發者

如果在第一步注冊小(xiao)(xiao)程序帳號的(de)時候，你不是管理員(yuan)，那么這個時候，還需要(yao)綁定個開發者(zhe)，直(zhi)接(jie)登(deng)錄(lu)小(xiao)(xiao)程序后臺(tai)，點(dian)左(zuo)側“用戶身份”-點(dian)右側“編輯”添加成(cheng)員(yuan)，出現(xian)個二維碼，管理員(yuan)掃(sao)描二維碼后，然(ran)后輸入(ru)開發者(zhe)微(wei)信號，勾選權限，確(que)定，就可以了。

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

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

直接(jie)在微信小程序(xu)官方下載(zai)即(ji)可，根據不同的電腦系(xi)統下載(zai)對應(ying)的版本，安裝即(ji)可。

5、創建微信小程序項目

打(da)開步驟4中安裝好的(de)(de)小(xiao)程序(xu)開發工具，然后用開發者(zhe)（或(huo)者(zhe)管理(li)員）掃(sao)碼登錄(lu)(lu)，選擇創(chuang)建“新項(xiang)目”，填(tian)入步驟2獲取到的(de)(de)AppID，設置一(yi)個本(ben)地項(xiang)目的(de)(de)名(ming)稱，并選擇一(yi)個本(ben)地的(de)(de)文件夾作為代碼存儲的(de)(de)目錄(lu)(lu)，點擊「新建項(xiang)目」就(jiu)可以了。

6、編寫微信小程序代碼

編寫代碼對(dui)新手來說有點難度(du)，不過我(wo)們(men)可以(yi)從微信小(xiao)程序官方上(shang)直(zhi)(zhi)接下載代碼實(shi)例，下載后(hou)，直(zhi)(zhi)接解壓到步驟5代碼存儲目錄內即(ji)可。這(zhe)時我(wo)們(men)會(hui)發(fa)現，有三個后(hou)綴(zhui)(zhui)的(de)文件(jian)(jian)，分別為(wei)app.js、app.json、app.wxss。其中，.js后(hou)綴(zhui)(zhui)的(de)是(shi)腳本(ben)文件(jian)(jian)，.json后(hou)綴(zhui)(zhui)的(de)文件(jian)(jian)是(shi)配置文件(jian)(jian)，.wxss后(hou)綴(zhui)(zhui)的(de)是(shi)樣式表(biao)文件(jian)(jian)。

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

app.json是(shi)對(dui)整個小(xiao)(xiao)程序(xu)的(de)全局配(pei)置(zhi)。我們可以(yi)在這個文(wen)(wen)件中配(pei)置(zhi)小(xiao)(xiao)程序(xu)是(shi)由哪些頁面組成(cheng)，配(pei)置(zhi)小(xiao)(xiao)程序(xu)的(de)窗口背(bei)景色，配(pei)置(zhi)導航條樣式，配(pei)置(zhi)默認標(biao)題。注意該文(wen)(wen)件不(bu)可添加任何注釋。

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

7、創建微信小程序頁面

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

每(mei)一(yi)個小程序頁(ye)(ye)面是由同(tong)路徑下同(tong)名的四個不同(tong)后(hou)(hou)綴(zhui)文(wen)件(jian)(jian)(jian)的組成，如：index.js、index.wxml、index.wxss、index.json。.js后(hou)(hou)綴(zhui)的文(wen)件(jian)(jian)(jian)是腳本文(wen)件(jian)(jian)(jian)，.json后(hou)(hou)綴(zhui)的文(wen)件(jian)(jian)(jian)是配置(zhi)文(wen)件(jian)(jian)(jian)，.wxss后(hou)(hou)綴(zhui)的是樣式表文(wen)件(jian)(jian)(jian)，.wxml后(hou)(hou)綴(zhui)的文(wen)件(jian)(jian)(jian)是頁(ye)(ye)面結(jie)構文(wen)件(jian)(jian)(jian)。

8、手機預覽

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

9、上傳小程序代碼

開發(fa)者工(gong)具(ju)左(zuo)側菜(cai)單欄選擇"項目"，點(dian)擊(ji)"上傳"即(ji)可將代(dai)碼(ma)上傳到(dao)微(wei)信小程序服務器。

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

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

1、友好禮貌

為了避免用戶在微信中使(shi)用(yong)小程序(xu)服務時(shi)，注意力被周圍復雜環境干擾，小程序(xu)在設(she)計時(shi)應該注意減少無(wu)關的(de)設(she)計元素對用(yong)戶目標(biao)的(de)干擾，禮貌(mao)地向(xiang)用(yong)戶展示(shi)程序(xu)提供(gong)的(de)服務，友好地引導用(yong)戶進行(xing)操(cao)作。

每個頁面都(dou)應(ying)有明(ming)確的(de)重(zhong)(zhong)點，以便于用戶每進入(ru)一個新頁面的(de)時候都(dou)能(neng)快速地理解頁面內(nei)容。在確定了重(zhong)(zhong)點的(de)前提下，應(ying)盡量避免(mian)頁面上出現(xian)其它與用戶的(de)決策和操(cao)作無關的(de)干擾(rao)因素(su)。

2、流程明確

為了(le)讓用(yong)戶(hu)順暢(chang)地使用(yong)頁面，在用(yong)戶(hu)進行某一個(ge)操(cao)作流(liu)程(cheng)時，應(ying)避(bi)免(mian)出現用(yong)戶(hu)目標流(liu)程(cheng)之外的內(nei)容而(er)打(da)斷(duan)用(yong)戶(hu)。

3、便捷優雅

從PC時代(dai)的物理鍵盤鼠(shu)(shu)標(biao)到移動端時代(dai)手(shou)指(zhi)，雖然(ran)輸入設(she)備極大(da)精簡，但(dan)是手(shou)指(zhi)操作的準確性卻大(da)大(da)不如鍵盤鼠(shu)(shu)標(biao)精確。為了適應(ying)這個(ge)變化(hua)，需要開(kai)發者(zhe)在(zai)設(she)計過程中充分利用(yong)手(shou)機特性，讓用(yong)戶便捷優雅的操控界面(mian)。

4、統一穩定

除了以上所提到的種(zhong)種(zhong)原則，建議接入微(wei)信的小程序還(huan)應該時刻注意不同頁面間的統(tong)一性和延續性，在不同的頁面盡量使用一致的控(kong)件和交互方式。

統(tong)一(yi)的(de)頁(ye)面體驗和有延續(xu)性的(de)界面元素(su)都將幫助用最少的(de)學習成本達成使用目標(biao)，減輕頁(ye)面跳動所造成的(de)不適感(gan)。正因如此，小程序可根據需(xu)要(yao)使用微信提供的(de)標(biao)準控(kong)件，以達到統(tong)一(yi)穩定的(de)目的(de)。

5、字體

微信內(nei)字體的使用與所(suo)運行(xing)的系統字體保(bao)持一(yi)致，常用字號為(wei)(wei)20,18,17,16,14 13,11(pt)，主內(nei)容(rong)Black黑(hei)色(se)，次要(yao)內(nei)容(rong)Grey灰(hui)(hui)色(se)；時間戳與表單缺(que)省值Light灰(hui)(hui)色(se)；大段的說明(ming)內(nei)容(rong)而(er)且(qie)屬于主要(yao)內(nei)容(rong)用Semi黑(hei)。藍(lan)色(se)為(wei)(wei)鏈接用色(se)，綠色(se)為(wei)(wei)完成字樣色(se)，紅色(se)為(wei)(wei)出錯用色(se)Press與Disable狀態分別降低透明(ming)度(du)為(wei)(wei)20%與10%。