微信小程序心得體會

1、微信小程序誕生的前景：

1、受到手機內存的限制，用戶無法下載諸多app
2、用戶爲了簡潔性不願意下載app
3、微信用戶的日益增加

2、微信小程序的特點：

微信小程序的理念是”觸手可及，用完即走” ，是一種不需要下載安裝即可使用的應用。
一次開發，多終端適配（不用適配ios或android）
途徑：通過微信(掃描二維碼、搜索、分享)即可獲得，和微信共用內存使用，佔用內存空間忽略不計

3、微信小程序與h5頁面的比較：

1、運行環境不同：
h5運行環境是瀏覽器（包括webview）
小程序的運行環境是微信開發團隊基於瀏覽器內核完全重構的一個內置解析器（微信端內）
2、獲取系統級權限不同：
微信小程序相對於H5能獲得更多的系統權限（網絡狀態、WIFI、藍牙、屏幕亮度...）
3、運行流暢度：
H5：網頁需要在瀏覽器中渲染。所以加載這一過程，會給人明顯的「卡頓」感覺，複雜邏輯h5尤爲明顯。
微信小程序：代碼直接在微信上運行，省去了通過瀏覽器渲染，因此會比H5流暢很多，
小程序各個頁面的切換、跳轉等體驗已經媲美原生App

4、微信小程序與原生APP的比較：

小程序的劣勢：
1、從技術層面來說，小程序的體驗不及APP
2、從功能體量上來說，小程序不及APP
3、從開放性來說，小程序不及APP
APP的劣勢：
1、開發維護成本高：安卓與IOS獨立開發，維護起來相對也比較麻煩；
2、留存率低：APP打開的頻率很大程度上決定它的留存率，如果不是經常使用的而可能很快就卸載了；
3、推廣成本高：APP在沒有一定知名度前提下，推廣的成本很高，獲客成本高；
4、上傳APP路徑複雜：上傳至APP需要通過store或應用市場的確認。

5、微信小程序開發

開發文檔（包括開發工具、教程及官方中文文檔）：
https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/getting-started.html

5.1、準備工作

1、申請賬號並註冊成爲微信平臺的開發者,並獲取AppID(小程序ID)（詳細步驟看官網）
2、安裝開發工具並登陸：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
3、創建小程序項目，並寫入小程序ID（AppID）

5.2、項目目錄及文件

1、page：是小程序的路由，默認情況下存在兩個頁面，一個首頁，一個日誌打印頁。
每個頁面下可以有4種文件
index.js:配置該頁面的變量、函數、生命週期等
index.wxml:類似於html文件，配置當前頁面的結構
index.wxss:類似於css文件，配置當前文件的表現
index.json:當前頁面的小程序配置（配置小程序窗口背景色，導航欄樣式，標題等）
2、utils：工具包，一般是常用的一些封裝h哦的函數（時間格式化、數字格式化等）
3、app.js：小程序全局腳本控制（ 監聽小程序的生命週期，生命小程序的全局變量等）
4、app.json：整個小程序的全局配置，配置有哪些頁面構成，配置全局的配置（小程序窗口背景色，默認配置，如果其他頁面有配置，則被覆蓋）
5、app.wxss：小程序的公共樣式
6、project.config.json：項目整體配置文件，包括項目描述、打包忽略文件夾、轉義es5、自動壓縮等（具體如下圖）

{
    "description": "項目配置文件",  //描述
    "packOptions": {  //用以配置打包時對符合指定規則的文件或文件夾進行忽略
        "ignore": []
    },
    "setting": {  //項目設置
        "urlCheck": false,  //不檢查安全域名和 TLS 版本
        "es6": true,  //啓用 es6 轉 es5
        "postcss": true,  //上傳代碼時樣式自動補全
        "minified": true,  //上傳代碼時自動壓縮
        "newFeature": true  //新特徵，文檔中未描述
    },
    "compileType": "miniprogram",  //編譯類型，miniprogram爲普通小程序項目
    "libVersion": "2.3.0",  //基礎庫版本
    "appid": "touristappid",  //AppID
    "projectname": "%E6%B5%85%E8%93%9D%E5%95%86%E5%9F%8EPRO",  //項目名字，只在新建項目時讀取,urlDecode解碼(路徑解碼)
    "debugOptions": {
        "hidedInDevtools": []  //配置調試時於調試器 Sources 面板隱藏源代碼的hidedInDevtools 的配置規則和 packOptions.ignore 是一致的。
    },
    "scripts": {},  //自定義預處理的命令 beforeCompile編譯前預處理命令、beforePreview預覽前預處理命令、beforeUpload上傳前預處理命令
    "condition": {  //編譯模式，增加編譯模式時，會添加到下面的對應數組
        "search": {   
            "current": -1,
            "list": []
        },
        "conversation": {
            "current": -1,
            "list": []
        },
        "plugin": {  //插件
            "current": -1,
            "list": []
        },
        "game": {  //小遊戲
            "list": []
        },
        "miniprogram": {  //小程序
            "current": -1,
            "list": []
        }
    }
}

app.json:詳細見文檔https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

{
  "pages":[//除了整體的配置文件有page選項，其他沒有
    "pages/index/index",//第一項必須是小程序的啓動頁（初始頁）
    "pages/logs/logs"//小程序新增和刪除頁面都需要重新配置
  ],
  "window":{
    "navigationBarBackgroundColor": "#fff",//導航欄(顯示時間、電量)的背景顏色
    "navigationBarTextStyle": "black",//導航欄的字體顏色，只支持（white/black）
    "navigationBarTitleText": "WeChat",//導航欄標題文字內容
    "backgroundColor": "pink",
    "backgroundTextStyle": "light",//下拉背景字體，loading樣式僅支持（dark/lignt）
    "enablePullDownRefresh": false
  },
  "networkTimepout":{
  },
  "debug":false
}

5.2、項目註冊於開發流程

1、註冊小程序：小程序的入口是app.js，是用來註冊小程序的，執行App方法就可以註冊當前開發的小程序，App() 必須在 app.js 中調用，必須調用且只能調用一次。App接受一個對象參數。
參數說明：https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

App({//小程序的生命週期
  onLaunch(options) {//小程序初始化完成時觸發，全局只觸發一次。
    // Do something initial when launch.
  },
  onShow(options) {//小程序啓動，或從後臺進入前臺顯示時觸發。
    // Do something when show.
  },
  onHide() {//小程序從前臺進入後臺時觸發。
    // Do something when hide.
  },
  onError(msg) {//小程序發生腳本錯誤或 API 調用報錯時觸發。
    console.log(msg)
  },
  globalData: 'I am global data'//全局變量或函數
})

2、註冊頁面（page）：每個頁面需要先在app.json的page當中註冊，然後在相應的js文件啓動，執行Page方法。
Page函數接受一個 Object 類型參數，其指定頁面的初始數據、生命週期回調、事件處理函數等。
參數說明：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

Page({
  data: {//掛載在該頁面的數據
    text: 'This is page data.'
  },//該頁面的生命週期
  onLoad(options) {//頁面初始化加載
    // Do some initialize when page load.
  },
  onReady() {//頁面初次渲染完成
    // Do something when page ready.
  },
  onShow() {//頁面顯示
    // Do something when page show.
  },
  onHide() {//頁面隱藏
    // Do something when page hide.
  },
  onUnload() {//頁面卸載
    // Do something when page close.
  },
  onPullDownRefresh() {//監聽用戶下拉動作
    // Do something when pull down.
  },
  onReachBottom() {//頁面上拉觸底事件的處理函數
    // Do something when page reach bottom.
  },
  onShareAppMessage() {//用戶點擊右上角轉發
    // return custom share data when user share.
  },
  onPageScroll() {//頁面滾動觸發事件的處理函數
    // Do something when page scroll
  },
  onResize() {//頁面尺寸改變時觸發(橫屏豎屏切換)
    // Do something when page resize
  },
  customData: {//任意數據或函數
    hi: 'MINA'
  }
})

6、微信小程序的預覽、上傳、審覈、發佈

 

6.1、項目用微信預覽

小程序的管理員或開發者可以點擊微信開發工具的預覽功能進行預覽，分爲掃描二維碼預覽和自動預覽

6.2、項目的上傳、審覈、發佈

點擊右側上傳，填寫版本號還上傳描述，上傳進微信公衆平臺中。然後在平臺選審覈，同時添加小程序頭像等，最後發佈就可以了。