小程序端框架结构
2018-04-21 14:25:08 0 举报AI智能生成
对于小程序框架的一些理解而编辑的框架基础总结思维导图
作者其他创作
大纲/内容
框架核心
视图层（View)
WXML
WXSS
逻辑层（App Service）
基于 JavaScript 的逻辑层框架
框架核心
响应的数据绑定系统 setData()：当数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。
页面管理：框架管理了小程序的页面路由，开发时只需在页面中通过生命周期函数，方法，数据等注册到框架中即可；具体查看右侧详情<br>
其他
整个小程序所有分包大小不超过 4M<br>
基础库与微信客户端
基础库：小程序的基础框架及微信接口的基础库
小程序需要微信客户端的支撑，基础库只能在对于的微信版本上运行
兼容
识别版本号：通过 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<br>
前台、后台
当用户点击左上角关闭，或者按了设备 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
<b>app.js</b> [小程序逻辑]
<b>onLaunch(options)；</b>生命周期函数；小程序初始化完成时触发，全局仅触发一次
<b>options: Object</b>
<b>path: String</b> 打开小程序路径
<b>query: Object</b> 打开小程序传入的参数对象
<b>scene:Number</b> 打开小程序的场景值
<b>shareTicket: String</b> 转发对象
可通过 wx.getShareInfo 获取更多相关信息
有效性：在当前小程序的生命周期内有效
详细查看：https://developers.weixin.qq.com/miniprogram/dev/api/share.html
<b>referrerInfo:Object</b> 当场景为由从另一个小程序或公众号或App打开时，返回此字段
<b>referrerInfo.appId: String</b> 来源小程序或公众号或App的 appId
<b>referrerInfo.extraData: Object</b> 来源小程序传过来的数据，scene=1037或1038时支持
<b>onShow(options)；</b>生命周期函数；小程序启动，从后台切换到前台时触发
<b>options: Object </b>详见 onLaunch 的 options 参数
<b>onHide()；</b>生命周期函数；小程序从前台切换到后台时触发
<b>onError(msg)；</b>错误监听函数；小程序脚本错误，接口调用失败时触发，msg为错误信息
<b>onPageNotFound(options)；</b>页面不存在监听函数；
<b>共享性</b>：page.js 中可以通过 getApp() 获取到 app.js 的实例
<b>单例模式</b>
在 app.js 通过 this 可获取app实例，而 page.js 中只能通过 getApp() 获取到app实例
场景值，详情查看：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/scene.html
... 其他公共函数
<b>app.json</b> [小程序配置]
<b>pages: String Array </b>页面配置，除子包外的页面都需要在这注册，第一项默认为<b>小程序首页</b>
<b>window: Object</b> 默认页面的窗口设置
<b>navigationBarBackgroundColor: HexColor</b> 导航栏背景颜色
<b>navigationBarTextStyle: String </b>导航栏标题颜色，仅支持 black/white
<b>navigationBarTitleText: String </b>导航栏标题文字内容
<b>navigationStyle: String </b>导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮 [微信 6.6.0 版本以上支持]
<b>backgroundColor: HexColor</b> 窗口的背景色
<b>backgroundTextStyle: String </b>下拉 loading 的样式，仅支持 dark/light
<b>backgroundColorTop: HexColor </b>顶部窗口的背景色，仅 iOS 支持 [微信 6.5.16 版本以上支持]
<b>backgroundColorBottom: HexColor</b> 底部窗口的背景色，仅 iOS 支持 [微信 6.5.16 版本以上支持]
<b>enablePullDownRefresh: Boolean </b>是否开启下拉刷新
<b>onReachBottomDistance:Number </b>页面上拉触底事件触发时距页面底部距离，单位为px，Default=50
<b>tabBar: Object</b> 底部 tarBar 设置
<b>color: HexColor</b> 默认颜色
<b>selectedColor: HexColor</b> 选中时的颜色
<b>backgroundColor: HexColor</b> 背景颜色
<b>borderStyle: HexColor</b> 边框的颜色， 仅支持 black/white
<b>list: Array </b>tab 列表，2 <= tabSize <= 5
<b>pagePath: String</b> 页面路径，必须在 pages 中先定义
<b>text: String</b> 按钮文字
<b>iconPath: String</b> 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片
<b>selectedIconPath: String</b> 选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效
<b>position: String</b> tab的在窗口位置，可选值 bottom、top
<b>networkTimeout:Object</b> 网络超市设置
<b>request: Number</b> wx.request 的超时时间，Default: 60000毫秒
<b>connectSocket: Number</b> wx.connectSocket 的超时时间，Default: 60000毫秒
<b>uploadFile: Number</b> wx.uploadFile 的超时时间，Default: 60000毫秒
<b>downloadFile: Number</b> wx.downloadFile 的超时时间， Default: 60000毫秒
<b>debug: Boolean</b> debug 模式开关，开启后自动 info 注册，页面路由，数据更新...信息
<b>subPackages: Array</b> 分包
<b>root: String</b> 分包主路径
<b>pages: Object</b> 子路径；例如主路径为 PageA ，子路径为 page1，那么当前页面的绝对路径为：PageA/page1
加载规则：首次访问到子包目录时会加载分包，之后与主包无异
<b>说明</b>
1、非分包的目录（ pages ）都将打包到主包内
2、建议按照功能区分，且分包内不能包含另一个分包
3、tab 页面必须在主包中
引用规则：子包可引用主包的资源，但是不能引用其他分包的资源
注意：单个分包/主包大小不能超过 2M<br>
<b>app.wxss</b> [小程序公共样式表]
<b>共享性</b>：所有页面都可以使用，不需要在 page.wxss 中 @import
类似H5 .css 文件，区别在与标签的使用
注意运行环境的样式兼容
<b>ext.json</b> [第三方平台配置]
<b>extEnable: Boolean</b> 是否启用ext.json
<b>extAppid: String</b> 配置的小程序Appid
<b>ext: Object</b> 开发者自定义的数据字段；通过 wx.getExtConfig() / wx.getExtConfigSync() 可以获取到自定义配置内容，参数由上传版本时设置
<b>extPages：Object</b> 单独设置每个页面的json；当配置启用时，page对应的json配置会被覆盖
<b>directCommit：Boolean</b> 是否直接提交到待审核列表，为true时上传会默认为 extAppid 小程序的上传代码，反之会上传到第三方平台的草稿箱
... 其他与 app.json 相同的配置，ext.json 将覆盖 app.json 对于字段配置
<b>pages</b> [小程序页面]
pageA
<b>page.js</b> [页面逻辑]
<b>data：Object</b> 页面的初始化数据
<b>onLoad(options); </b>生命周期函数；监听页面加载,页面未卸载前仅加载一次
<b>onReady();</b> 生命周期函数；页面初次渲染完成后触发，页面未卸载前仅加载一次
<b>onShow();</b> 生命周期函数；页面在前台显示时触发
<b>onHide();</b> 生命周期函数；页面切换到后台 / 从该页面跳转到其他页面时触发
<b>onUnload();</b> 生命周期函数；页面卸载时触发
<b>onPullDownRefresh();</b> 监听用户下拉动作，需要配合 page.json 中开启 enablePullDownRefresh: true
<b>onShareAppMessage();</b> 添加该函数后，用户点击右上角会多一个“转发”按钮
<b>onReachBottom(); </b> 页面上拉触底事件的处理函数
<b>onPageScroll(); </b>页面滑动时触发该函数
<b>onTabItemTap(); </b>当前页面为 TabBar 时触发的函数
... 其他函数/对象/变量...；Page 实例内，调用实例内可以通过 this 调用其他函数/对象//变量...
<b>page.json</b> [页面配置]
可以配置 app.json 中 window 的相关字段，且不需要声明“window”
page.json 将覆盖 app.json 的 window 配置
<b>disableScroll: Boolean</b> 设置为 true 时页面禁止滚动
<b>page.wxml</b> [页面结构]
<view> 等同于 <div>、<image> 等同于<img>...
<b><template> 模板</b>
通过<template name="TemplateName"> 新建
支持 <import src="page.wxml"/> 引入 'page.wxml' 中定义的<template>
通过<template is="TemplateName"> 的 is 指定使用的模板
变量作用域：<template>内的变量只能通过<template data=""> 中的传入；无法直接读取 page.data 的值
引用：<b><include src="page.wxml"/></b> ；支持将 'page.wxml' 中除<template/>、<wxs/>外的整个代码引入
<b><wxs>/.wxs [WeiXin Script 小程序的脚本语言]</b>，结合 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/
<b><block /></b> : 不是一个组件，它仅仅是一个包装元素，一般作用在条件/列表渲染中
<b><input></b>事件触发注意事项
取值：e.detail.value
当 input 中输入的内容不需要实时校验时，可直接监听 blur 事件，保证数值的完整性
组件是一个 native 组件，字体是系统字体，所以无法设置 font-family
<b>响应的数据绑定</b><br>
使用 Mustache 语法（双大括号）将变量包起来；变量为 Page.data / setData() 中的属性字段
动态响应：page.js 中通过 this.setData() 更新变量的值时，wxml 也会进行相应更新
详情查看：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/data.html
<b>列表渲染 </b>wx:for
wx:for-item：对象变量名<br>
wx:for-index：下标变量名
wx:key：唯一的标记符，可以是 this 表示当前对象，或者对象中的唯一标记
<b>条件渲染</b>
wx:if
wx:elif 等同于 else if 判断
wx: else
<b>事件绑定</b>
冒泡事件”bind“：向上冒泡，当组件触发事件时，会触发父组件的事件
非冒泡事件”catch“：只触发当前组件的事件
事件返回详情查看：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
... 其他组件请直接访问：https://developers.weixin.qq.com/miniprogram/dev/component/
<b>page.wxss</b> [页面样式]
类似H5 .css 文件，区别在与标签的使用
支持 @import "page.wxss" 引入其他样式表
注意运行环境的样式兼容
...
<b>libs</b> [其他 Js 包]
request.js
storage.js
wxcommon.js
...
<b>images</b> [切片]
自由主题
0 条评论
下一页
