微信小程序框架解析

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通信图示 打包