前段時間比較流行的微信小程序，因為一直沒有所謂內測碼也沒具體關注。拖到現(xiàn)在正好借組內分享的時機來仔細了解一下微信小程序。了解一個新的事物無外乎從是什么（本質），怎么用（具體用法），為什么用（優(yōu)缺點）來學習，首先分析一下微信小程序是什么，聽起來比較高大上，說實話原來我確實挺疑惑，到底這一套是什么開發(fā)機制，native？hybrid？純h5？看網(wǎng)上各種教程上來就說api說語法，感覺不先理清楚是什么的問題就去搬api過來純粹是耍流氓。

一、微信小程序是什么：    

言歸正傳，微信小程序的本質是什么？個人理解微信小程序本質還是一套前端框架，微信團隊基于原來第三方h5頁面在微信里只能通過h5實現(xiàn)原本可以由native實現(xiàn)的功能，例如上傳圖片等。進而采取的開放部分jsbridge的api來方便開發(fā)者。不過既然作為大廠肯定不會僅僅開放部分jsbridge的api就完了，順便微信類似vue、react一樣實現(xiàn)了一套自己的mvvm的框架就是目前的微信小程序。官方文檔這樣描述：框架提供了自己的視圖層描述語言 WXML 和 WXSS，以及基于 JavaScript 的邏輯層框架，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，可以讓開發(fā)者可以方便的聚焦于數(shù)據(jù)與邏輯上。

本質還是一套前端框架，代碼最終將會打包成一份 JavaScript并在小程序啟動的時候運行，直到小程序銷毀。模版語法類似vue，接近原生的自定義標簽。數(shù)據(jù)綁定和渲染類似vue的語法，不過是以wx:開頭(vue 以v: 作為標識) 事件系統(tǒng)類似react一樣定義了一套自己的事件系統(tǒng)。

二、微信運行環(huán)境：

微信小程序運行在三端：iOS、Android 和 用于調試的開發(fā)者工具

在 iOS 上，小程序的 javascript 代碼是運行在 JavaScriptCore 中

在 Android 上，小程序的 javascript 代碼是通過 X5 內核來解析

在 開發(fā)工具上， 小程序的 javascript 代碼是運行在 nwjs（chrome內核） 中

頁面的腳本邏輯是在JsCore中運行，JsCore是一個沒有窗口對象的環(huán)境，所以不能在腳本中使用window等bom對象。所以類似jquery、zepto等通過window或者document來獲得dom對象的庫是不能用來使用的。

三、目錄結構：

小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page。

一個小程序主體部分由三個文件組成，必須放在項目的根目錄，如下：

app.js 邏輯部分，即全局變量或者方法

app.json 公共配置，包括頁面配置等，頂部底部tab的設置，背景顏色等

app.wxss 公共樣式表 可以被具體page樣式覆蓋

app.js代碼（代碼取自微信官方demo）和注釋說明如下：

 //app.js
 // 微信小程序就是調用微信開放jsbridge，來完成微信h開發(fā)中某些原本比較難的功能的特定的微信前端框架
 /**
 * app 即小程序的生命周期管理。 
 * */
 App({
 // 初始化
 onLaunch: function () {
  //調用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{
  //調用登錄接口
  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 頁面結構 對應html，不過是應用了不少自定義標簽
• .wxss 頁面樣式表 對應css文件，優(yōu)先級比appapp.wxss高，css的寫法并未完全支持
• .json 頁面配置 指定特定頁面的title等元素

為了方便開發(fā)者減少配置項，規(guī)定描述頁面的這四個文件必須具有相同的路徑與文件名。

也就是說，我們不用指定某個頁面對應的js或者wxss文件，只需要保持路徑和文件名相同即可。

四、模版語言及事件系統(tǒng)

1):模版語法類似vue，接近原生的自定義標簽。數(shù)據(jù)綁定和渲染類似vue的語法，不過是以wx:開頭(vue 以v: 作為標識)

/**
* 類似vue的條件渲染語法，熟悉vue的話應該不會陌生
**/
<view wx:if="{{condition}}"> 
</view>

2):事件系統(tǒng)

事件系統(tǒng)類似react：定義了一套自己的事件系統(tǒng)。包含一系列常用事件類型：

• touchstart 手指觸摸動作開始
• touchmove 手指觸摸后移動
• touchcancel 手指觸摸動作被打斷，如來電提醒，彈窗
• touchend 手指觸摸動作結束
• tap 手指觸摸后馬上離開
• longtap 手指觸摸后，超過350ms再離開

綁定方式：事件綁定的寫法同組件的屬性，以 key+value 的形式:

以bind或catch開頭，然后跟上事件的類型，如bindtap catchtouchstart，

value 是一個字符串，需要在對應的 Page 中定義同名的函數(shù)。不然當觸發(fā)事件的時候會報錯。

bind事件綁定不會阻止冒泡事件向上冒泡，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):事件對象：包括BaseEvent 基礎事件對象，CustomEvent 自定義事件對象，TouchEvent 觸摸事件對象等。

五、優(yōu)缺點：

1):優(yōu)點

1、提供相應的類似jsbridge的支持，使得某些功能更為方便

2、本質是mvvm的前端框架，簡化操作。

3、提供了比較成型的組件庫，構建比較方便

4、基于微信appapp，使得開發(fā)成本下降

5、支持模塊化

2):缺點 

1、由于框架并非運行在瀏覽器中，js相關bom的方法無法使用。如 document，window等。不過可以獲取當前事件對應的dom對象。相比react還是一樣不建議操作dom，jq，zepto等工具庫也不好使了 

2、又是一套自己的語法，需要學習時間，不過學習曲線不陡峭

3、目前不支持直接引入 node_modules ,開發(fā)者需要使用到node_modules時候建議拷貝出相關的代碼到小程序的目錄中這樣局限性就比較大了，需要自己手動的東西好多

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論