我把自己做小程序的過程稍作總結(jié)犹撒，還有一些實用技巧分享給大家笔时。對初學者應該有用。
文中提到的登錄微信公眾號后的功能棕叫，都是下圖中的其中一個：
文中提到的所有例子都在智能對話小程序里都有使用林螃，代碼詳細解析見帖子 個人小程序?qū)崿F(xiàn)自然語言對話工程查詢完整代碼解析
1 注冊 注冊一個微信小程序公眾號，包括賬號注冊和管理員信息登記俺泣，管理員信息登記很重要疗认，因為管理員才有權(quán)限發(fā)布小程序、設置開發(fā)版的體驗用戶等砌滞。
請注意侮邀，公共號注冊時選擇小程序，不是通常認為的公眾號贝润。
注冊地址：
https://mp.weixin.qq.com/
郵箱和密碼請?zhí)顚懳醋赃^公眾平臺、開放平臺铝宵、企業(yè)號打掘、未綁定個人號的郵箱。
填寫主體信息
郵箱激活之后鹏秋，需要完善主體信息和管理員信息尊蚁。
一般沒有企業(yè)注冊信息的，就選擇個人注冊賬號類型侣夷。
注意横朋，個人賬號填寫管理員信息時，需要使用綁定了銀行卡且與注冊主體一致的微信掃描二維碼百拓。如下圖所示：
填寫小程序基本信息
在小程序的公眾平臺的首頁琴锭，會看到基本信息的填寫晰甚，如下圖：
填寫基本信息時的服務類目很重要，即表示你的小程序支持哪些服務决帖〔蘧牛基本信息填寫完成之后，小程序的注冊工作就結(jié)束了地回。
2 開發(fā)工具及準備工作獲取AppID
如果你要開發(fā)一個需要發(fā)布的小程序扁远，在你的公眾號里找到設置->開發(fā)設置，找到AppID
開發(fā)工具安裝
下載：登錄小程序公眾號之后刻像，找到首頁畅买，有開發(fā)工具下載，幫助文檔等细睡。
添加項目
下載安裝好開發(fā)工具谷羞，開始添加項目。
在AppID處填上你公眾號的AppID.
項目名稱隨便填纹冤。
項目目錄可以直接指向Demo地址洒宝，也可以指向一個空的文件夾（可以選擇quick start項目）。
代碼編譯
編譯選項使用默認設置即可萌京，每次保存之后會自動編譯雁歌。當你的控件正常顯示之后，表示編譯結(jié)束知残。當然靠瞎，也可以查看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ā)工具中找到“項目”一欄->預覽跪者，然后拿微信掃描即可棵帽。可使用半小時坑夯。
微信上可以在"發(fā)現(xiàn)"->"小程序"中找到你的小程序開發(fā)版本岖寞。
代碼上傳
代碼上傳之后可以邀請其他微信用戶體驗，或者提交審核柜蜈。
在開發(fā)工具中選擇選項->基礎信息->上傳
體驗
代碼上傳之后仗谆，可以邀請其他成員體驗，但必須先把他們設置為體驗者淑履。
設置方式：公眾號登錄—>用戶身份->體驗者->綁定
每個賬號可以綁定10個體驗者隶垮。
體驗者同意體驗后可在其微信的發(fā)現(xiàn)->小程序里找到體驗版本。
3 功能確認功能確認就是確認你的小程序到底要完成什么功能秘噪，為什么要單獨寫這個呢狸吞？如果你的小程序功能不符合要求，那審核是過不了的指煎。
下面幾項要重點閱讀：
個人小程序允許開發(fā)的項目類別（請翻到頁面下部）
微信小程序平臺常見拒絕情形
審核規(guī)范
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下面有五個子頁面。
列表渲染
當同一個View中需要放多個格式相同的控件時胧沫，盡量使用列表渲染的方式昌简，代碼容易維護，樣式也美觀绒怨。
可以參考博客：
http://blog.csdn.net/huangmeimao/article/details/76038974
圖片格式
1 微信小程序中使用的圖片size盡量要小纯赎，格式為.png.
可以在網(wǎng)上找在線格式轉(zhuǎn)換工具或者圖片縮小工具修改圖片。
圖片過大會影響代碼審核和小程序工作效率南蹂，尤其是加載犬金。
背景圖設置
背景圖即某個VIEW的背景圖片，比如滾動圖六剥，目前僅支持url方式的圖片晚顷。
詳見博客：http://blog.csdn.net/huangmeimao/article/details/75513508
當然，你在開發(fā)工具中調(diào)試時疗疟，本地圖片做背景圖也是可以的该默，但是手機上預覽會看不到圖片。
提供圖片存儲的服務器有很多秃嗜，自己找個地方存好权均，獲取URL就可以了。比如CSDN锅锨，七牛叽赊。
布局控件自適應
自適應就是你的布局不管在什么手機上都能顯示，布局隨手機屏幕大小進行縮小和放大必搞。
只要把所有的尺寸相關單位修改為rpx即可必指，有時候你下載的Demo可能有其他尺寸單位，比如px,rem.
轉(zhuǎn)換公式：
1px=2rpx
1rem約等于35rpx
標題欄恕洲、導航欄塔橡、狀態(tài)欄、窗口
它們的格式在app.json的windows里設置霜第，比如：
"window":{ "backgroundColor":"#f4f4f4", "backgroundTextStyle":"light", "navigationBarBackgroundColor":"#FF5722", "navigationBarTitleText": "智能生活寶", "navigationBarTextStyle":"#FFFFFF" },詳細說明見：
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html
除了windows里定義的屬性葛家，其他的格式是不可以修改的。
比如泌类，標題欄中有無回退鍵癞谒，關閉鍵等。
----------導航欄可以通過tabBar設置多個導航，但僅可以指定頁面弹砚、圖標双仍，字體等。位置什么的就不要考慮了桌吃。最少配置2個朱沃，最多配置五個。
比如下面配置了頁面和幫助兩個導航欄：
"tabBar":{ "color": "#959394", "selectedColor":"#959394", "backgroundColor":"#f0f0f0", "borderStyle": "white", "list": [ { "pagePath":"pages/index/index", "iconPath":"pages/images/home_b.png", "selectedIconPath":"pages/images/home.png", "text": "首頁" }, { "pagePath":"pages/components/mine/mine", "iconPath":"pages/images/mine_b.png", "selectedIconPath":"pages/images/mine.png", "text": "幫助" } ] },效果圖如下：
圖片導航到頁面
可以給圖片或者圖片所在的View設置事件茅诱，比如bindtap,然后在事件處理函數(shù)里調(diào)用設置導航的API函數(shù)：
wx.navigateTo({
url:"../components/general/general?code=menu"
})
“?”后面是提供給頁面的參數(shù)名稱和值逗物。
詳細介紹見：https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui.html
多個頁面功能相似時的處理
當多個頁面的布局相同，處理方式也相同让簿，只是要處理的數(shù)據(jù)不同時敬察，就可以僅寫一個公共頁面，其他控件導入頁面時尔当，通過傳入不同的參數(shù)進行區(qū)分莲祸。
wx.navigateTo({
url:"../components/general/general?code=menu"
})
比如，上面在導航時椭迎，傳入的參數(shù)code指明是menu 類型锐帜。
詳細可參考博客：http://blog.csdn.net/huangmeimao/article/details/76418753
里面提供的代碼中general頁面就是一個公共頁面。
圖片和文字等多個空間同時觸發(fā)一個事件
如果你希望再同一個View中的圖片和文字或者其他控件觸摸時都觸發(fā)同一個事件畜号，直接把這個事件放在view的配置里缴阎。
Text/textarea 焦點控制
Text/textarea控件僅用來顯示數(shù)據(jù)時，要關掉自動聚焦简软，否則你所在頁面時蛮拔，點擊控件就會自動彈出鍵盤。
屬性auto-focus不設置或者值為 false即可痹升。
文本滾動
若需要顯示的文本內(nèi)容大于文本框建炫，能夠自動出現(xiàn)滾動條，而不是放大文本框疼蛾。
參考博客：
http://blog.csdn.net/huangmeimao/article/details/76408327
表格制作
參考博客：http://blog.csdn.net/huangmeimao/article/details/76038974
Input控件輸入文字清空
請參考博客：http://blog.csdn.net/huangmeimao/article/details/74936966
5 模板下載和使用剛開始可以去網(wǎng)上找一些免費的Demo學習一下肛跌，事半功倍。
6 發(fā)布當你確定你的小程序沒有什么問題了察郁，至少功能完善衍慎，沒有嚴重bug.
可以開始發(fā)布。
上傳代碼
發(fā)布之前必須先上傳代碼皮钠，上傳方式請參考第2節(jié)稳捆。
提交審核
登錄微信公眾平臺->開發(fā)管理
圖中開發(fā)版本即你最后一次上傳的版本，點擊“提交審核”之后麦轰，就會在審核版本中看到眷柔。一般個人審核需要1到3天吧期虾，反正我的最長是3天，且中間有周末驯嘱。最短的不到兩小時。
提交審核后喳坠，若還沒有進入審核系統(tǒng)鞠评，可以撤回審核。
審核通過后你會在管理員微信收到審核通過通知壕鹉，當然微信公眾號也可以查詢剃幌。
審核通過后，需要你登錄微信公眾號手動點擊發(fā)布晾浴，才會再線上版本中顯示负乡，這時用戶就可以使用了。
7 推廣登錄微信公眾號->推廣->修改關鍵詞
每個人可以寫10個關鍵詞脊凰，以便用戶在搜索公眾號時可以搜到你的小程序
二維碼
分享你的二維碼圖給用戶
登錄微信公眾號->設置,下載二維碼
通過公眾號關聯(lián)
如果你有其他公眾號抖棘，也可以在其他公眾號里關聯(lián)你的小程序。
8 數(shù)據(jù)查看 登錄微信公眾號->數(shù)據(jù)分析狸涌，可以看到小程序各頁面的訪問情況和人數(shù)切省，轉(zhuǎn)載等信息。
轉(zhuǎn)載于：微信小程序聯(lián)盟簽約博主 黃眉毛
