微信小程序運(yùn)行流程

微信小程序運(yùn)行流程，濟(jì)寧網(wǎng)站建設(shè)，濟(jì)寧微信公眾號(hào)開(kāi)發(fā)，濟(jì)寧seo優(yōu)化推廣，濟(jì)寧手機(jī)APP開(kāi)發(fā)，濟(jì)寧微商城開(kāi)發(fā)，濟(jì)寧做網(wǎng)站，濟(jì)寧網(wǎng)絡(luò)公司，濟(jì)寧果殼科技

濟(jì)寧果殼科技

2018-05-28 09:46:29

0

4053

一.微信小程序是啥

本質(zhì)其實(shí)就是（混合）的app 介于web app與native 原生app之間，具備豐富的調(diào)用手機(jī)各種功能的接口，同時(shí)又具備靈活性，跨平臺(tái)

1. 運(yùn)行環(huán)境差異

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

三端的腳本執(zhí)行環(huán)境以及用于渲染非原生組件的環(huán)境是各不相同的：

在 iOS 上，小程序的 javascript 代碼是運(yùn)行在 JavaScriptCore 中，是由 WKWebView 來(lái)渲染的，環(huán)境有 iOS8、iOS9、iOS10
在 Android 上，小程序的 javascript 代碼是通過(guò) X5 JSCore來(lái)解析，是由 X5 基于 Mobile Chrome 53/57 內(nèi)核來(lái)渲染的
在開(kāi)發(fā)工具上，小程序的 javascript 代碼是運(yùn)行在 nwjs 中，是由 Chrome Webview 來(lái)渲染的來(lái)自官方文檔說(shuō)明

2.小程序目錄結(jié)

project

├── pages

| ├── index

| | ├── index.json index 頁(yè)面配置

| | ├── index.js index 頁(yè)面邏輯

| | ├── index.wxml index 頁(yè)面結(jié)構(gòu)

| | └── index.wxss index 頁(yè)面樣式表

| └── log

| ├── log.json log 頁(yè)面配置

| ├── log.wxml log 頁(yè)面邏輯

| ├── log.js log 頁(yè)面結(jié)構(gòu)

| └── log.wxss log 頁(yè)面樣式表

├── app.js 小程序邏輯

├── app.json 小程序公共設(shè)置

└── app.wxss 小程序公共樣式表

二、小程序架構(gòu)

微信小程序的框架包含兩部分View視圖層(可能存在多個(gè))、App Service邏輯層(一個(gè))，View層用來(lái)渲染頁(yè)面結(jié)構(gòu)，AppService層用來(lái)邏輯處理、數(shù)據(jù)請(qǐng)求、接口調(diào)用，它們?cè)趦蓚€(gè)線程里運(yùn)行。

視圖層使用WebView渲染，邏輯層使用JSCore運(yùn)行。

視圖層和邏輯層通過(guò)系統(tǒng)層的WeixinJsBridage進(jìn)行通信，邏輯層把數(shù)據(jù)變化通知到視圖層，觸發(fā)視圖層頁(yè)面更新，視圖層把觸發(fā)的事件通知到邏輯層進(jìn)行業(yè)務(wù)處理。

重點(diǎn)講一下wxs :

由于view 與 App Service是不同線程,之前是傳遞數(shù)據(jù),當(dāng)遇到一些數(shù)據(jù)需要在view中處理時(shí),就可以用wxs來(lái)處理,如下所示定義 <wxs module="tools">,使用說(shuō)明

index.js

//獲取應(yīng)用實(shí)例

const app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false
  },
 //事件處理函數(shù)
  bindViewTap: function() {
  },
  onLoad: function() {
  }
})
<!--index.wxml-->
<view >
 <view >
 <text >{{tools.bar(motto)}}</text>
 <text >{{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>

濟(jì)寧果殼科技-濟(jì)寧小程序開(kāi)發(fā)-濟(jì)寧微信公眾號(hào)開(kāi)發(fā)-濟(jì)寧SEO優(yōu)化-濟(jì)寧網(wǎng)站建設(shè)-濟(jì)寧代運(yùn)營(yíng)