What?
- 基于微信
- 類web
- 原生體驗
- 解決方案
How?
交互原理
邏輯層（App Service）
- 邏輯層由JavaScript編寫
- 邏輯層將數(shù)據(jù)進行處理后發(fā)送給視圖層，同時接受視圖層的事件反饋
- 所有代碼將會打包成一份JavaScript，啟動時運行，直到小程序銷毀
視圖層（View）
- 由WXML與WXSS編寫，由組件進行展示
- 將邏輯層的數(shù)據(jù)反應成視圖，同時將視圖層的事件發(fā)送給邏輯層。
App Service -Manager
- App() -小程序入口
- Page() -頁面入口
- 數(shù)據(jù)綁定、事件分發(fā)、生命周期、路由管理
wxml
js
生命周期
Paste_Image.png
View - WXML
- weixin markup Language
- 支持邏輯、算數(shù)計算
- 支持模板、引用
WXML ---compiler--->JS:generateFunc ---Data--->VirtualTree ----Virtual DOM--->Dom Tree
WXML 具有什么能力？
- 數(shù)據(jù)綁定
<!-- wxml -->
<view> {{ message }}</view>
- 列表渲染
<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
- 條件渲染
<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
- 模板
<!--wxml-->
<template name="staffName"> <view> FirstName: {{firstName}}, LastName: {{lastName}} </view></template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
- 事件
<view bindtap="add"> {{count}} </view>
page.js
Page({
data: {
message: 'Hello MINA!',
array: [1, 2, 3, 4, 5],
view: 'MINA',
staffA: {firstName: 'Hulk', lastName: 'Hu'},
staffB: {firstName: 'Shang', lastName: 'You'},
staffC: {firstName: 'Gideon', lastName: 'Lin'}
count: 1
},
add: function(e) {
this.setData({ count: this.data.count + 1 })
}
})
View - WXSS
- WXSS -weixin style sheet
- 自適應單位 RPX-Responsive Pixel
- 無級聯(lián)-避免被組件內(nèi)結(jié)構(gòu)破壞
WXSS -------compiler-----> JS -----width,DPR------> CSS
View -Render
- 數(shù)據(jù)（Modal）與視圖（View）完全分離
- 邏輯層運行在獨立環(huán)境中，無法直接操作DOM
- 使用WXML模板語言減少維護成本
- 單項數(shù)據(jù)綁定
- 重渲染使用Virtual-DOM減少開銷
與Natice通信圖示
打包
