What?
- 基于微信
- 類web
- 原生體驗(yàn)
- 解決方案
How?
交互原理
邏輯層（App Service）
- 邏輯層由JavaScript編寫(xiě)
- 邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層那婉，同時(shí)接受視圖層的事件反饋
- 所有代碼將會(huì)打包成一份JavaScript推捐，啟動(dòng)時(shí)運(yùn)行，直到小程序銷毀
視圖層（View）
- 由WXML與WXSS編寫(xiě)滑沧，由組件進(jìn)行展示
- 將邏輯層的數(shù)據(jù)反應(yīng)成視圖杠园，同時(shí)將視圖層的事件發(fā)送給邏輯層枪芒。
App Service -Manager
- App() -小程序入口
- Page() -頁(yè)面入口
- 數(shù)據(jù)綁定边坤、事件分發(fā)、生命周期讼稚、路由管理
wxml
js
生命周期
Paste_Image.png
View - WXML
- weixin markup Language
- 支持邏輯括儒、算數(shù)計(jì)算
- 支持模板、引用
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
- 自適應(yīng)單位 RPX-Responsive Pixel
- 無(wú)級(jí)聯(lián)-避免被組件內(nèi)結(jié)構(gòu)破壞
WXSS -------compiler-----> JS -----width,DPR------> CSS
View -Render
- 數(shù)據(jù)（Modal）與視圖（View）完全分離
- 邏輯層運(yùn)行在獨(dú)立環(huán)境中帮寻，無(wú)法直接操作DOM
- 使用WXML模板語(yǔ)言減少維護(hù)成本
- 單項(xiàng)數(shù)據(jù)綁定
- 重渲染使用Virtual-DOM減少開(kāi)銷
與Natice通信圖示
打包
