一、小程序開發教程

1、注冊微信小程序賬號

2、獲取APPID

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

3、綁定開發者

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

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

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

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

5、創建微信小程序項目

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

6、編寫微信小程序代碼

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

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

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

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

7、創建微信小程序頁面

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

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

8、手機預覽

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

9、上傳小程序代碼

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

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

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

1、友好禮貌

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

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

2、流程明確

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

3、便捷優雅

從PC時代的物理鍵盤鼠(shu)標(biao)到移動(dong)端時代手指(zhi)，雖然輸入(ru)設(she)備極大精簡，但是(shi)手指(zhi)操(cao)作(zuo)的準(zhun)確性卻(que)大大不如鍵盤鼠(shu)標(biao)精確。為(wei)了適應(ying)這個變化，需要開發(fa)者在(zai)設(she)計過程中(zhong)充(chong)分利(li)用(yong)(yong)手機(ji)特性，讓用(yong)(yong)戶(hu)便捷優雅的操(cao)控界面。

4、統一穩定

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

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

5、字體

微(wei)信內(nei)字(zi)體(ti)(ti)的使用(yong)(yong)與(yu)所(suo)運行(xing)的系統字(zi)體(ti)(ti)保持(chi)一致，常用(yong)(yong)字(zi)號(hao)為20,18,17,16,14 13,11(pt)，主內(nei)容(rong)Black黑色(se)，次要(yao)(yao)內(nei)容(rong)Grey灰色(se)；時間戳與(yu)表單缺(que)省值(zhi)Light灰色(se)；大段的說明內(nei)容(rong)而且屬于主要(yao)(yao)內(nei)容(rong)用(yong)(yong)Semi黑。藍色(se)為鏈接(jie)用(yong)(yong)色(se)，綠(lv)色(se)為完成字(zi)樣色(se)，紅(hong)色(se)為出錯(cuo)用(yong)(yong)色(se)Press與(yu)Disable狀態分(fen)別(bie)降(jiang)低透(tou)明度為20%與(yu)10%。