What?
- 基于微信
- 类web
- 原生体验
- 解决方案
How?
交互原理
逻辑层（App Service）
- 逻辑层由JavaScript编写
- 逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈
- 所有代码将会打包成一份JavaScript，启动时运行，直到小程序销毁
视图层（View）
- 由WXML与WXSS编写，由组件进行展示
- 将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。
App Service -Manager
- App() -小程序入口
- Page() -页面入口
- 数据绑定、事件分发、生命周期、路由管理
wxml
js
生命周期
Paste_Image.png
View - WXML
- weixin markup Language
- 支持逻辑、算数计算
- 支持模板、引用
WXML ---compiler--->JS:generateFunc ---Data--->VirtualTree ----Virtual DOM--->Dom Tree
WXML 具有什么能力？
- 数据绑定
<!-- 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
- 无级联-避免被组件内结构破坏
WXSS -------compiler-----> JS -----width,DPR------> CSS
View -Render
- 数据（Modal）与视图（View）完全分离
- 逻辑层运行在独立环境中，无法直接操作DOM
- 使用WXML模板语言减少维护成本
- 单项数据绑定
- 重渲染使用Virtual-DOM减少开销
与Natice通信图示
打包
