一、小程序開發教程

1、注冊微信小程序賬號

2、獲取APPID

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

3、綁定開發者

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

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

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

直接在(zai)微信小程序(xu)官(guan)方下(xia)載即(ji)(ji)可，根據不同的(de)電(dian)腦(nao)系統下(xia)載對應的(de)版本(ben)，安(an)裝(zhuang)即(ji)(ji)可。

5、創建微信小程序項目

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

6、編寫微信小程序代碼

編寫代(dai)碼對新手來說有(you)點難(nan)度，不過我(wo)們可(ke)以從(cong)微信小程序官方上直(zhi)接(jie)下載代(dai)碼實(shi)例(li)，下載后(hou)(hou)，直(zhi)接(jie)解壓(ya)到(dao)步驟5代(dai)碼存儲(chu)目錄內即可(ke)。這時(shi)我(wo)們會(hui)發(fa)現，有(you)三個后(hou)(hou)綴(zhui)(zhui)(zhui)的(de)(de)文(wen)件(jian)，分別為app.js、app.json、app.wxss。其中(zhong)，.js后(hou)(hou)綴(zhui)(zhui)(zhui)的(de)(de)是腳(jiao)本文(wen)件(jian)，.json后(hou)(hou)綴(zhui)(zhui)(zhui)的(de)(de)文(wen)件(jian)是配置(zhi)文(wen)件(jian)，.wxss后(hou)(hou)綴(zhui)(zhui)(zhui)的(de)(de)是樣式表文(wen)件(jian)。

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

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

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

7、創建微信小程序頁面

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

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

8、手機預覽

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

9、上傳小程序代碼

開發(fa)者(zhe)工具左側(ce)菜單欄選擇"項(xiang)目"，點擊(ji)"上(shang)傳"即可將代碼(ma)上(shang)傳到微信(xin)小程序服務器。

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

步驟9上傳好小程序代碼(ma)后(hou)，提交微信進行審核。審核現在(zai)(zai)也很快，一把幾個小時(shi)就審核過了，慢(man)的話估計2-5天吧(ba)，等(deng)審核通過后(hou)，就可以(yi)在(zai)(zai)小程序后(hou)臺，進行發(fa)布上線了。

1、友好禮貌

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

每個頁面(mian)(mian)都應有明(ming)確的(de)重點，以(yi)便于(yu)用(yong)戶(hu)每進入一個新頁面(mian)(mian)的(de)時(shi)候都能快速地理解頁面(mian)(mian)內容(rong)。在確定了重點的(de)前提下(xia)，應盡量(liang)避(bi)免(mian)頁面(mian)(mian)上出現其它與(yu)用(yong)戶(hu)的(de)決策和(he)操作無關的(de)干擾因素。

2、流程明確

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

3、便捷優雅

從PC時代的(de)物理鍵盤鼠標到(dao)移動端時代手指，雖(sui)然(ran)輸(shu)入設備極大精(jing)(jing)簡，但是(shi)手指操作(zuo)的(de)準確性卻大大不如鍵盤鼠標精(jing)(jing)確。為了適應這個變化(hua)，需(xu)要開(kai)發者在設計(ji)過程(cheng)中充分利用(yong)手機特性，讓用(yong)戶(hu)便捷優(you)雅的(de)操控界(jie)面。

4、統一穩定

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

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

5、字體

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