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