零基礎入門小程式 & 實戰經驗分享
點選上方“程式人生”，選擇“置頂公眾號”
第一時間關注程式猿（媛）身邊的故事
講師介紹：連勝老師曾經就職於點心移動 & 百度，折騰小程式也有段時間了，參與開發的“小小簽到”小程式，在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');
}
},8.小程式如何判斷轉發到群還是好友
這個問題，要區分一下分享之前和分享之後就好辦了。
當小程式分享之前，小程式無法區分到底是分享給了好友，還是分享給了微信群。也就是說，你想在分享之前去做些事情，這是不可以的，做不到。
分享之後，有間接的辦法來知道小程式卡片分享的是好友還是群，先看一下截圖：
（重要通知小程式）
我們今天主要來說說，分享後是如何核對好友卡片和群卡片的。實現思路：通過場景值來判斷。
上圖是小程式官方給的場景值，已經對單人聊天會話和群聊天會話做了區分。
我們可以在 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（正式版）。
如果你公司的小程式產品比較多，又想把資料打通，這種方式是個不錯的選擇~
10.公用方法建議寫在 util.js 中
開發小程式過程中，大家都可能有自己的提取公用程式碼邏輯，我建議大家把公用方法放在 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往期內容