一.小程序開發賬号申請（AppID）

1. 登陸微信公衆平台 mp.weixin.qq.com
2. 點擊立即注冊：填寫賬号信息->激活賬号(郵箱激活)->信息登記(選擇主體類型)
3. 安裝開發者工具：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

二.小程序開發起步:

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

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

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

// 啟動(dòng)構建
$ npm run dev
複制代碼

3. 啟動(dòng)微信開發者工具，引入項目目錄dist中(zhōng)的wx文(wén)件夾即可(kě)預覽到簡單的 mpvue 小程序。

三.小程序的版本區分：

1. 開發版本：使用開發者工具，運行代碼後點擊上傳可(kě)以将代碼上傳到開發者版本中(zhōng)。
2. 體驗版本：
   • 可(kě)以選擇某個(gè)開發版本作為體驗版本，一個(gè)AppID同一時刻有且隻有一個(gè)體驗版二維碼。
   • 體驗者微信号需使用小程序開發賬号登陸微信公衆平台中(zhōng)，添加到體驗成員。
3. 審核中(zhōng)版本：
   • 隻有在完成小程序基本資(zī)料填寫後，方可(kě)選擇一個(gè)開發版本提交審核。
   • 隻能有一份代碼處于審核中(zhōng)，有審核結果以後可(kě)以發布到線上。
   • 請開發者嚴格測試了版本之後，再提交審核， 過多的審核不通(tōng)過，可(kě)能會影響後續的時間。
4. 線上版本：線上所有用戶使用的代碼版本，該版本代碼在新版本代碼發布後被覆蓋更新。

四. 小程序發布上線準備工作（審核版本-上線版本）

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

五. 小程序開發的核心概念

1. 小程序的生命周期過程總結

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

2. 頁面跳轉和(hé)路(lù)由

微信小程序采用頁面棧的形式來管理頁面，小程序宿主環境限制了這個(gè)頁面棧的最大層級為10層。現在頁面棧數據為 [pageA,pageB,pageC],pageC在最頂上，也就是用戶看到的界面。

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

3. 頁面路(lù)由觸發方式及頁面生命周期函數的對應關(guān)系:

路(lù)由方式	觸發時機	路(lù)由前頁面生命周期	路(lù)由後頁面生命周期
初始化	小程序打開的第一個(gè)頁面	無	onLoad, onShow
打開新頁面 調用	API wx.navigateTo	onHide	onLoad, onShow
頁面重定向 調用	API wx.redirectTo	onUnload	onLoad, onShow
頁面返回 調用	API wx.navigateBack	onUnload	onShow
Tab	切換 調用 API wx.switchTab	具體情況具體分析	具體情況具體分析
重啟動(dòng)	調用 API wx.reLaunch	onUnload	onLoad, onShow

六. 小程序開發的踩坑收錄

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

塊級元素的标簽，用100%來代替需要完全寬度750rpx的頁面效果（使用 absolute 和(hé) fixed 的标簽除外）,如(rú)果同時設置了标簽的 padding 或 border，需更改 box-sizing 屬性值為border-box；

2. iOS 中(zhōng)Date 不支持構造 YYYY-MM-dd 的數據格式 可(kě)替換成 YYYY/MM/dd

3. 小程序頁面未觸發onUnload之前頁面狀态不會銷毀

由于頁面的生命周期onLoad在被銷毀之前隻會觸發1次，因此頁面中(zhōng)data()返回的數據在 onShow()、onHide()生命周期觸發時,不會主動(dòng)去做數據初始化。需要手動(dòng)重制數據狀态,或者在離(lí)開頁面時使用wx.redirectTo來跳轉頁面達到觸發onUnload()行為。

4. 小程序 textarea、input 層級過高，導緻填寫内容穿透

原生組件的層級是最高的，所以頁面中(zhōng)的其他組件無論設置 z-index 為多少(shǎo)，都無法覆蓋在原生組件上。解決的辦法就是當textarea輸入完成時，将textarea隐藏，将輸入内容顯示在一個(gè)text文(wén)本框。當點擊text輸入框時，又将text隐藏，顯示textarea,并将textarea的焦點選中(zhōng)繼續輸入内容。

5. 小程序原聲組件button無法去除默認的border樣式

使用 button::after{ border:none } 就可(kě)以去除默認border。

6. 小程序中(zhōng)不支持 ::placeholder 選擇器(qì)

在input标簽中(zhōng)加入 placeholder-class="place-holder" 然後定義這個(gè)類的.place-holder{ color:red; }

7. 如(rú)何獲取小程序在頁面傳遞的參數

在所有頁面的組件内可(kě)以通(tōng)過 this.$root\mathrm{.}$mp.query 進行獲取。

8. 小程序 web-view 組件無法實現在Android上直接預覽pdf文(wén)件

由于Android 和(hé) ios 在web-view組件上的差異，解決方式是：使用wx.getSystemInfo()獲取設備信息，ios系統直接使用web-view進行預覽pdf文(wén)件；Android系統通(tōng)過wx.downloadFile()下(xià)載文(wén)件、wx.openDocument()打開文(wén)件的操作模拟文(wén)件預覽的效果。（以下(xià)代碼已經對部分小程序API 進行promise化）

//首先在 utils.js 進行小程序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={}){  //獲取系統信息
  return wxPromisify('getSystemInfo',params);
}
function downloadFile(params={}){   //下(xià)載文(wén)件
  return wxPromisify('downloadFile',params);
}
function openDocument(params={}){   //打開文(wén)件
  return wxPromisify('openDocument',params);
}

//小程序預覽文(wén)件全兼容方法

showDocHandle(){
  let docId = this.uuid;
  let resultUrl = `${apiConfig.request.getPubFile}/${this.xxxPubUrl}`
  wx.showLoading({title: '正在識别設備！'})
  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: '正在緩存文(wén)件！'});
        return utils.downloadFile({url: resultUrl});
      }
    })
    .then(res => {
      let tempFilePath = res.tempFilePath;
      wx.hideLoading();
      wx.showLoading({title: '正在打開文(wén)件！'})
      return utils.openDocument({filePath: tempFilePath})
    })
    .catch(err => {
      wx.hideLoading();
      utils.showToast("緩存文(wén)件失敗！")
    })
    .then(res => {
      wx.hideLoading()
      utils.showToast("文(wén)件打開成功！")
    })
    .catch(err => {
      wx.hideLoading();
      utils.showToast("打開文(wén)件失敗！")
      wx.navigateBack({delta:1})
    })
}