微信小程序開發(fā)探究
前段時(shí)間比較流行的微信小程序,因?yàn)橐恢睕]有所謂內(nèi)測碼也沒具體關(guān)注。拖到現(xiàn)在正好借組內(nèi)分享的時(shí)機(jī)來仔細(xì)了解一下微信小程序。了解一個(gè)新的事物無外乎從是什么(本質(zhì)),怎么用(具體用法),為什么用(優(yōu)缺點(diǎn))來學(xué)習(xí),首先分析一下微信小程序是什么,聽起來比較高大上,說實(shí)話原來我確實(shí)挺疑惑,到底這一套是什么開發(fā)機(jī)制,native?hybrid?純h5?看網(wǎng)上各種教程上來就說api說語法,感覺不先理清楚是什么的問題就去搬api過來純粹是耍流氓。
一、微信小程序是什么:
言歸正傳,微信小程序的本質(zhì)是什么?個(gè)人理解微信小程序本質(zhì)還是一套前端框架,微信團(tuán)隊(duì)基于原來第三方h5頁面在微信里只能通過h5實(shí)現(xiàn)原本可以由native實(shí)現(xiàn)的功能,例如上傳圖片等。進(jìn)而采取的開放部分jsbridge的api來方便開發(fā)者。不過既然作為大廠肯定不會(huì)僅僅開放部分jsbridge的api就完了,順便微信類似vue、react一樣實(shí)現(xiàn)了一套自己的mvvm的框架就是目前的微信小程序。官方文檔這樣描述:框架提供了自己的視圖層描述語言 WXML 和 WXSS,以及基于 JavaScript 的邏輯層框架,并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng),可以讓開發(fā)者可以方便的聚焦于數(shù)據(jù)與邏輯上。
本質(zhì)還是一套前端框架,代碼最終將會(huì)打包成一份 JavaScript并在小程序啟動(dòng)的時(shí)候運(yùn)行,直到小程序銷毀。模版語法類似vue,接近原生的自定義標(biāo)簽。數(shù)據(jù)綁定和渲染類似vue的語法,不過是以wx:開頭(vue 以v: 作為標(biāo)識(shí)) 事件系統(tǒng)類似react一樣定義了一套自己的事件系統(tǒng)。
二、微信運(yùn)行環(huán)境:
微信小程序運(yùn)行在三端:iOS、Android 和 用于調(diào)試的開發(fā)者工具
在 iOS 上,小程序的 javascript 代碼是運(yùn)行在 JavaScriptCore 中
在 Android 上,小程序的 javascript 代碼是通過 X5 內(nèi)核來解析
在 開發(fā)工具上, 小程序的 javascript 代碼是運(yùn)行在 nwjs(chrome內(nèi)核) 中
頁面的腳本邏輯是在JsCore中運(yùn)行,JsCore是一個(gè)沒有窗口對(duì)象的環(huán)境,所以不能在腳本中使用window等bom對(duì)象。所以類似jquery、zepto等通過window或者document來獲得dom對(duì)象的庫是不能用來使用的。
三、目錄結(jié)構(gòu):
小程序包含一個(gè)描述整體程序的 app 和多個(gè)描述各自頁面的 page。
一個(gè)小程序主體部分由三個(gè)文件組成,必須放在項(xiàng)目的根目錄,如下:
app.js 邏輯部分,即全局變量或者方法
app.json 公共配置,包括頁面配置等,頂部底部tab的設(shè)置,背景顏色等
app.wxss 公共樣式表 可以被具體page樣式覆蓋
app.js代碼(代碼取自微信官方demo)和注釋說明如下:
//app.js // 微信小程序就是調(diào)用微信開放jsbridge,來完成微信h開發(fā)中某些原本比較難的功能的特定的微信前端框架 /** * app 即小程序的生命周期管理。 * */ App({ // 初始化 onLaunch: function () { //調(diào)用API從本地緩存中獲取數(shù)據(jù) var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }, // 全局方法或者變量,可在不同page中使用 getUserInfo:function(cb){ var that = this if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo) }else{ //調(diào)用登錄接口 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo typeof cb == "function" && cb(that.globalData.userInfo) } }) } }) } }, globalData:{ userInfo:null } })
app.json(文件中不允許有注釋)示例如下:
{ "pages":[ "pages/index/index", "pages/logs/logs", "pages/swiper/swiper", "pages/input/input", "pages/form/form" ], "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信小程序", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" }, "tabBar":{ "borderStyle": "white", "list": [{ "pagePath": "pages/index/index", "iconPath":"image/icon_API.png", "selectedIconPath":"image/icon_API_HL.png", "text": "首頁" },{ "pagePath": "pages/form/form", "iconPath":"image/plus.png", "selectedIconPath":"image/green_tri.png", "text": "更多" }, { "pagePath": "pages/swiper/swiper", "iconPath":"image/icon_COM.png", "selectedIconPath":"image/icon_COM_HL.png", "text": "其他" } ] } }
具體頁面一般包括一下文件(與全局文件類似,不過僅僅作用于該頁面):
- .js 頁面邏輯 就是js沒什么差別
- .wxml 頁面結(jié)構(gòu) 對(duì)應(yīng)html,不過是應(yīng)用了不少自定義標(biāo)簽
- .wxss 頁面樣式表 對(duì)應(yīng)css文件,優(yōu)先級(jí)比appapp.wxss高,css的寫法并未完全支持
- .json 頁面配置 指定特定頁面的title等元素
為了方便開發(fā)者減少配置項(xiàng),規(guī)定描述頁面的這四個(gè)文件必須具有相同的路徑與文件名。
也就是說,我們不用指定某個(gè)頁面對(duì)應(yīng)的js或者wxss文件,只需要保持路徑和文件名相同即可。
四、模版語言及事件系統(tǒng)
1):模版語法類似vue,接近原生的自定義標(biāo)簽。數(shù)據(jù)綁定和渲染類似vue的語法,不過是以wx:開頭(vue 以v: 作為標(biāo)識(shí))
/** * 類似vue的條件渲染語法,熟悉vue的話應(yīng)該不會(huì)陌生 **/ <view wx:if="{{condition}}"> </view>
2):事件系統(tǒng)
事件系統(tǒng)類似react:定義了一套自己的事件系統(tǒng)。包含一系列常用事件類型:
- touchstart 手指觸摸動(dòng)作開始
- touchmove 手指觸摸后移動(dòng)
- touchcancel 手指觸摸動(dòng)作被打斷,如來電提醒,彈窗
- touchend 手指觸摸動(dòng)作結(jié)束
- tap 手指觸摸后馬上離開
- longtap 手指觸摸后,超過350ms再離開
綁定方式:事件綁定的寫法同組件的屬性,以 key+value 的形式:
以bind或catch開頭,然后跟上事件的類型,如bindtap catchtouchstart,
value 是一個(gè)字符串,需要在對(duì)應(yīng)的 Page 中定義同名的函數(shù)。不然當(dāng)觸發(fā)事件的時(shí)候會(huì)報(bào)錯(cuò)。
bind事件綁定不會(huì)阻止冒泡事件向上冒泡,catch事件綁定可以阻止冒泡事件向上冒泡 。例如:
/** *bind/catch +事件類型,兩種事件綁定方式 */ <view id="outter" bindtap="handleTap1"> outer view <view id="middle" catchtap="handleTap2"> middle view <view id="inner" bindtap="handleTap3"> inner view </view> </view> </view>
3):事件對(duì)象:包括BaseEvent 基礎(chǔ)事件對(duì)象,CustomEvent 自定義事件對(duì)象,TouchEvent 觸摸事件對(duì)象等。
五、優(yōu)缺點(diǎn):
1):優(yōu)點(diǎn)
1、提供相應(yīng)的類似jsbridge的支持,使得某些功能更為方便
2、本質(zhì)是mvvm的前端框架,簡化操作。
3、提供了比較成型的組件庫,構(gòu)建比較方便
4、基于微信appapp,使得開發(fā)成本下降
5、支持模塊化
2):缺點(diǎn)
1、由于框架并非運(yùn)行在瀏覽器中,js相關(guān)bom的方法無法使用。如 document,window等。不過可以獲取當(dāng)前事件對(duì)應(yīng)的dom對(duì)象。相比react還是一樣不建議操作dom,jq,zepto等工具庫也不好使了
2、又是一套自己的語法,需要學(xué)習(xí)時(shí)間,不過學(xué)習(xí)曲線不陡峭
3、目前不支持直接引入 node_modules ,開發(fā)者需要使用到node_modules時(shí)候建議拷貝出相關(guān)的代碼到小程序的目錄中這樣局限性就比較大了,需要自己手動(dòng)的東西好多
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序 form組件詳解及簡單實(shí)例
- 微信小程序 checkbox組件詳解及簡單實(shí)例
- 微信小程序 Button 組件詳解及簡單實(shí)例
- 微信小程序 用戶數(shù)據(jù)解密詳細(xì)介紹
- 微信小程序 限制1M的瘦身技巧與方法詳解
- 微信小程序 數(shù)組(增,刪,改,查)等操作實(shí)例詳解
- 微信小程序 Canvas增強(qiáng)組件實(shí)例詳解及源碼分享
- 詳解微信小程序——自定義圓形進(jìn)度條
- 詳解微信小程序開發(fā)—你期待的分享功能來了,微信小程序序新增5大功能
- JS中微信小程序自定義底部彈出框
- 微信小程序 textarea 詳解及簡單使用方法
- 微信小程序 label 組件詳解及簡單實(shí)例
相關(guān)文章
純js代碼制作的網(wǎng)頁時(shí)鐘特效【附實(shí)例】
下面小編就為大家?guī)硪黄僯s代碼制作的網(wǎng)頁時(shí)鐘特效【附實(shí)例】。小編覺得聽錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-03-03javascript 裝載iframe子頁面,自適應(yīng)高度
2009-03-03JavaScript forEach 方法跳出循環(huán)的操作方法
這篇文章主要介紹了JavaScript forEach 方法跳出循環(huán)的操作方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01判斷文字超過2行添加展開按鈕,未超過則不顯示,溢出部分顯示省略號(hào)
這篇文章主要介紹了判斷文字超過2行添加展開按鈕,未超過則不顯示,溢出部分顯示省略號(hào),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04element-ui?實(shí)現(xiàn)輸入框下拉樹組件功能
這篇文章主要介紹了element-ui?實(shí)現(xiàn)輸入框下拉樹組件功能,使用element-ui的?el-input,el-tree,el-popover組件組合封裝,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-05-05JavaScript Window 打開新窗口(window.location.href、windo
本文主要介紹了JavaScript Window 打開新窗口的三種方式,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05