一.小程序開(kāi)發(fā)賬號(hào)申請(qǐng)（AppID）

1. 登陸微信公眾平臺(tái) mp.weixin.qq.com
2. 點(diǎn)擊立即注冊(cè)：填寫賬號(hào)信息->激活賬號(hào)(郵箱激活)->信息登記(選擇主體類型)
3. 安裝開(kāi)發(fā)者工具：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

二.小程序開(kāi)發(fā)起步:

1. 閱讀小程序開(kāi)發(fā)指南: developers.weixin.qq.com/miniprogram…
2. 小程序框架模版部署: ( mpVue框架文檔：http://mpvue.com )

// 全局安裝 vue-cli
$ npm install --global vue-cli

// 創(chuàng)建一個(gè)基于 mpvue-quickstart 模板的新項(xiàng)目
$ vue init mpvue/mpvue-quickstart my-project  
 
// 安裝依賴 
$ cd my-project
$ npm install

// 啟動(dòng)構(gòu)建
$ npm run dev
復(fù)制代碼

3. 啟動(dòng)微信開(kāi)發(fā)者工具，引入項(xiàng)目目錄dist中的wx文件夾即可預(yù)覽到簡(jiǎn)單的 mpvue 小程序。

三.小程序的版本區(qū)分：

1. 開(kāi)發(fā)版本：使用開(kāi)發(fā)者工具，運(yùn)行代碼后點(diǎn)擊上傳可以將代碼上傳到開(kāi)發(fā)者版本中。
2. 體驗(yàn)版本：
   • 可以選擇某個(gè)開(kāi)發(fā)版本作為體驗(yàn)版本，一個(gè)AppID同一時(shí)刻有且只有一個(gè)體驗(yàn)版二維碼。
   • 體驗(yàn)者微信號(hào)需使用小程序開(kāi)發(fā)賬號(hào)登陸微信公眾平臺(tái)中，添加到體驗(yàn)成員。
3. 審核中版本：
   • 只有在完成小程序基本資料填寫后，方可選擇一個(gè)開(kāi)發(fā)版本提交審核。
   • 只能有一份代碼處于審核中，有審核結(jié)果以后可以發(fā)布到線上。
   • 請(qǐng)開(kāi)發(fā)者嚴(yán)格測(cè)試了版本之后，再提交審核， 過(guò)多的審核不通過(guò)，可能會(huì)影響后續(xù)的時(shí)間。
4. 線上版本：線上所有用戶使用的代碼版本，該版本代碼在新版本代碼發(fā)布后被覆蓋更新。

四. 小程序發(fā)布上線準(zhǔn)備工作（審核版本-上線版本）

1. 檢查微信開(kāi)發(fā)賬號(hào)：
   • 確保需要上線的AppID正確（在project.config.json文件中修改）
   • 確保上線的AppID通過(guò)微信認(rèn)證完成了主體真實(shí)性確認(rèn)
2. 檢查項(xiàng)目環(huán)境配置：確保項(xiàng)目環(huán)境切換為'production'  (在src/biz/apiConfig.js文件中修改)
3. 檢查生產(chǎn)環(huán)境域名配置：(開(kāi)發(fā)-集成-驗(yàn)收  同下一致)
   • 確保在小程序公眾平臺(tái)上配置服務(wù)器選項(xiàng)中成功添加生產(chǎn)環(huán)境的服務(wù)器域名和業(yè)務(wù)域名
   • 業(yè)務(wù)域名需經(jīng)過(guò)ICP備案，新備案域名需24小時(shí)后才可配置。域名格式只支持英文大小寫字母、數(shù)字及“- ”，不支持IP地址。配置業(yè)務(wù)域名后，可打開(kāi)任意合法的子域名。
   • 下載校驗(yàn)文件并將文件放置在域名根目錄下，例如wx.qq.com，并確保可以訪問(wèn)該文件。
4. 填寫小程序信息：微信公眾平臺(tái)上未填寫小程序信息內(nèi)容是無(wú)法發(fā)布審核版本：
   • 小程序名稱：（長(zhǎng)度為4-30個(gè)字符，一個(gè)中文字等于2個(gè)字符）
   • 小程序簡(jiǎn)稱 ：（選填：長(zhǎng)度為4-10個(gè)字符，一個(gè)中文字等于2個(gè)字符）
   • 涉及特定行業(yè)領(lǐng)域小程序名稱需提供：（各項(xiàng)圖片大小小于5M）《營(yíng)業(yè)執(zhí)照》或《組織代碼證》，請(qǐng)務(wù)必加蓋公司公章《商標(biāo)注冊(cè)證》等相關(guān)行業(yè)法定許可或備案證明文件、相關(guān)職業(yè)或執(zhí)業(yè)證件
   • 小程序頭像：（格式：png,bmp,jpeg,jpg,gif；不可大于2M，建議圖片尺寸為144px*144px）
   • 小程序介紹： 介紹字?jǐn)?shù)為4~120個(gè)字
   • 小程序的服務(wù)類目：選擇對(duì)應(yīng)的服務(wù)類目。例如：金融業(yè)下的信托服務(wù)。需提供：《金融許可證》或 《金融機(jī)構(gòu)許可證》（上傳原件或復(fù)印件，復(fù)印件務(wù)必加蓋公司公章）

五. 小程序開(kāi)發(fā)的核心概念

1. 小程序的生命周期過(guò)程總結(jié)

   • 應(yīng)用的生命周期:
     • onLaunch : 當(dāng)小程序初始化完成時(shí)，會(huì)觸發(fā)（全局只觸發(fā)一次）
     • onShow : 當(dāng)小程序啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示時(shí)觸發(fā)
     • onHide : 當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)時(shí)觸發(fā)（右上角的關(guān)閉、按手機(jī)設(shè)備的Home鍵）
     • onError : 當(dāng)小程序發(fā)生腳本錯(cuò)誤，或者 API 調(diào)用失敗時(shí)觸發(fā)
   • 頁(yè)面的生命周期:
     • onLoad : 監(jiān)聽(tīng)頁(yè)面加載，觸發(fā)時(shí)機(jī)早于onShow和onReady（在頁(yè)面沒(méi)被銷毀之前只會(huì)觸發(fā)1次）
     • onShow : 監(jiān)聽(tīng)頁(yè)面顯示，觸發(fā)事件早于onReady
     • onReady : 監(jiān)聽(tīng)頁(yè)面初次渲染完成（觸發(fā)時(shí)表示頁(yè)面可交互，在頁(yè)面沒(méi)被銷毀之前只會(huì)觸發(fā)1次）
     • onHide : 監(jiān)聽(tīng)頁(yè)面隱藏（wx.navigateTo切換到其他頁(yè)面、底部tab切換時(shí)觸發(fā)）
     • onUnload : 監(jiān)聽(tīng)頁(yè)面卸載（wx.redirectTo或wx.navigateBack返回到其他頁(yè)時(shí)觸發(fā)）

2. 頁(yè)面跳轉(zhuǎn)和路由

微信小程序采用頁(yè)面棧的形式來(lái)管理頁(yè)面，小程序宿主環(huán)境限制了這個(gè)頁(yè)面棧的最大層級(jí)為10層?，F(xiàn)在頁(yè)面棧數(shù)據(jù)為 [pageA,pageB,pageC],pageC在最頂上，也就是用戶看到的界面。

* wx.navigateTo({url:'pageD'}) 推出一個(gè)pageD，此時(shí)頁(yè)面棧[pageA, pageB, pageC, pageD]
* wx.navigateBack() 退出當(dāng)前頁(yè)面棧的最頂上頁(yè)面，此時(shí)頁(yè)面棧變成 [ pageA, pageB, pageC ]
* wx.redirectTo({ url:'pageE'}) 替換當(dāng)前頁(yè)變成pageE，此時(shí)頁(yè)面棧變成 [ pageA, pageB, pageE ]
* wx.switchTab({ url:'pageF'}) 切換到tab頁(yè)面pageF，此時(shí)原來(lái)頁(yè)面棧被清空 [ pageF ] 
* wx.reLaunch({ url:'pageH'}) 重啟小程序并打開(kāi)pageH，此時(shí)頁(yè)面棧為 [ pageH ]。
復(fù)制代碼

3. 頁(yè)面路由觸發(fā)方式及頁(yè)面生命周期函數(shù)的對(duì)應(yīng)關(guān)系:

路由方式	觸發(fā)時(shí)機(jī)	路由前頁(yè)面生命周期	路由后頁(yè)面生命周期
初始化	小程序打開(kāi)的第一個(gè)頁(yè)面	無(wú)	onLoad, onShow
打開(kāi)新頁(yè)面 調(diào)用	API wx.navigateTo	onHide	onLoad, onShow
頁(yè)面重定向 調(diào)用	API wx.redirectTo	onUnload	onLoad, onShow
頁(yè)面返回 調(diào)用	API wx.navigateBack	onUnload	onShow
Tab	切換 調(diào)用 API wx.switchTab	具體情況具體分析	具體情況具體分析
重啟動(dòng)	調(diào)用 API wx.reLaunch	onUnload	onLoad, onShow

六. 小程序開(kāi)發(fā)的踩坑收錄

1. iOS 屏幕寬度適配問(wèn)題

塊級(jí)元素的標(biāo)簽，用100%來(lái)代替需要完全寬度750rpx的頁(yè)面效果（使用 absolute 和 fixed 的標(biāo)簽除外）,如果同時(shí)設(shè)置了標(biāo)簽的 padding 或 border，需更改 box-sizing 屬性值為border-box；

2. iOS 中Date 不支持構(gòu)造 YYYY-MM-dd 的數(shù)據(jù)格式 可替換成 YYYY/MM/dd

3. 小程序頁(yè)面未觸發(fā)onUnload之前頁(yè)面狀態(tài)不會(huì)銷毀

由于頁(yè)面的生命周期onLoad在被銷毀之前只會(huì)觸發(fā)1次，因此頁(yè)面中data()返回的數(shù)據(jù)在 onShow()、onHide()生命周期觸發(fā)時(shí),不會(huì)主動(dòng)去做數(shù)據(jù)初始化。需要手動(dòng)重制數(shù)據(jù)狀態(tài),或者在離開(kāi)頁(yè)面時(shí)使用wx.redirectTo來(lái)跳轉(zhuǎn)頁(yè)面達(dá)到觸發(fā)onUnload()行為。

4. 小程序 textarea、input 層級(jí)過(guò)高，導(dǎo)致填寫內(nèi)容穿透

原生組件的層級(jí)是最高的，所以頁(yè)面中的其他組件無(wú)論設(shè)置 z-index 為多少，都無(wú)法覆蓋在原生組件上。解決的辦法就是當(dāng)textarea輸入完成時(shí)，將textarea隱藏，將輸入內(nèi)容顯示在一個(gè)text文本框。當(dāng)點(diǎn)擊text輸入框時(shí)，又將text隱藏，顯示textarea,并將textarea的焦點(diǎn)選中繼續(xù)輸入內(nèi)容。

5. 小程序原聲組件button無(wú)法去除默認(rèn)的border樣式

使用 button::after{ border:none } 就可以去除默認(rèn)border。

6. 小程序中不支持 ::placeholder 選擇器

在input標(biāo)簽中加入 placeholder-class="place-holder" 然后定義這個(gè)類的.place-holder{ color:red; }

7. 如何獲取小程序在頁(yè)面?zhèn)鬟f的參數(shù)

在所有頁(yè)面的組件內(nèi)可以通過(guò) this.$root\mathrm{.}$mp.query 進(jìn)行獲取。

8. 小程序 web-view 組件無(wú)法實(shí)現(xiàn)在Android上直接預(yù)覽pdf文件

由于Android 和 ios 在web-view組件上的差異，解決方式是：使用wx.getSystemInfo()獲取設(shè)備信息，ios系統(tǒng)直接使用web-view進(jìn)行預(yù)覽pdf文件；Android系統(tǒng)通過(guò)wx.downloadFile()下載文件、wx.openDocument()打開(kāi)文件的操作模擬文件預(yù)覽的效果。（以下代碼已經(jīng)對(duì)部分小程序API 進(jìn)行promise化）

//首先在 utils.js 進(jìn)行小程序API promise化
function wxPromisify(functionName, params) {
  return new Promise((resolve, reject) => {
    wx[functionName]({
      ...params,
      success: res => resolve(res),
      fail: res => reject(res)
    });
  });
}
function getSystemInfo(params={}){  //獲取系統(tǒng)信息
  return wxPromisify('getSystemInfo',params);
}
function downloadFile(params={}){   //下載文件
  return wxPromisify('downloadFile',params);
}
function openDocument(params={}){   //打開(kāi)文件
  return wxPromisify('openDocument',params);
}

//小程序預(yù)覽文件全兼容方法

showDocHandle(){
  let docId = this.uuid;
  let resultUrl = `${apiConfig.request.getPubFile}/${this.xxxPubUrl}`
  wx.showLoading({title: '正在識(shí)別設(shè)備！'})
  utils.getSystemInfo()
    .then(res => {
      if(res.system.indexOf('iOS') != -1){
        wx.hideLoading();
        this.show = true;
        this.resultUrl = resultUrl;
      }else{
        this.show = false;
        wx.showLoading({title: '正在緩存文件！'});
        return utils.downloadFile({url: resultUrl});
      }
    })
    .then(res => {
      let tempFilePath = res.tempFilePath;
      wx.hideLoading();
      wx.showLoading({title: '正在打開(kāi)文件！'})
      return utils.openDocument({filePath: tempFilePath})
    })
    .catch(err => {
      wx.hideLoading();
      utils.showToast("緩存文件失??！")
    })
    .then(res => {
      wx.hideLoading()
      utils.showToast("文件打開(kāi)成功！")
    })
    .catch(err => {
      wx.hideLoading();
      utils.showToast("打開(kāi)文件失敗！")
      wx.navigateBack({delta:1})
    })
}