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

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

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

微信小程序運(yùn)行在三端：iOS、Android 和 用于調(diào)試的開(kāi)發(fā)者工具

在 iOS 上，小程序的 javascript 代碼是運(yùn)行在 JavaScriptCore 中

在 Android 上，小程序的 javascript 代碼是通過(guò) X5 內(nèi)核來(lái)解析

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

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

三、目錄結(jié)構(gòu)：

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

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

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

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

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

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

//app.js
// 微信小程序就是調(diào)用微信開(kāi)放jsbridge，來(lái)完成微信h開(kāi)發(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
}
})

{
"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": "首頁(yè)"
  },{
 "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": "其他"
 }
 ]
}
}

具體頁(yè)面一般包括一下文件（與全局文件類似,不過(guò)僅僅作用于該頁(yè)面）:

.js 頁(yè)面邏輯 就是js沒(méi)什么差別

.wxml 頁(yè)面結(jié)構(gòu) 對(duì)應(yīng)html，不過(guò)是應(yīng)用了不少自定義標(biāo)簽

.wxss 頁(yè)面樣式表 對(duì)應(yīng)css文件，優(yōu)先級(jí)比appapp.wxss高，css的寫(xiě)法并未完全支持

.json 頁(yè)面配置 指定特定頁(yè)面的title等元素

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

也就是說(shuō)，我們不用指定某個(gè)頁(yè)面對(duì)應(yīng)的js或者wxss文件，只需要保持路徑和文件名相同即可。

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

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

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

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

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

touchstart 手指觸摸動(dòng)作開(kāi)始

touchmove 手指觸摸后移動(dòng)

touchcancel 手指觸摸動(dòng)作被打斷，如來(lái)電提醒，彈窗

touchend 手指觸摸動(dòng)作結(jié)束

tap 手指觸摸后馬上離開(kāi)

longtap 手指觸摸后，超過(guò)350ms再離開(kāi)

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

以bind或catch開(kāi)頭，然后跟上事件的類型，如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的前端框架，簡(jiǎn)化操作。

3、提供了比較成型的組件庫(kù)，構(gòu)建比較方便

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

5、支持模塊化

2):缺點(diǎn)

1、由于框架并非運(yùn)行在瀏覽器中，js相關(guān)bom的方法無(wú)法使用。如 document，window等。不過(guò)可以獲取當(dāng)前事件對(duì)應(yīng)的dom對(duì)象。相比react還是一樣不建議操作dom，jq，zepto等工具庫(kù)也不好使了

2、又是一套自己的語(yǔ)法，需要學(xué)習(xí)時(shí)間，不過(guò)學(xué)習(xí)曲線不陡峭

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

以上就是關(guān)于微信小程序開(kāi)發(fā)介紹的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！