微信小程序運行流程實例分析

本文小編為大家詳細介紹“微信小程序運行流程實例分析”，內容詳細，步驟清晰，細節處理妥當，希望這篇“微信小程序運行流程實例分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

一.微信小程序是啥

本質其實就是（混合）的app 介于web app與native 原生app之間，具備豐富的調用手機各種功能的接口，同時又具備靈活性，跨平臺

1. 運行環境差異

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

三端的腳本執行環境以及用于渲染非原生組件的環境是各不相同的：

• 在 iOS 上，小程序的 javascript 代碼是運行在 JavaScriptCore 中，是由 WKWebView 來渲染的，環境有 iOS8、iOS9、iOS10 

• 在 Android 上，小程序的 javascript 代碼是通過 X5 JSCore來解析，是由 X5 基于 Mobile Chrome 53/57 內核來渲染的 

• 在 開發工具上， 小程序的 javascript 代碼是運行在 nwjs 中，是由 Chrome Webview 來渲染的來自官方文檔說明

2.小程序目錄結

project
├── pages
|   ├── index
|   |   ├── index.json  index 頁面配置
|   |   ├── index.js    index 頁面邏輯
|   |   ├── index.wxml  index 頁面結構
|   |   └── index.wxss  index 頁面樣式表
|   └── log
|       ├── log.json    log 頁面配置
|       ├── log.wxml    log 頁面邏輯
|       ├── log.js      log 頁面結構
|       └── log.wxss    log 頁面樣式表
├── app.js              小程序邏輯
├── app.json            小程序公共設置
└── app.wxss            小程序公共樣式表

二、小程序架構

微信小程序的框架包含兩部分View視圖層(可能存在多個)、App Service邏輯層(一個)，View層用來渲染頁面結構，AppService層用來邏輯處理、數據請求、接口調用，它們在兩個線程里運行。

視圖層使用WebView渲染，邏輯層使用JSCore運行。

視圖層和邏輯層通過系統層的WeixinJsBridage進行通信，邏輯層把數據變化通知到視圖層，觸發視圖層頁面更新，視圖層把觸發的事件通知到邏輯層進行業務處理。

重點講一下wxs :

由于view 與  App Service是不同線程,之前是傳遞數據,當遇到一些數據需要在view中處理時,就可以用wxs來處理,如下所示定義 <wxs module="tools">,使用說明

index.js

//獲取應用實例
const app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false
  },
  //事件處理函數
  bindViewTap: function() {
  },
  onLoad: function() {
  }
})

<!--index.wxml-->
<view class="container">
  <view class="usermotto"><text class="user-motto">{{tools.bar(motto)}}</text><text class="user-motto">{{tools.foo}}</text>
  </view>
  <wxs module="tools">
  var foo = "'hello world' from comm.wxs";
  var bar = function(d) {
    return '啥子玩意'+d;
  }
  module.exports = {
    foo: foo,
    bar: bar
  };
  </wxs>
</view>

讀到這里，這篇“微信小程序運行流程實例分析”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。