一、小程序開發教程

1、注冊微信小程序賬號

2、獲取APPID

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

3、綁定開發者

如果在第一(yi)步(bu)注冊小程(cheng)序帳號(hao)的時候(hou)，你不(bu)是(shi)管理員，那(nei)么這(zhe)個時候(hou)，還需要綁定(ding)個開發者，直接登(deng)錄小程(cheng)序后(hou)(hou)臺，點左側“用戶(hu)身份”-點右(you)側“編輯”添加成員，出現個二(er)維(wei)碼，管理員掃描二(er)維(wei)碼后(hou)(hou)，然后(hou)(hou)輸入開發者微信(xin)號(hao)，勾(gou)選(xuan)權限(xian)，確定(ding)，就可(ke)以了。

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

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

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

5、創建微信小程序項目

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

6、編寫微信小程序代碼

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

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

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

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

7、創建微信小程序頁面

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

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

8、手機預覽

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

9、上傳小程序代碼

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

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

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

1、友好禮貌

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

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

2、流程明確

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

3、便捷優雅

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

4、統一穩定

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

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

5、字體

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