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、項目的上傳、稽核、釋出
點選右側上傳,填寫版本号還上傳描述,上傳進微信公衆平台中。然後在平台選稽核,同時添加小程式頭像等,最後釋出就可以了。