一、小程序開發教程

1、注冊微信小程序賬號

2、獲取APPID

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

3、綁定開發者

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

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

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

直(zhi)接在微(wei)信(xin)小程序官(guan)方下(xia)載(zai)即可(ke)，根(gen)據不同的電腦系統(tong)下(xia)載(zai)對應的版本，安裝即可(ke)。

5、創建微信小程序項目

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

6、編寫微信小程序代碼

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

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

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

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

7、創建微信小程序頁面

微信小程序(xu)中的(de)(de)(de)(de)每一(yi)個頁面的(de)(de)(de)(de)【路(lu)徑(jing)+頁面名】都需要寫在app.json的(de)(de)(de)(de)pages中，且pages中的(de)(de)(de)(de)第一(yi)個頁面是小程序(xu)的(de)(de)(de)(de)芒果视(shi)频。

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

8、手機預覽

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

9、上傳小程序代碼

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

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

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

1、友好禮貌

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

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

2、流程明確

為(wei)了讓用(yong)戶順暢(chang)地使用(yong)頁面，在(zai)用(yong)戶進行(xing)某一個操作流程時，應避免出(chu)現(xian)用(yong)戶目標流程之外(wai)的內容而(er)打斷(duan)用(yong)戶。

3、便捷優雅

從(cong)PC時(shi)(shi)代(dai)的物理鍵盤(pan)鼠標到移動端(duan)時(shi)(shi)代(dai)手(shou)(shou)指，雖然輸入設(she)備(bei)極大(da)精(jing)簡，但是手(shou)(shou)指操作的準確性卻大(da)大(da)不(bu)如(ru)鍵盤(pan)鼠標精(jing)確。為了適應這個變化，需(xu)要開發(fa)者(zhe)在設(she)計過(guo)程(cheng)中充分利用(yong)手(shou)(shou)機(ji)特性，讓(rang)用(yong)戶便捷優雅的操控界(jie)面。

4、統一穩定

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

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

5、字體

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