微信小程序探究

時間 2020-07-11

標籤微信程序探究简体版

原文原文鏈接

　　前段時間比較流行的微信小程序，由於一直沒有所謂內測碼也沒具體關注。拖到如今正好借組內分享的時機來仔細瞭解一下微信小程序。瞭解一個新的事物無外乎從是什麼（本質），怎麼用（具體用法），爲何用（優缺點）來學習，首先分析一下微信小程序是什麼，聽起來比較高大上，說實話原來我確實挺疑惑，到底這一套是什麼開發機制，native？hybrid？純h5？看網上各類教程上來就說api說語法，感受不先理清楚是什麼的問題就去搬api過來純粹是耍流氓。javascript

　　1、微信小程序是什麼： css

　　言歸正傳，微信小程序的本質是什麼？我的理解微信小程序本質仍是一套前端框架，微信團隊基於原來第三方h5頁面在微信裏只能經過h5實現本來能夠由native實現的功能，例如上傳圖片等。進而採起的開放部分jsbridge的api來方便開發者。不過既然做爲大廠確定不會僅僅開放部分jsbridge的api就完了，順便微信相似vue、react同樣實現了一套本身的mvvm的框架就是目前的微信小程序。官方文檔這樣描述：框架提供了本身的視圖層描述語言 WXML 和 WXSS，以及基於 JavaScript 的邏輯層框架，並在視圖層與邏輯層間提供了數據傳輸和事件系統，可讓開發者能夠方便的聚焦於數據與邏輯上。html

　　本質仍是一套前端框架，代碼最終將會打包成一份 JavaScript並在小程序啓動的時候運行，直到小程序銷燬。模版語法相似vue，接近原生的自定義標籤。數據綁定和渲染相似vue的語法，不過是以wx:開頭(vue 以v: 做爲標識) 事件系統相似react同樣定義了一套本身的事件系統。前端

　　2、微信運行環境：vue

　　微信小程序運行在三端：iOS、Android 和用於調試的開發者工具
　　在 iOS 上，小程序的 javascript 代碼是運行在 JavaScriptCore 中
　　在 Android 上，小程序的 javascript 代碼是經過 X5 內核來解析
　　在開發工具上，小程序的 javascript 代碼是運行在 nwjs（chrome內核）中
　　頁面的腳本邏輯是在JsCore中運行，JsCore是一個沒有窗口對象的環境，因此不能在腳本中使用window等bom對象。因此相似jquery、zepto等經過window或者document來得到dom對象的庫是不能用來使用的。
java

3、目錄結構：
　　小程序包含一個描述總體程序的 app 和多個描述各自頁面的 page。
　　一個小程序主體部分由三個文件組成，必須放在項目的根目錄，以下：
　　app.js 邏輯部分，即全局變量或者方法
　　app.json 公共配置，包括頁面配置等，頂部底部tab的設置，背景顏色等
　　app.wxss 公共樣式表能夠被具體page樣式覆蓋node

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

 1 //app.js
 2 // 微信小程序就是調用微信開放jsbridge，來完成微信h5開發中某些本來比較難的功能的特定的微信前端框架
 3 /**
 4  * app 即小程序的生命週期管理。 
 5  * */
 6 App({
 7   // 初始化
 8   onLaunch: function () {
 9     //調用API從本地緩存中獲取數據
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       //調用登陸接口
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（文件中不容許有註釋）示例以下：jquery

 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 }

　　具體頁面通常包括一下文件（與全局文件相似,不過僅僅做用於該頁面）:
　　*.js 頁面邏輯就是js沒什麼差異
　　*.wxml 頁面結構對應html，不過是應用了很多自定義標籤
　　*.wxss 頁面樣式表對應css文件，優先級比appapp.wxss高，css的寫法並未徹底支持
　　*.json 頁面配置指定特定頁面的title等元素
　　爲了方便開發者減小配置項，規定描述頁面的這四個文件必須具備相同的路徑與文件名。
　　也就是說，咱們不用指定某個頁面對應的js或者wxss文件，只須要保持路徑和文件名相同便可。git

　　4、模版語言及事件系統
　　1):模版語法相似vue，接近原生的自定義標籤。數據綁定和渲染相似vue的語法，不過是以wx:開頭(vue 以v: 做爲標識)

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

　　2):事件系統
　　事件系統相似react：定義了一套本身的事件系統。包含一系列經常使用事件類型：
touchstart 手指觸摸動做開始
touchmove 手指觸摸後移動
touchcancel 手指觸摸動做被打斷，如來電提醒，彈窗
touchend 手指觸摸動做結束
tap 手指觸摸後立刻離開
longtap 手指觸摸後，超過350ms再離開
　　綁定方式：事件綁定的寫法同組件的屬性，以 key+value 的形式:

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

　　value 是一個字符串，須要在對應的 Page 中定義同名的函數。否則當觸發事件的時候會報錯。

　　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 觸摸事件對象等。

　　5、優缺點：
　　1):優勢
　　　　一、提供相應的相似jsbridge的支持，使得某些功能更爲方便
　　　　二、本質是mvvm的前端框架，簡化操做。
　　　　三、提供了比較成型的組件庫，構建比較方便
　　　　四、基於微信appapp，使得開發成本降低
　　　　五、支持模塊化

　　2):缺點
　　　　一、因爲框架並不是運行在瀏覽器中，js相關bom的方法沒法使用。如 document，window等。不過能夠獲取當前事件對應的dom對象。相比react仍是同樣不建議操做dom，jq，zepto等工具庫也很差使了
　　　　二、又是一套本身的語法，須要學習時間，不過學習曲線不陡峭
　　　　三、目前不支持直接引入 node_modules ,開發者須要使用到node_modules時候建議拷貝出相關的代碼到小程序的目錄中這樣侷限性就比較大了，須要本身手動的東西好多

　　3):其餘問題
　　能夠參考https://mp.weixin.qq.com/debug/wxadoc/dev/qa/qa.html?t=20161122

以上就是我的關於微信小程序的一些觀點和見解，拋磚引玉共同窗習吧。詳情請移步github查看相關demo。