小程序端框架结构
2018-04-21 14:25:08 0 举报AI智能生成
对于小程序框架的一些理解而编辑的框架基础总结思维导图
作者其他创作
大纲/内容
框架核心
视图层（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 [切片]
自由主题
0 条评论
下一页
