微信小程序怎么開(kāi)發(fā)
2018-05-22|HiShop
導(dǎo)讀：微信小程序開(kāi)發(fā)教程為大家介紹小程序開(kāi)發(fā)流程的步驟詳解，讓大家全方位了解小程序開(kāi)發(fā)的流程步驟。...
1 注冊(cè)
注冊(cè)一個(gè)微信小程序公眾號(hào)，包括賬號(hào)注冊(cè)和管理員信息登記，管理員信息登記很重要，因?yàn)楣芾韱T才有權(quán)限發(fā)布小程序、設(shè)置開(kāi)發(fā)版的體驗(yàn)用戶(hù)等。
請(qǐng)注意，公共號(hào)注冊(cè)時(shí)選擇小程序，不是通常認(rèn)為的公眾號(hào)。
- 注冊(cè)地址：
https://mp.weixin.qq.com/
郵箱和密碼請(qǐng)?zhí)顚?xiě)未注冊(cè)過(guò)公眾平臺(tái)、開(kāi)放平臺(tái)、企業(yè)號(hào)、未綁定個(gè)人號(hào)的郵箱。
- 填寫(xiě)主體信息
郵箱激活之后，需要完善主體信息和管理員信息。
一般沒(méi)有企業(yè)注冊(cè)信息的，就選擇個(gè)人注冊(cè)賬號(hào)類(lèi)型。
注意，個(gè)人賬號(hào)填寫(xiě)管理員信息時(shí)，需要使用綁定了銀行卡且與注冊(cè)主體一致的微信掃描二維碼。
- 填寫(xiě)小程序基本信息
在小程序的公眾平臺(tái)的首頁(yè)，會(huì)看到基本信息的填寫(xiě)
填寫(xiě)基本信息時(shí)的服務(wù)類(lèi)目很重要，即表示你的小程序支持哪些服務(wù)。基本信息填寫(xiě)完成之后，小程序的注冊(cè)工作就結(jié)束了。
2 開(kāi)發(fā)工具及準(zhǔn)備工作
- 獲取AppID
如果你要開(kāi)發(fā)一個(gè)需要發(fā)布的小程序，在你的公眾號(hào)里找到設(shè)置->開(kāi)發(fā)設(shè)置，找到AppID
- 開(kāi)發(fā)工具安裝
下載：登錄小程序公眾號(hào)之后，找到首頁(yè)，有開(kāi)發(fā)工具下載，幫助文檔等。
- 添加項(xiàng)目
下載安裝好開(kāi)發(fā)工具，開(kāi)始添加項(xiàng)目。
在A(yíng)ppID處填上你公眾號(hào)的AppID.
項(xiàng)目名稱(chēng)隨便填。
項(xiàng)目目錄可以直接指向Demo地址，也可以指向一個(gè)空的文件夾（可以選擇quick start項(xiàng)目）。
- 代碼編譯
編譯選項(xiàng)使用默認(rèn)設(shè)置即可，每次保存之后會(huì)自動(dòng)編譯。當(dāng)你的控件正常顯示之后，表示編譯結(jié)束。當(dāng)然，也可以查看Console.
當(dāng)Console顯示編譯完畢，但你的控件沒(méi)有完全顯示時(shí)，應(yīng)該是你電腦速度太慢，關(guān)掉工程，重新打開(kāi)即可。
- 調(diào)試
-------- 調(diào)試期間不要修改代碼。只能在編輯頁(yè)面修改，保存之后，需要重新調(diào)試。
-------- 調(diào)試支持?jǐn)帱c(diǎn)調(diào)試，Console可以直接寫(xiě)代碼輔助調(diào)試，類(lèi)似瀏覽器console的功能。
-------- 如果控件的布局總是調(diào)不好，最好直接在調(diào)試界面的Wxml里調(diào)試，可以清晰的看到調(diào)用了哪些class,每種class的哪些屬性在起作用。
- 預(yù)覽
管理員有預(yù)覽項(xiàng)目的功能，即在手機(jī)上看小程序的效果。
開(kāi)發(fā)工具中找到“項(xiàng)目”一欄->預(yù)覽，然后拿微信掃描即可。可使用半小時(shí)。
微信上可以在"發(fā)現(xiàn)"->"小程序"中找到你的小程序開(kāi)發(fā)版本。
- 代碼上傳
代碼上傳之后可以邀請(qǐng)其他微信用戶(hù)體驗(yàn)，或者提交審核。
在開(kāi)發(fā)工具中選擇選項(xiàng)->基礎(chǔ)信息->上傳
- 體驗(yàn)
代碼上傳之后，可以邀請(qǐng)其他成員體驗(yàn)，但必須先把他們?cè)O(shè)置為體驗(yàn)者。
設(shè)置方式：公眾號(hào)登錄—>用戶(hù)身份->體驗(yàn)者->綁定
每個(gè)賬號(hào)可以綁定10個(gè)體驗(yàn)者。
體驗(yàn)者同意體驗(yàn)后可在其微信的發(fā)現(xiàn)->小程序里找到體驗(yàn)版本。
3 功能確認(rèn)
功能確認(rèn)就是確認(rèn)你的小程序到底要完成什么功能，為什么要單獨(dú)寫(xiě)這個(gè)呢？如果你的小程序功能不符合要求，那審核是過(guò)不了的。
4 框架介紹和小技巧分享
在學(xué)習(xí)小程序的框架前，需要學(xué)習(xí)一些JS,CSS 的知識(shí)。
- 網(wǎng)絡(luò)訪(fǎng)問(wèn)注意事項(xiàng)
---------小程序無(wú)法直連外部URL,就是外部頁(yè)面
---------訪(fǎng)問(wèn)服務(wù)器，比如API接口
訪(fǎng)問(wèn)服務(wù)器的API接口描述：https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html
注意：request 僅支持https的訪(fǎng)問(wèn)方式。另外，你訪(fǎng)問(wèn)的域名必須在公眾號(hào)賬號(hào)設(shè)置，否則調(diào)試代碼會(huì)報(bào)錯(cuò)。
request域名的設(shè)置方式： 公眾號(hào)->設(shè)置->開(kāi)發(fā)設(shè)置
域名每個(gè)月只能設(shè)置五次，謹(jǐn)慎修改。
修改域名之后務(wù)必到開(kāi)發(fā)工具的項(xiàng)目->配置信息中進(jìn)行刷新，這樣域名才能生效。
如果只是希望測(cè)試URL是否好用，不確定最終是否使用這個(gè)服務(wù)器，可以在開(kāi)發(fā)階段去掉域名檢測(cè)，開(kāi)發(fā)工具->項(xiàng)目：
- 布局引用
在使用.wxss描述控件的布局和樣式時(shí)，同樣的控件布局可以寫(xiě)在一個(gè)公用的wxss文件里，其他wxss可以再引用這個(gè)公用文件，比如：
@import "../../common/common.wxss";
- 主頁(yè)設(shè)置
主頁(yè)不需要特殊設(shè)置，在app.json的pages屬性里，排在第一個(gè)的就是主頁(yè)。下圖中的主頁(yè)就是index
"pages":[ "pages/index/index", "pages/components/identify/identify", "pages/components/dict/dict", "pages/components/express/express", "pages/components/general/general", "pages/components/mine/mine" ]
- Pages分類(lèi)管理
盡量每一個(gè)頁(yè)面放在一個(gè)子文件夾里，代碼看起來(lái)清晰。在下圖中，components下面有五個(gè)子頁(yè)面。
- 第 1 頁(yè)【小程序開(kāi)發(fā)】微信小程序怎么開(kāi)發(fā)
- 第 2 頁(yè)【小程序開(kāi)發(fā)教程】 微信小程序開(kāi)發(fā)步驟詳解
立即掃碼關(guān)注
咨詢(xún)電話(huà)：4006-089-731