小程序端框架结构思维导图模板_ProcessOn思维导图、流程图

框架核心

视图层（View)

WXML

WXSS

逻辑层（App Service）

基于 JavaScript 的逻辑层框架

框架核心

响应的数据绑定系统 setData()：当数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

页面管理：框架管理了小程序的页面路由，开发时只需在页面中通过生命周期函数，方法，数据等注册到框架中即可；具体查看右侧详情

其他

整个小程序所有分包大小不超过 4M

基础库与微信客户端

基础库：小程序的基础框架及微信接口的基础库

小程序需要微信客户端的支撑，基础库只能在对于的微信版本上运行

兼容

识别版本号：通过 wx.getSystemInfo() / wx.getSystemInfoSync() 获取版本号

wx.canIUse(String) : https://developers.weixin.qq.com/miniprogram/dev/api/api-caniuse.html

if('接口名称') 判断

运行机制

热启动

小程序从后台运行切换到前台

冷启动

首次打开或者小程序被销毁后重新打开

更新机制

下一次冷启动时更新

通过 wx.getUpdateManager() 获取的单例对象强制更新；详情查看：https://developers.weixin.qq.com/miniprogram/dev/api/getUpdateManager.html

前台、后台

当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台

销毁

小程序进入后台后，超过一定时间后（目前是5分钟）会被微信主动销毁

当短时间内（5s）连续收到两次以上收到系统内存告警，会进行小程序的销毁

再次打开小程序：

A [打开首页]

场景值有 1001, 1019, 1022, 1023, 1038, 1056

B [除A场景意外的其他页面]

wx.reLaunch()

运行环境

IOS

小程序的 javascript 代码是运行在 JavaScriptCore 中，是由 WKWebView 来渲染的，环境有 iOS8、iOS9、iOS10

Android

小程序的 javascript 代码是通过 X5 JSCore来解析，是由 X5 基于 Mobile Chrome 53/57 内核来渲染的

开发工具

小程序的 javascript 代码是运行在 nwjs 中，是由 Chrome Webview 来渲染的

自由主题

自定义组件

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

插件

https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/

多线程

https://developers.weixin.qq.com/miniprogram/dev/framework/workers.html

app.js [小程序逻辑]

onLaunch(options)；生命周期函数；小程序初始化完成时触发，全局仅触发一次

options: Object

path: String 打开小程序路径

query: Object 打开小程序传入的参数对象

scene:Number 打开小程序的场景值

shareTicket: String 转发对象

可通过 wx.getShareInfo 获取更多相关信息

有效性：在当前小程序的生命周期内有效

详细查看：https://developers.weixin.qq.com/miniprogram/dev/api/share.html

referrerInfo:Object 当场景为由从另一个小程序或公众号或App打开时，返回此字段

referrerInfo.appId: String 来源小程序或公众号或App的 appId

referrerInfo.extraData: Object  来源小程序传过来的数据，scene=1037或1038时支持

onShow(options)；生命周期函数；小程序启动，从后台切换到前台时触发

options: Object 详见 onLaunch 的 options 参数

onHide()；生命周期函数；小程序从前台切换到后台时触发

onError(msg)；错误监听函数；小程序脚本错误，接口调用失败时触发，msg为错误信息

onPageNotFound(options)；页面不存在监听函数；

共享性：page.js 中可以通过 getApp() 获取到 app.js 的实例

单例模式

在 app.js 通过 this 可获取app实例，而 page.js 中只能通过 getApp() 获取到app实例

场景值，详情查看：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/scene.html

... 其他公共函数

app.json [小程序配置]

pages: String Array 页面配置，除子包外的页面都需要在这注册，第一项默认为小程序首页

window: Object 默认页面的窗口设置

navigationBarBackgroundColor: HexColor 导航栏背景颜色

navigationBarTextStyle: String 导航栏标题颜色，仅支持 black/white

navigationBarTitleText: String 导航栏标题文字内容

navigationStyle: String 导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮 [微信 6.6.0 版本以上支持]

backgroundColor: HexColor 窗口的背景色

backgroundTextStyle: String 下拉 loading 的样式，仅支持 dark/light

backgroundColorTop: HexColor 顶部窗口的背景色，仅 iOS 支持 [微信 6.5.16 版本以上支持]

backgroundColorBottom: HexColor 底部窗口的背景色，仅 iOS 支持 [微信 6.5.16 版本以上支持]

enablePullDownRefresh: Boolean 是否开启下拉刷新

onReachBottomDistance:Number 页面上拉触底事件触发时距页面底部距离，单位为px，Default=50

tabBar: Object  底部 tarBar 设置

color: HexColor  默认颜色

selectedColor: HexColor  选中时的颜色

backgroundColor: HexColor  背景颜色

borderStyle: HexColor  边框的颜色，仅支持 black/white

list: Array tab 列表，2 <= tabSize <= 5

pagePath: String  页面路径，必须在 pages 中先定义

text: String  按钮文字

iconPath: String  图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片

selectedIconPath: String  选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效

position: String tab的在窗口位置，可选值 bottom、top

networkTimeout:Object 网络超市设置

request: Number wx.request 的超时时间，Default: 60000毫秒

connectSocket: Number  wx.connectSocket 的超时时间，Default: 60000毫秒

uploadFile: Number wx.uploadFile 的超时时间，Default: 60000毫秒

downloadFile: Number wx.downloadFile 的超时时间， Default: 60000毫秒

debug: Boolean debug 模式开关，开启后自动 info 注册，页面路由，数据更新...信息

subPackages: Array 分包

root: String 分包主路径

pages: Object 子路径；例如主路径为 PageA ，子路径为 page1，那么当前页面的绝对路径为：PageA/page1

加载规则：首次访问到子包目录时会加载分包，之后与主包无异

说明

1、非分包的目录（ pages ）都将打包到主包内

2、建议按照功能区分，且分包内不能包含另一个分包

3、tab 页面必须在主包中

引用规则：子包可引用主包的资源，但是不能引用其他分包的资源

注意：单个分包/主包大小不能超过 2M

app.wxss [小程序公共样式表]

共享性：所有页面都可以使用，不需要在 page.wxss 中 @import

类似H5 .css 文件，区别在与标签的使用

注意运行环境的样式兼容

ext.json [第三方平台配置]

extEnable: Boolean  是否启用ext.json

extAppid: String 配置的小程序Appid

ext: Object  开发者自定义的数据字段；通过 wx.getExtConfig() / wx.getExtConfigSync() 可以获取到自定义配置内容，参数由上传版本时设置

extPages：Object  单独设置每个页面的json；当配置启用时，page对应的json配置会被覆盖

directCommit：Boolean  是否直接提交到待审核列表，为true时上传会默认为 extAppid 小程序的上传代码，反之会上传到第三方平台的草稿箱

...  其他与 app.json 相同的配置，ext.json 将覆盖 app.json 对于字段配置

pages [小程序页面]

pageA

page.js [页面逻辑]

data：Object  页面的初始化数据

onLoad(options); 生命周期函数；监听页面加载,页面未卸载前仅加载一次

onReady(); 生命周期函数；页面初次渲染完成后触发，页面未卸载前仅加载一次

onShow(); 生命周期函数；页面在前台显示时触发

onHide(); 生命周期函数；页面切换到后台 / 从该页面跳转到其他页面时触发

onUnload(); 生命周期函数；页面卸载时触发

onPullDownRefresh(); 监听用户下拉动作，需要配合 page.json 中开启 enablePullDownRefresh: true

onShareAppMessage();  添加该函数后，用户点击右上角会多一个“转发”按钮

onReachBottom();  页面上拉触底事件的处理函数

onPageScroll(); 页面滑动时触发该函数

onTabItemTap();  当前页面为 TabBar 时触发的函数

... 其他函数/对象/变量...；Page 实例内，调用实例内可以通过 this 调用其他函数/对象//变量...

page.json [页面配置]

可以配置 app.json 中 window 的相关字段，且不需要声明“window”

page.json 将覆盖 app.json 的 window 配置

disableScroll: Boolean 设置为 true 时页面禁止滚动

page.wxml [页面结构]

<view> 等同于 <div>、<image> 等同于<img>...

<template> 模板

通过<template name="TemplateName"> 新建

支持 <import src="page.wxml"/> 引入 'page.wxml' 中定义的<template>

通过<template is="TemplateName"> 的 is 指定使用的模板

变量作用域：<template>内的变量只能通过<template data=""> 中的传入；无法直接读取 page.data 的值

引用：<include src="page.wxml"/> ；支持将 'page.wxml'  中除<template/>、<wxs/>外的整个代码引入

<wxs>/.wxs [WeiXin Script 小程序的脚本语言]，结合 wxml 使用

<wxs module="ModuleName"> wxml 内通过标签定义

xxx.wxs 模块

wxml 通过<wxs src="xxx.wxs" module="ModuleName" />方式引入

单例模式：首次引用后，其他页面引用的都是同一个实例；一直没引用时，不解析不运行

require函数：引用其他模块，路径需相对路径

通过 module 对象的 exports 属性共享变量/方法/对象...

名称唯一：<wxs  module="ModuleName" /> 中通过 module 定义模块名称，存在多个相同名称的<wxs>时，后者覆盖前者

隔离性：1、当 wxml 被<include>/<import> 时，<wxs> 是不被引用的；2、<template> 中也只能使用标签内的<wxs>

独立性：1、不能调用 JavaScript 和小程序的Api；2、不能作为事件回调；3、不依赖基础库，所有版本可用；

其他详细访问：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/

<block /> : 不是一个组件，它仅仅是一个包装元素，一般作用在条件/列表渲染中

<input>事件触发注意事项

取值：e.detail.value

当 input 中输入的内容不需要实时校验时，可直接监听 blur 事件，保证数值的完整性

组件是一个 native 组件，字体是系统字体，所以无法设置 font-family

响应的数据绑定

使用 Mustache 语法（双大括号）将变量包起来；变量为 Page.data / setData() 中的属性字段

动态响应：page.js 中通过 this.setData() 更新变量的值时，wxml 也会进行相应更新

详情查看：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/data.html

列表渲染 wx:for

wx:for-item：对象变量名

wx:for-index：下标变量名

wx:key：唯一的标记符，可以是 this 表示当前对象，或者对象中的唯一标记

条件渲染

wx:if

wx:elif 等同于 else if 判断

wx: else

事件绑定

冒泡事件”bind“：向上冒泡，当组件触发事件时，会触发父组件的事件

非冒泡事件”catch“：只触发当前组件的事件

事件返回详情查看：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

... 其他组件请直接访问：https://developers.weixin.qq.com/miniprogram/dev/component/

page.wxss [页面样式]

类似H5 .css 文件，区别在与标签的使用

支持 @import "page.wxss" 引入其他样式表

注意运行环境的样式兼容

...

libs [其他 Js 包]

request.js

storage.js

wxcommon.js

...

images [切片]

自由主题