商城系統(tǒng) 注冊(cè)

微信小程序怎么開發(fā)

2018-05-22|HiShop
導(dǎo)讀：微信小程序開發(fā)教程為大家介紹小程序開發(fā)流程的步驟詳解，讓大家全方位了解小程序開發(fā)的流程步驟。...
微信小程序怎么開發(fā)
 
微信小程序開發(fā)教程為大家介紹小程序開發(fā)流程的步驟詳解，讓大家全方位了解小程序開發(fā)的流程步驟。

1 注冊(cè)   
注冊(cè)一個(gè)微信小程序公眾號(hào)，包括賬號(hào)注冊(cè)和管理員信息登記，管理員信息登記很重要，因?yàn)楣芾韱T才有權(quán)限發(fā)布小程序、設(shè)置開發(fā)版的體驗(yàn)用戶等。
請(qǐng)注意，公共號(hào)注冊(cè)時(shí)選擇小程序，不是通常認(rèn)為的公眾號(hào)。
  • 注冊(cè)地址：
https://mp.weixin.qq.com/
郵箱和密碼請(qǐng)?zhí)顚懳醋?cè)過(guò)公眾平臺(tái)、開放平臺(tái)、企業(yè)號(hào)、未綁定個(gè)人號(hào)的郵箱。
  • 填寫主體信息
郵箱激活之后，需要完善主體信息和管理員信息。
一般沒有企業(yè)注冊(cè)信息的，就選擇個(gè)人注冊(cè)賬號(hào)類型。
注意，個(gè)人賬號(hào)填寫管理員信息時(shí)，需要使用綁定了銀行卡且與注冊(cè)主體一致的微信掃描二維碼。
  • 填寫小程序基本信息
在小程序的公眾平臺(tái)的首頁(yè)，會(huì)看到基本信息的填寫
 
填寫基本信息時(shí)的服務(wù)類目很重要，即表示你的小程序支持哪些服務(wù)?；拘畔⑻顚懲瓿芍?，小程序的注冊(cè)工作就結(jié)束了。
 

2  開發(fā)工具及準(zhǔn)備工作
  • 獲取AppID
如果你要開發(fā)一個(gè)需要發(fā)布的小程序，在你的公眾號(hào)里找到設(shè)置->開發(fā)設(shè)置，找到AppID
  • 開發(fā)工具安裝
下載：登錄小程序公眾號(hào)之后，找到首頁(yè)，有開發(fā)工具下載，幫助文檔等。
  • 添加項(xiàng)目
下載安裝好開發(fā)工具，開始添加項(xiàng)目。

 
在AppID處填上你公眾號(hào)的AppID.
項(xià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顯示編譯完畢，但你的控件沒有完全顯示時(shí)，應(yīng)該是你電腦速度太慢，關(guān)掉工程，重新打開即可。
  • 調(diào)試
-------- 調(diào)試期間不要修改代碼。只能在編輯頁(yè)面修改，保存之后，需要重新調(diào)試。
-------- 調(diào)試支持?jǐn)帱c(diǎn)調(diào)試，Console可以直接寫代碼輔助調(diào)試，類似瀏覽器console的功能。
-------- 如果控件的布局總是調(diào)不好，最好直接在調(diào)試界面的Wxml里調(diào)試，可以清晰的看到調(diào)用了哪些class,每種class的哪些屬性在起作用。
  • 預(yù)覽
  管理員有預(yù)覽項(xiàng)目的功能，即在手機(jī)上看小程序的效果。
開發(fā)工具中找到“項(xiàng)目”一欄->預(yù)覽，然后拿微信掃描即可?？墒褂冒胄r(shí)。
微信上可以在"發(fā)現(xiàn)"->"小程序"中找到你的小程序開發(fā)版本。
  • 代碼上傳
代碼上傳之后可以邀請(qǐng)其他微信用戶體驗(yàn)，或者提交審核。
在開發(fā)工具中選擇選項(xiàng)->基礎(chǔ)信息->上傳  
  • 體驗(yàn)
代碼上傳之后，可以邀請(qǐng)其他成員體驗(yàn)，但必須先把他們?cè)O(shè)置為體驗(yàn)者。
設(shè)置方式：公眾號(hào)登錄—>用戶身份->體驗(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ú)寫這個(gè)呢？如果你的小程序功能不符合要求，那審核是過(guò)不了的。

4   框架介紹和小技巧分享
      在學(xué)習(xí)小程序的框架前，需要學(xué)習(xí)一些JS,CSS 的知識(shí)。
  • 網(wǎng)絡(luò)訪問(wèn)注意事項(xiàng)

---------小程序無(wú)法直連外部URL,就是外部頁(yè)面
---------訪問(wèn)服務(wù)器，比如API接口
訪問(wèn)服務(wù)器的API接口描述：https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html
注意：request 僅支持https的訪問(wèn)方式。另外，你訪問(wèn)的域名必須在公眾號(hào)賬號(hào)設(shè)置，否則調(diào)試代碼會(huì)報(bào)錯(cuò)。
request域名的設(shè)置方式： 公眾號(hào)->設(shè)置->開發(fā)設(shè)置 

 
域名每個(gè)月只能設(shè)置五次，謹(jǐn)慎修改。
修改域名之后務(wù)必到開發(fā)工具的項(xiàng)目->配置信息中進(jìn)行刷新，這樣域名才能生效。
如果只是希望測(cè)試URL是否好用，不確定最終是否使用這個(gè)服務(wù)器，可以在開發(fā)階段去掉域名檢測(cè)，開發(fā)工具->項(xiàng)目：
  • 布局引用
在使用.wxss描述控件的布局和樣式時(shí)，同樣的控件布局可以寫在一個(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分類管理
盡量每一個(gè)頁(yè)面放在一個(gè)子文件夾里，代碼看起來(lái)清晰。在下圖中，components下面有五個(gè)子頁(yè)面。
電話咨詢 預(yù)約演示 0元開店