一、小程序開發教程

1、注冊微信小程序賬號

2、獲取APPID

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

3、綁定開發者

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

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

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

直接在微信小程序官(guan)方(fang)下(xia)載即可(ke)(ke)，根據(ju)不同的(de)電腦系統下(xia)載對應(ying)的(de)版本，安裝(zhuang)即可(ke)(ke)。

5、創建微信小程序項目

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

6、編寫微信小程序代碼

編寫代(dai)(dai)碼(ma)對新(xin)手(shou)來說有點難度，不過我們可(ke)以從微(wei)信小程序官(guan)方上直(zhi)接(jie)下(xia)載代(dai)(dai)碼(ma)實例，下(xia)載后(hou)，直(zhi)接(jie)解(jie)壓到步驟5代(dai)(dai)碼(ma)存儲目錄內即(ji)可(ke)。這(zhe)時我們會發現(xian)，有三(san)個后(hou)綴(zhui)的文(wen)件(jian)(jian)，分別為app.js、app.json、app.wxss。其中，.js后(hou)綴(zhui)的是腳本(ben)文(wen)件(jian)(jian)，.json后(hou)綴(zhui)的文(wen)件(jian)(jian)是配(pei)置文(wen)件(jian)(jian)，.wxss后(hou)綴(zhui)的是樣式表文(wen)件(jian)(jian)。

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

app.json是(shi)(shi)對整個(ge)小(xiao)程序的全局配(pei)(pei)(pei)置(zhi)。我(wo)們(men)可(ke)以(yi)在這個(ge)文件(jian)中配(pei)(pei)(pei)置(zhi)小(xiao)程序是(shi)(shi)由哪些(xie)頁面組(zu)成，配(pei)(pei)(pei)置(zhi)小(xiao)程序的窗(chuang)口(kou)背(bei)景色，配(pei)(pei)(pei)置(zhi)導航(hang)條樣(yang)式(shi)，配(pei)(pei)(pei)置(zhi)默認標題。注意該文件(jian)不可(ke)添(tian)加(jia)任何注釋。

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

7、創建微信小程序頁面

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

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

8、手機預覽

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

9、上傳小程序代碼

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

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

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

1、友好禮貌

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

每(mei)個頁(ye)面(mian)都應有明(ming)確的(de)重點，以(yi)便(bian)于(yu)用戶每(mei)進入(ru)一個新(xin)頁(ye)面(mian)的(de)時候都能快(kuai)速地(di)理解頁(ye)面(mian)內容。在(zai)確定了重點的(de)前提下(xia)，應盡(jin)量避免頁(ye)面(mian)上出現(xian)其它與用戶的(de)決策和操(cao)作無關的(de)干擾因素。

2、流程明確

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

3、便捷優雅

從PC時代(dai)的(de)(de)物理(li)鍵盤鼠標(biao)到移動端時代(dai)手(shou)指，雖然輸入設備極大精(jing)簡，但是手(shou)指操作的(de)(de)準確性卻大大不(bu)如鍵盤鼠標(biao)精(jing)確。為了適應(ying)這個變化，需要開(kai)發(fa)者在設計過(guo)程中充(chong)分利用手(shou)機特性，讓用戶便捷(jie)優雅(ya)的(de)(de)操控界面。

4、統一穩定

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

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

5、字體

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