點擊上方「程序人生」，選擇「置頂公眾號」
第一時間關注程序猿（媛）身邊的故事
講師介紹：連勝老師曾經就職於點心移動 & 百度，折騰小程序也有段時間了，參與開發的「小小籤到」小程序，在2017年榮獲阿拉丁神燈獎。我公司開發了多個工具類小程序，已有四款小程序的用戶超百萬，歡迎各位小程序開發者一起交流學習~
內容總結：本文主要分享小程序開發入門，以及我在開發中踩過的一些坑。希望通過本篇文章的分享，能讓更多的小程序入門者少走彎路。
一、如何註冊一個小程序第一種方式，直接去官網註冊。
官方註冊地址：https://mp.weixin.qq.com/，點擊右上角的「立即註冊」。
然後選擇「小程序」：
接下來，填寫小程序的註冊信息，這裡我就不詳細說了，根據自己的需要選擇小程序類型是「個人」，或者「企業」（企業用戶需要填寫認證信息）：
填寫完信息之後，直接提交審核，微信團隊會有個審核過程，然後給你反饋審核結果。
第二種方式，去公眾號後臺，小程序管理裡面註冊。
其步驟包括：登錄已有公眾號後臺 -> 小程序管理 -> 添加 -> 快速註冊並認證小程序。
這種方式註冊的小程序，如果你的公眾號已經認證過了，小程序的認證是可以復用公眾號的認證的。微信的認證是按次收費，所以，用這種方式註冊，可以省下一部分費用支付。
注意：個人類型的小程序，有部分權限是沒有的，比如獲取微信用戶綁定的手機號碼，微信支付功能，微信卡券功能都必須是企業類型的小程序才有權限。
並且小程序目前也沒辦法更換主體，因此，建議大家註冊之前小程序類型不要選擇錯了。
主要有以下幾種宣傳方式：
小程序搜索入口 & 附近的小程序；
已使用過、已星標置頂的小程序；
掃一掃、長按識別小程序碼；
好友、群分享的小程序卡片；
已關聯小程序的公眾號菜單或文章；
第三方小程序應用商店；
小程序之間互相跳轉；
群聊中發送過的小程序卡片。
以上幾種方式是小程序主流的宣傳方式，後續還可能會有新的形式出現，比如，近期小程序又出了個「功能直達」的內測，部分優秀的小程序已經獲得了內測資格，其中我參與開發的小程序，有四款已經獲取內測資格。
功能直達樣式如下（感覺百度的直達號看到這功能後，會哭暈）：
三、小程序開發工具講解工欲善其事，必先利其器。微信官方提供了專門的小程序開發工具，即「微信開發者工具」，經過不斷的版本更新，此工具目前已經比2017年剛發布時，好用多了。
點擊這裡，下載微信開發者工具：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html。
我來簡單介紹一下微信開發者工具。
首先進行下載，安裝這裡就不說了，安裝完成之後，直接打開，會出現如下界面：
掃碼之後會出現小程序 & 公眾號網頁開發兩個選項：
也就是說，微信開發者工具，是可以用來開發小程序、公眾號網頁以及小遊戲的一款工具。
你可以新建一個小程序項目：
這裡我就直接直接從已有項目列表中，打開了一個，如下：
圖中①區域主要是切換②和④區域時用到，我這裡定義為「功能切換區」；
圖中②區域是「模擬器區域」，這裡是對小程序的預覽展示效果；
圖中③區域是一些常用操作，我給定義為「屬性操作區域」；
圖中④區域是「編輯器區域」，分為左邊「代碼結構」 & 右邊「代碼編寫區」。這裡可以通過①區切換為「調試器」，如下：
我這裡要特別說明一下，③區域最右側的「詳情」按鈕，點開之後，如下圖所示：
下方的「項目設置」，有四個複選框，新入門的同學，請一定不要勾選最下方的「不校驗安全域名」這個選項。因為在我的小程序開發群裡，已經有多位同學在這兒踩過坑，表現為，體驗版本的小程序數據都正常展示，上線後發現所有數據都不展示了。這就是因為域名沒有做 TLS/SSL 認證，關於小程序入門的一些注意點兒，歡迎查看這篇文章：微信小程序開發-常見問題。
上圖中紅框部分為調試基礎版本，開發者可根據自己需要，選擇相應的小程序版本，方便自己查看代碼在不同版本下的運行效果~
四、編寫一個簡單小程序1.WXSS 單位建議用 rpx。
官方推薦單位用 rpx，默認屏幕寬度是 750rpx，以 iPhone6 手機為基準進行設計的。
750 = 375 * 2，然後其他屏幕尺寸時，小程序會自動進行縮放。
之前做過移動端開發的同學肯定也用過 640px 的設計稿，640 = 320 * 2，320px 是 iPhone4、4S、5、5S 的實際網頁寬度，375px 是iPhone6、6S的實際網頁寬度。移動端適配方案這裡就不詳細說了，在小程序內只需要用 rpx 做單位即可。
2.wxml 組件只能用官方組件。
官方組件地址，請訪問：https://mp.weixin.qq.com/debug/wxadoc/dev/component/。
小程序中，不能使用 div、p、ul、h1 這樣的標籤，只能使用官方組件，並且所有組件都必須成對存在，或者單閉合形式存在，否則會報錯。
編寫代碼部分，這裡不詳細說，大家可以查看我開發的一個「重要通知」小程序：
代碼提交，從開發工具中提交即可，如下圖所示：
設置體驗版本和發布上線都需要登錄小程序後臺，地址為：https://mp.weixin.qq.com/
和公眾號共用同一個地址，用戶名和密碼是註冊小程序時填寫的，登錄後臺之後，有這幾個地方需要注意.
1.把某個開發者的代碼設置為體驗版本。
2.添加體驗者權限。
3.提交審核、發布上線、撤回等操作。
4.告警群設置。
小程序後臺可以查看所有錯誤信息，但是，為了方便第一時間了解錯誤報警，建議使用官方「客戶端告警群」，如上圖。告警的閥值，可以自己設置。
以上講的都是皮毛，為了讓大家更多的了解小程序該如何做，我這裡列出幾個常見的技術問題，希望對大家有幫助。
1.小程序登錄邏輯的實現小程序登錄的實現，官方建議自己保存用戶登錄狀態，不要頻繁調用 wx.login，否則會限制登錄。
這裡說一下我自己實現登錄的邏輯，無代碼，實現邏輯看下圖：
2.小程序返回首頁的實現這裡說個返回首頁的場景，比如首頁可以點擊 button 進入詳情頁（wx.navigateTo），詳情頁此時再回首頁，可以直接 wx.navigateBack 即可。
如果詳情頁面允許分享，用戶就可能直接通過分享出去的小程序卡片進入詳情頁，此時，回首頁的邏輯就與上面說的不同了，必須再重新打開首頁。詳細請看下方代碼。
頁面互相跳轉的邏輯，儘量設計簡單一些，否則的話，很坑人。比如，A 頁可以跳至 B 頁面，B 頁面又可以跳至 C 頁面，B 和 C 頁面都允許分享，此時，從 C 頁面返回 B 頁面的邏輯就比上面的要複雜。
3.防止用戶多次點擊比如用戶提交表單數據，點擊 submit 按鈕，需要調用保存數據的 API，如果不做誤點擊處理，用戶可能會多次點擊 submit，這樣就會保存冗餘數據。
可以提取公用方法到 util.js 中，如下：
WXML：
JavaScript：
500毫秒以內的點擊都只會處理一次，時間長短自己可以調整。
4.小程序之間如何傳值（1）URL 傳值
這種方式最常用，比如：
wx.navigateTo({
url: '../detail/detail?id='+id+'&access_token='+access_token})
這裡面直接通過跳轉頁面的 URL 進行傳值，然後在另一個頁面進行接收：
onLoad: function (opt) {
console.log('cid =' + opt.cid); console.log('access_token =' + opt.access_token);}
這種傳值方式只適合值比較少的時候使用，傳值比較多的時候，還是建議寫本地緩存。
（2）本地緩存
小程序 API 提供了本地緩存數據的 API，默認可以緩存10M的數據，如下：
wx.setStorageSync('testData', testData);
testData 可以是一個 object，在需要的頁面直接調用 wx.getStorageSync 即可獲取，這樣就解決了傳值較少的問題了。
（3）全局 App
其實還有第三種方式，就是全局 App 變量。app.js 和 app.wxss 中的代碼都是全局生效的，所以我們可以利用這一點兒，在不同頁面之間進行傳值。
App({
onLaunch: function () { },
globalData: {
host: 'https://xxx.com', }})
也可以在其他 JavaScript 裡面動態修改 globalData，如 getApp().globalData.host = 'XXX';。
5.獲取小程序表單數據做過小程序的同學，都知道小程序中是通過數據渲染頁面的，沒辦法獲取 Dom 節點，表單提交就不能像 H5 頁面那樣去獲取表單項的見容了。
小程序中的表單提交必須用戶手動觸發，不能通過 JavaScript 自動提交。
獲取表單數據有兩種方式。
（1）獲取 event 中的值。
正常的 form 表單提交，都可以在 event.detail.value 中獲取到頁面表單項填寫的值，如下：
這裡需要在 WXML 中的，把 input、textarea、radio 等表單項設置 name 屬性，上圖中的 title，就是 input 的 name 屬性。
<input type="text" name="title" auto-focus='true' />
這種方式獲取表單數據很方便，但是，如果需要對表單數據有清除功能，我們該如何實現呢？如下圖所示。
我們先來看看第二種方式。
（2）通過設置變量值保存表單數據。
這種方式也比較好實現，就是給表單項綁定事件，當內容發生變化時，set 一下變量值。所以，提交表單的時候直接獲取變量值就 OK 了。
<input type="text" bindinput="inputTitle" name="title" value="{{title}}" auto-focus='true' />
可以給 input 綁定事件 (bindinput="inputTitle")，然後在 inputTitle 裡面簡單處理一下：
inputTitle: function (e) {
this.setData({
title: e.detail.value,
titleEmpty: e.detail.value.length == 0 })},
上面的 titleEmpty 是為了判斷 title 是否為空，如果為空，就不顯示右側的「清除 icon」。這種方式很容易實現上面說的清空內容。
在 form 的 submit 時，直接 var title = this.data.title; 就獲取到了表單數據，很方便。
6.如何獲取更多的 formId相信使用過小程序的同學，多少都收到過小程序的通過消息，如下：
這類通知消息，是和好友消息一樣展示在微信的聊天列表中，所以，點擊率還是比較高的。想實現這種小程序的模板消息，就必須要獲取用戶的 formid 才可以（如何發消息，請仔細查閱小程序官方文檔: https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html）。
我們來說一下如何獲取 formId：
必須通過 form 組件提交才能獲取到 formId；
給 form 組件設置 report-submit="true" 屬性；
給 form 組件添加 bindsubmit 事件綁定，攜帶 form 中的數據觸發 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}； 4.必須用戶手動觸發提交表單，不能 JavaScript 模擬提交，所以，頁面上必須要有提交按鈕。
看一下示例代碼：
<form report-submit='true' bindsubmit='userSubmit'><button class='button' bindtap='copy' form-type='submit'>複製</button></form>
以上示例就可以在 userSubmit 裡獲取到 formId 了：
userSubmit: function (e) {
console.log(e.detail.formId);},
需要注意一點，開發工具裡面是沒辦法查看到真實的 formId 的，會是這樣一句提示：「the formId is a mock one」，提交給服務端就可以拿到了。
7.小程序頁面跳轉後的刷新邏輯場景是這樣，用戶從列表 A 頁面跳至 B 頁面，並在 B 頁面做了更新操作（編輯或刪除信息），當用戶再 back 到 A 頁面時，需要對 A 頁面的數據進行刷新；如果用戶未做更新操作，back 回 A 頁面後，就不需要對 A 頁面數據刷新。
我們可以在 B 頁面操作時，寫入一個數據在本地，如下代碼：
formSubmit: function(){ // 操作之後，本地緩存一個值 util.setStorage('needRefresh', true);},
返回 A 頁面時，再到 page 的 onShow 方法中去判斷一下就 OK。
onShow: function(){
var needRefresh = util.getStorage('needRefresh');
if(needRefresh){ // 這裡寫入你的刷新邏輯 . util.removeStorage('needRefresh'); }},
這個問題，要區分一下分享之前和分享之後就好辦了。
當小程序分享之前，小程序無法區分到底是分享給了好友，還是分享給了微信群。也就是說，你想在分享之前去做些事情，這是不可以的，做不到。
分享之後，有間接的辦法來知道小程序卡片分享的是好友還是群，先看一下截圖：
（重要通知小程序）
我們今天主要來說說，分享後是如何核對好友卡片和群卡片的。實現思路：通過場景值來判斷。
上圖是小程序官方給的場景值，已經對單人聊天會話和群聊天會話做了區分。
我們可以在 app.js 裡面的 onLaunch 方法或者 onShow 方法獲取到場景值：
拿到值之後，你可以保存全局變量，或者寫入本地緩存，在相應的 page.js 裡面去做判斷，如果是群聊，顯示群聊界面，如果是私聊，顯示私聊界面。
上面只說了如何區分群聊還是私聊，那麼僅限某個群可見這功能又如何實現呢？
思路是：分享小程序卡片之後，獲取到群 id，當群用戶點擊群內小程序卡片時，也會獲取一個群 id，這兩個群 id 相同，則表明是同一個群；沒有獲取到群 id，表明不是從群聊中打開小程序卡片；兩個群 id 不同，則表明不是同一個群。
上面已經說了，有兩種場景可以獲取群 id。
第一，小程序卡片分享到群聊中。分享完成之後，有個分享成功的回調方法，可以在此方法中獲取到 shareTickets：
拿到 shareTickets 之後，可以調用 wx.getShareInfo，獲取解密 gid 會用到的向量和加密值，傳給服務端進行解密（小程序中所有的解密操作，都放在服務端進行）。
註：上面成功回調時，res.shareTickets 是個 list，因為分享給好友和群的時候，可以多選，最多選9項。
第二，從群聊中打開小程序卡片時。從群中打開小程序卡片，會在 app.js 裡面的 onLaunch 方法和 onShow 方法中獲取到 shareTickets。
拿到 shareTickets 之後，去服務端解密。
相信大家也有看到過，有些小程序做了群排行榜功能。實現方式，也是同樣的道理。
9. 小程序之間互相跳轉的注意點兒小程序之間互相跳轉，使用 wx.navigateToMiniProgram 來實現，官方文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/api/navigateToMiniProgram.html。
上面有一句話，要注意：打開同一公眾號下關聯的另一個小程序。如果沒有關聯同一個公眾號，則無法成功打開另一小程序。
（1）公眾號關聯小程序。
公眾號關聯小程序後，將可在圖文消息、自定義菜單、模板消息等功能中使用小程序。
關聯規則如下：
所有公眾號都可以關聯小程序。
一個公眾號可關聯10個同主體的小程序，3個不同主體的小程序。
一個小程序可關聯3個公眾號。
公眾號一個月可新增關聯小程序13次，小程序一個月可新增關聯5次。
關聯流程如下：
登錄公眾號後臺 -> 小程序 -> 小程序管理 -> 添加 -> 關聯小程序。
如果你已經關聯成功，那就可以看一下代碼的實現了，如下：
if (wx.navigateToMiniProgram) { wx.navigateToMiniProgram({ appId: recommend.appid, path: '/pages/detail/detail?cid=' + cid })} else { wx.previewImage({ urls: [recommend.qrcode], })}
wx.navigateToMiniProgram，從基礎庫 1.3.0 開始支持，低版本需做兼容處理。低版本時，我們就直接給用戶顯示一張帶二維碼的圖片，告知用戶需要升級微信版本，或者掃描二維碼才能進入。
測試的時候，需要跳到另一個小程序的體驗版，可以設置 envVersion 參數：develop（開發版），trial（體驗版），release（正式版）。
如果你公司的小程序產品比較多，又想把數據打通，這種方式是個不錯的選擇~
開發小程序過程中，大家都可能有自己的提取公用代碼邏輯，我建議大家把公用方法放在 util.js 中。
app.js 中主要獲取 options 參數時用，比如識別小程序碼，需要獲取 scene 參數；從群聊中打開小程序卡片，你可以獲取 shareTickets 參數；小程序之間互相跳轉，你可以獲取到 appid 等參數。
部分 util.js 方法如下：
function postFormId(formId) { wx.request({ url: getApp().globalData.host + '/v1/formid', data: { 'formid': formId, 'access_token': getToken() }, method: 'POST' })}
function toIndex() {
var pageCount = getCurrentPages().length;
if (pageCount > 1) { wx.navigateBack({ delta: 1 }) } else { wx.redirectTo({ url: '../index/index' }) }}
function buttonClicked(self) {
self.setData({ buttonClicked: true }) setTimeout(function () {
self.setData({ buttonClicked: false }) }, 500)}
function getStorage(key){
try{ wx.getStorageSync(key); } catch(e) { getStorage(key); }}
小程序開發過程中，問題肯定不止這幾個，實在是太多，這裡只是列出幾個常見問題，歡迎各位和我一起來討論技術問題，或者交流一下在小程序開發過程中踩過的坑。
本次文章分享到此結束，希望對大家入門小程序有幫助。文章，如有錯誤的地方，希望各位同學幫忙指正~
如果你有好的原創文章想與大家分享，歡迎投稿。
徵稿要求：
①稿件字數以800~1500字左右為宜，多於2000字的文章在手機上閱讀起來比較麻煩，少於800字的文章看起來不過癮；
②你有自己拍的適合做文章插圖的照片也可一併附上~如果不方便，程序和小七也會幫你配圖~
加程序人生編輯們的微信，備註#投稿#：
程序 微信ID：druidlost
小七 微信ID：duoshangshuang
點擊圖片get往期內容