一靴姿、開發(fā)環(huán)境

1.成為微信公眾平臺開發(fā)者

成為微信公眾平臺的開發(fā)者，是小程序開發(fā)的首要條件琢歇。只有成為微信公眾平臺的開發(fā)者焚碌，才可以使用公眾平臺的各種開發(fā)接口。如果你已經(jīng)是開發(fā)者霸妹，則可以跳過本章十电。

(1) 進(jìn)入微信公眾平臺官網(wǎng)（mp.weixin.qq.com）點擊右上角的“立即注冊”按鈕
（2）選擇“小程序”。
（3）請?zhí)顚懳醋赃^公眾平臺、開放平臺鹃骂、企業(yè)號台盯、未綁定個人號的郵箱。
（4）登錄郵箱畏线，查收激活郵件静盅，點擊激活鏈接。
（5）選擇主體類型選擇寝殴，完善主體信息和管理員信息蒿叠。
（6）完成注冊后，在微信公眾平臺官網(wǎng)首頁（mp.weixin.qq.com）的登錄入口直接登錄蚣常。
（7）選擇通過微信認(rèn)證驗證主體身份的用戶市咽，需先完成微信認(rèn)證后，才可以補充小程序名稱信息抵蚊，上傳小程序頭像施绎，填寫小程序介紹并選擇服務(wù)范圍。
（8）登錄微信公眾平臺小程序贞绳，進(jìn)入用戶身份- 開發(fā)者谷醉，新增綁定開發(fā)者。

• 個人主體小程序最多可綁定5個開發(fā)者冈闭，10個體驗者俱尼。
• 未認(rèn)證的組織類型小程序最多可綁定10個開發(fā)者，20個體驗者拒秘。
• 已認(rèn)證的小程序最多可綁定20個開發(fā)者号显，40個體驗者。

image

2.獲取AppID

進(jìn)入“設(shè)置-開發(fā)設(shè)置”躺酒，獲取AppID信息押蚤。

image

3.下載并安裝開發(fā)者工具

登錄微信小程序官網(wǎng)下載對應(yīng)的版本：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

4.登錄

開發(fā)者工具使用管理員或者綁定的開發(fā)者微信號掃碼登錄。

二羹应、技術(shù)選型

目前主流3種開發(fā)方式：wepy 揽碘、mpvue 、小程序原生開發(fā)

開發(fā)文檔以及介紹：

• 原生開發(fā)小程序文檔：點此進(jìn)入
• wepy 開發(fā)文檔：點此進(jìn)入
• mpvue 開發(fā)文檔：點此進(jìn)入

三者的簡單對比

image

個人選擇mpvue作為開發(fā)方式

原因：原生小程序開發(fā)ide太難用园匹；wepy相對于vue開發(fā)還有很多不一樣的地方雳刺；mpvue最吸引人的地方是代碼的移植性，一套代碼寫的好就可以在h5項目和小程序中通用裸违，并且潛力很大掖桦。

mpvue主要特性

• 徹底的組件化開發(fā)能力：提高代碼
• 完整的 Vue.js 開發(fā)體驗
• 方便的 數(shù)據(jù)管理方案：方便構(gòu)建復(fù)雜應(yīng)用
• 快捷的webpack 構(gòu)建機制：自定義構(gòu)建策略、開發(fā)階段 hotReload
• 支持使用 npm 外部依賴
• 使用 Vue.js命令行工具 vue-cli 快速初始化項目
• H5 代碼轉(zhuǎn)換編譯成小程序目標(biāo)代碼的能力

三供汛、小程序運營功能

1.API實現(xiàn)相關(guān):

onShareAppMessage

• 小程序如果想對外分享枪汪，必須在page里面定義onShareAppMessage函數(shù)涌穆，來配置頁面分享轉(zhuǎn)發(fā)相關(guān)的信息。
• 只有定義了此事件處理函數(shù)雀久，右上角菜單才會顯示 “轉(zhuǎn)發(fā)” 按鈕
• 用戶點擊轉(zhuǎn)發(fā)按鈕的時候會調(diào)用
• 此事件需要 return 一個 Object宿稀，用于自定義轉(zhuǎn)發(fā)內(nèi)容
• 一個頁面可能會有多個分享，可以由插入的參數(shù)options來判斷具體是由哪個位置進(jìn)行分享赖捌，從而做不同的邏輯判斷祝沸。

• return對象的返回函數(shù)：

  
  
  image
• 如果定義了該事件，又不想通過頁面menu轉(zhuǎn)發(fā)越庇，可以通過hideShareMenu來隱藏掉
  注意事項：
• 轉(zhuǎn)發(fā)后不添加imageUrl的話罩锐，將截圖作為轉(zhuǎn)發(fā)的默認(rèn)圖片。
• from 字段可以通過在轉(zhuǎn)發(fā)成功后調(diào)取的 success悦荒、complete 來進(jìn)行對 menu 和 button 的不同操作
• 如果有攜帶 shareTicket 值唯欣，會在 success 回調(diào)產(chǎn)生，返回結(jié)果在 shareTickets 字段中搬味，是一個數(shù)組境氢，可以做一定處理

wx.showShareMenu

一般是用來配置相關(guān)的參數(shù)，常見的如withShareTicket碰纬，用它來獲取群信息萍聊，群的相關(guān)標(biāo)示。

wx.showShareMenu({  withShareTicket: true})

wx.hideShareMenu

隱藏menu級別的轉(zhuǎn)發(fā)功能悦析，但是button中還存在著轉(zhuǎn)發(fā)寿桨。

如果先設(shè)置 showShareMenu ，并且配置了 withShareTicket强戴，再用 hideShareMenu 方法亭螟，通過按鈕轉(zhuǎn)發(fā)，照樣能獲取 shareTicket骑歹，如下：

wx.showShareMenu({  withShareTicket: true})wx.hideShareMenu({})

wx.updateShareMenu

更新shareMenu信息需要用update操作哦预烙，這里需要注意下，一般都是會更新withShareTicket屬性道媚。

wx.getShareInfo

在拿到了shareTicket信息后扁掸，可以由此API獲取轉(zhuǎn)發(fā)詳細(xì)信息

wx.getShareInfo({    shareTicket: res.shareTickets[0],    success: ...    fail: ...})

相關(guān)回調(diào)的參數(shù)

{    errMsg: "getShareInfo:ok",     iv: "gRHeFU+Nhr36RmladCXnRQ==",     encryptedData: "IQ/RwZLeQFUGuxv0bBfOrL/KLnXO+bxcyCBru5lB92FkHIg8ae…7TnHwU+rqgerFKvpvS5JbFyh+9liUqyb2bk6/LETYQ+h/FQ=="}

由iv和encryptedData進(jìn)行解密，可以拿到openGId的值最域。為當(dāng)前群對當(dāng)前小程序的唯一值谴分。額外還可以拿到群名稱等更多的開放數(shù)據(jù)。

button轉(zhuǎn)發(fā)

頁面內(nèi)需要轉(zhuǎn)發(fā)時镀脂，需要給button組件設(shè)置open-type="share"牺蹄，并在觸發(fā)的地方判斷來源。

獲取分享鏈接流程

在小程序中薄翅，獲取openGId主要有兩種途徑钞馁，也一般圍繞著兩種途徑做分享相關(guān)的開發(fā)：

• 當(dāng)用戶打開withShareTicket的卡片時虑省，可以在onLauch或者getShareInfo中獲取加密信息，并且傳給服務(wù)端獲得openGId僧凰。

• 當(dāng)用戶分享成功后，會在回調(diào)里收到一個shareTicket熟丸，然后通過getShareInfo來獲得加密信息训措，獲得openGId。

2.小程序 分享 個人：

實現(xiàn)路徑清晰光羞，獲取openGId需要服務(wù)端支持绩鸣。

• 小程序測試版不能分享
• 小程序賬號必須和app微信分享賬號綁定

3.小程序 分享 朋友圈：

小程序無法直接分享到朋友圈，是沒有api接口的Ｉ炊摇Ｑ轿拧！

間接的方法是分享二維碼到朋友圈

1. 通過微信api申請小程序二維碼
   獲取小程序二維碼接口文檔

2. 下載二維碼到服務(wù)器并返回url

3. 小程序接收url并從服務(wù)器下載圖片

   wx.downloadFile

4. 小程序?qū)⑾螺d好的圖片保存至用戶相冊

   wx.saveImageToPhotosAlbum

4.app 分享 小程序：

實現(xiàn)路徑清晰
《微信官方文檔》

5.app和小程序互相跳轉(zhuǎn)：

• 1潜慎、App主動發(fā)起小程序卡片分享到微信捡多，微信點擊打開小程序，這時的小程序可以打開App
• 2铐炫、App主動發(fā)起打開小程序垒手，這時的小程序可以打開App
  App主動打開小程序（微信官網(wǎng)）：
  小程序返回App（微信官網(wǎng)）

6.公眾號和小程序互相跳轉(zhuǎn)：

可以跳轉(zhuǎn)，但是必須把公眾號和小程序關(guān)聯(lián)

• 可關(guān)聯(lián)已有的小程序或快速創(chuàng)建小程序倒信。已關(guān)聯(lián)的小程序可被使用在自定義菜單和模版消息等場景中科贬。
• 公眾號可關(guān)聯(lián)同主體的10個小程序及不同主體的3個小程序。同一個小程序可關(guān)聯(lián)最多50個公眾號鳖悠。
• 公眾號跳小程序 ：比如說 “豐巢快遞柜” 公眾號關(guān)聯(lián)的小程序：豐巢寄快遞榜掌。
• 小程序跳公眾號 ：打開“豐巢寄快遞”，點擊右上角的菜單選項乘综，然后點擊”關(guān)于豐巢寄快遞“憎账，就可以看見關(guān)聯(lián)的公眾號了。

7.h5和小程序互相跳轉(zhuǎn)：

可以相互跳轉(zhuǎn)瘾带。

• 小程序跳H5

  
  
  image
  
  

  web-view 組件是一個可以用來承載網(wǎng)頁的容器鼠哥，會自動鋪滿整個小程序頁面。但個人類型與海外類型的小程序暫不支持使用看政。

注：基礎(chǔ)庫 1.6.4 開始支持廉羔，低版本需做兼容處理。

• H5跳小程序
  
  image
  
  只要引入路徑為https://res.wx.qq.com/open/js/jweixin-1.3.0.js的js文件寒瓦，然后在執(zhí)行以下代碼就可以了迟几。

wx.miniProgram.navigateTo({url: '/path/to/page'})

8.小程序和小程序互相跳轉(zhuǎn)：

可以相互跳轉(zhuǎn)。

image

• 低版本需要做兼容處理嚷兔。
• 相互跳轉(zhuǎn)的小程序必須是同一公眾號下關(guān)聯(lián)的森渐。

9.小程序 獲取用戶隱私信息（手機號等）：

可以獲取

• 1.getPhoneNumber這個組件通過button來實現(xiàn)（別的標(biāo)簽無效）做入。將button中的open-type=“getPhoneNumber”,并且綁定bindgetphonenumber事件獲取回調(diào)。

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

• 2.在使用這個組件之前必須先調(diào)用login接口同衣，如果沒有調(diào)用login點擊button時會提示先調(diào)用login竟块。

App({
    onLaunch: function () {
        wx.login({
            success: function (res) {
                if (res.code) {
                    //發(fā)起網(wǎng)絡(luò)請求
                    console.log(res.code)
                } else {
                    console.log('獲取用戶登錄態(tài)失敗耐齐！' + res.errMsg)
                }
            }
        });
    }
})

• 3.通過bindgetphonenumber綁定的事件來獲取回調(diào)浪秘。
  回調(diào)的參數(shù)有三個，
  errMsg：用戶點擊取消或授權(quán)的信息回調(diào)埠况。
  iv：加密算法的初始向量（如果用戶沒有同意授權(quán)則為undefined）耸携。
  encryptedData： 用戶信息的加密數(shù)據(jù)（如果用戶沒有同意授權(quán)同樣返回undefined）

  
  
  image

getPhoneNumber: function(e) { 
    console.log(e.detail.errMsg) 
    console.log(e.detail.iv) 
    console.log(e.detail.encryptedData) 
    if (e.detail.errMsg == 'getPhoneNumber:fail user deny'){
      wx.showModal({
          title: '提示',
          showCancel: false,
          content: '未授權(quán)',
          success: function (res) { }
      })
    } else {
      wx.showModal({
          title: '提示',
          showCancel: false,
          content: '同意授權(quán)',
          success: function (res) { }
      })
    }
  }

• 4.最后我們需要根據(jù)自己的業(yè)務(wù)邏輯來進(jìn)行處理
  如果用戶不同意授權(quán)的話可能我們會有一個讓他手動輸入的界面，如果不是強制獲取手機號的話可以直接跳轉(zhuǎn)頁面進(jìn)行下一步辕翰。（用戶不同意授權(quán)errMsg返回‘getPhoneNumber:fail user deny’）
• 5.用戶同意授權(quán)
  我們可以根據(jù)login時獲取到的code來通過后臺以及微信處理拿到session_key夺衍，最后通過app_id，session_key,iv,encryptedData（用戶同意授權(quán)errMsg返回‘getPhoneNumber:ok’）
• 6.解密
  解密的方法可以去微信官方開發(fā)文檔查看喜命，有很詳細(xì)說明沟沙。
  加密數(shù)據(jù)解密算法（官方文檔）

10.小程序 獲取微信id

可以獲取，單必須由服務(wù)端去做

• 在18年4月25日小程序做了一次更新,小程序授權(quán)不再支持直接彈框獲取用戶信息授權(quán)了

  
  
  image
• 小程序調(diào)用wx.login() 獲取 臨時登錄憑證code 渊抄，并回傳到開發(fā)者服務(wù)器尝胆。
• 開發(fā)者服務(wù)器以code換取 用戶唯一標(biāo)識openid 和 會話密鑰session_key。
• 之后開發(fā)者服務(wù)器可以根據(jù)用戶標(biāo)識來生成自定義登錄態(tài)护桦，用于后續(xù)業(yè)務(wù)邏輯中前后端交互時識別用戶身份含衔。

11.小程序向公眾號導(dǎo)流

在小程序中，可以利用一些引導(dǎo)性文案指引用戶點擊進(jìn)入客服會話頁面二庵，然后客服自動回復(fù)一條公眾號圖文消息贪染，而圖文消息則有引導(dǎo)關(guān)注公眾號獲取更多服務(wù)的指引文案。（經(jīng)典用法催享，但是小心被封）

image

12.小程序和微信卡劵能力結(jié)合

比較小眾的玩法：用戶可以從小程序中快速領(lǐng)取會員卡和優(yōu)惠券杭隙，也可以從卡包中的會員卡直達(dá)小程序。

增加接入途徑：從卡包直接進(jìn)入（發(fā)卡需要注冊并認(rèn)證）

image

四因妙、小程序?qū)徍松霞?/h1>

• 小程序的審核風(fēng)格跟蘋果的APP STORE風(fēng)格很像痰憎，一樣是郵件溝通，一樣的審核嚴(yán)格攀涵，一樣會有一些讓人哭笑不得的拒絕理由铣耘。

• 類目不完善或者是類目選擇不當(dāng)
  這是目前最容易出現(xiàn)的坑。小程序服務(wù)類目所對應(yīng)的頁面中的核心內(nèi)容必須與該類目一致以故，并且跳轉(zhuǎn)不要超過2次蜗细。
  例如，不能選擇的類目是工具類，小程序里卻搞起了電商炉媒。千萬不能搞一些掛羊頭賣狗肉的小程序踪区，這是肯定要禁止的。

• 審核前一定要仔細(xì)看區(qū)分吊骤，可以了解下競品發(fā)的是什么類目缎岗。
  下面這張類目表可以收藏一下，標(biāo)紅的部分代表要相關(guān)證照才能通的類別白粉。

  
  
  image.jpg

• “功能不完善/功能不完整”
  這個有時候是審核人員不會用密强，誤以為你的小程序沒開發(fā)完整，如果你確定沒問題的話可以多提交一次試試蜗元。

• 產(chǎn)品的某個功能有bug

• 小程序簡介沒有介紹小程序功能
  很多人剛開始開發(fā)的時候，隨便填寫了一下簡介系冗，開發(fā)結(jié)束后忘記補充完整就直接提交了奕扣。將簡介補充完整，重新上傳就可以了掌敬。
  這種低級失誤還是少犯才好惯豆，來回折騰很浪費時間的。

• 含有聲音視頻類目奔害，請補充對應(yīng)類目
  音頻和視頻文件不好管理楷兽，容易出現(xiàn)風(fēng)險，所以微信官方審核特別嚴(yán)格华临。一定要慎之又慎芯杀！