微信小程序探究：運(yùn)行環(huán)境，目錄結(jié)構(gòu)，模版語言及事件系統(tǒng) ...
|
本文作者：瀟湘待雨，來自原文地址 前段時(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ā)者工具
三、目錄結(jié)構(gòu)： app.js代碼（代碼取自微信官方demo）和注釋說明如下：
1 //app.js
2 // 微信小程序就是調(diào)用微信開放jsbridge，來完成微信h5開發(fā)中某些原本比較難的功能的特定的微信前端框架
3 /**
4 * app 即小程序的生命周期管理。
5 * */
6 App({
7 // 初始化
8 onLaunch: function () {
9 //調(diào)用API從本地緩存中獲取數(shù)據(jù)
10 var logs = wx.getStorageSync('logs') || []
11 logs.unshift(Date.now())
12 wx.setStorageSync('logs', logs)
13 },
14 // 全局方法或者變量，可在不同page中使用
15 getUserInfo:function(cb){
16 var that = this
17 if(this.globalData.userInfo){
18 typeof cb == "function" && cb(this.globalData.userInfo)
19 }else{
20 //調(diào)用登錄接口
21 wx.login({
22 success: function () {
23 wx.getUserInfo({
24 success: function (res) {
25 that.globalData.userInfo = res.userInfo
26 typeof cb == "function" && cb(that.globalData.userInfo)
27 }
28 })
29 }
30 })
31 }
32 },
33 globalData:{
34 userInfo:null
35 }
36 })
app.json（文件中不允許有注釋）示例如下：
1 {
2 "pages":[
3 "pages/index/index",
4 "pages/logs/logs",
5 "pages/swiper/swiper",
6 "pages/input/input",
7 "pages/form/form"
8 ],
9 "window":{
10 "navigationBarBackgroundColor": "#ffffff",
11 "navigationBarTextStyle": "black",
12 "navigationBarTitleText": "微信小程序",
13 "backgroundColor": "#eeeeee",
14 "backgroundTextStyle": "light"
15 },
16 "tabBar":{
17 "borderStyle": "white",
18 "list": [{
19 "pagePath": "pages/index/index",
20 "iconPath":"image/icon_API.png",
21 "selectedIconPath":"image/icon_API_HL.png",
22 "text": "首頁"
23 },{
24 "pagePath": "pages/form/form",
25 "iconPath":"image/plus.png",
26 "selectedIconPath":"image/green_tri.png",
27 "text": "更多"
28 }, {
29 "pagePath": "pages/swiper/swiper",
30 "iconPath":"image/icon_COM.png",
31 "selectedIconPath":"image/icon_COM_HL.png",
32 "text": "其他"
33 }
34 ]
35 }
36 }
四、模版語言及事件系統(tǒng)
/**
* 類似vue的條件渲染語法，熟悉vue的話應(yīng)該不會(huì)陌生
**/
<view wx:if="{{condition}}">
</view>
2):事件系統(tǒng) 以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)：
2):缺點(diǎn)
3):其他問題 以上就是個(gè)人關(guān)于微信小程序的一些觀點(diǎn)和看法，拋磚引玉共同學(xué)習(xí)吧。詳情請(qǐng)移步github查看相關(guān)demo。 |
