微信小程序教程(第四篇)
小程序开发基本框架及其限制与优化
- 开发基本框架(MINA框架)
文章图片
└─ Project-folder/ ·································· 项目所在目录
├─ pages/ ······································ 页面目录
│ ├─ index/ ··································· index页面
│ │ ├─ index.js ······························ index页面逻辑
│ │ ├─ index.wxml ···························· index页面结构
│ │ └─ index.wxss ···························· index页面样式
│ │ └─ index.json ···························· index页面配置(局部)
│ └─ logs/ ···································· logs页面
│ ├─ logs.js ······························· logs页面逻辑
│ ├─ logs.wxml ····························· logs页面结构
│ └─ logs.wxss ····························· logs页面样式
├─ utils/ ······································ 公共脚本目录
│ └─ util.js ·································· 工具脚本
├─ app.js ······································ 应用程序逻辑用于定义整个应用的逻辑
用来监听并处理小程序的生命周期函数、声明全局变量
├─ app.json ································ 应用程序配置(全局)对整个小程序的全局配置
配置小程序是由哪些页面组成,配置小程序的窗口背景色等
└─ app.wxss ······························· 应用程序公共样式 用来设置整个应用的公共样式
1.app函数是一个全局函数,用来创建一个应用程序实例,每个应用程序都会有他的生命周期
2.page也是一个全局函数,用来创建页面对象
3.wxml文件是XML语法,不是HTML语法。简单来说:wxml ≈ xml + 事件系统 + 模板引擎
4.json文件是配置文件,按需而建。但app.json必须建
5.页面的所有配置或设置都会优先于全局配置或设置,即局部会覆盖全局的配置
6.WXSS具有CSS大部分特性,同时进行了扩充及修改。尺寸单位(rpx)可以根据屏幕宽度进行自适应。而目前只支持少量选择器(.class/#id/element/element, element/::after/::before)
7.每个文件夹内的文件名次统一,只有后缀名不同,因为json配置文件中最终会将所有的页面整合成一个页面,通过相同的名称,将页面与逻辑js、样式进行关联匹配。
8. 当应用程序启动时会自动执行项目目录下的app.js文件,在app.js中通过调用全局App([option])方法创建一个应用程序实例,其中通过参数指定的一些特定的方法,会在特定的执行时机去执行,也就是说通常所说的生命周期事件方法。其中app.js,app.json是必需的。
小程序的生命周期函数
属性 | 类型 | 描述 | 触发时机 |
onLaunch | Function | 生命周期函数--监听小程序初始化 | 当小程序初始化完成时,会触发 onLaunch(全局只触发一次) |
onShow | Function | 生命周期函数--监听小程序显示 | 当小程序启动,或从后台进入前台显示,会触发 onShow |
onHide | Function | 生命周期函数--监听小程序隐藏 | 当小程序从前台进入后台,会触发 onHide |
其他 | Any | 开发者可以添加任意的函数或数据到 Object 参数中,用this 可以访问 | |
文章图片
生命周期函数
- onLoad: 页面加载
- 一个页面只会调用一次。
- 接收页面参数可以获取wx.navigateTo和wx.redirectTo及
中的 query。
- onShow: 页面显示
- 每次打开页面都会调用一次。
- onReady: 页面初次渲染完成
- 一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
- 对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
- onHide: 页面隐藏
- 当navigateTo或底部tab切换时调用。
- onUnload: 页面卸载
- 当redirectTo或navigateBack的时候调用。
文章图片
页面的初始数据、生命周期函数、事件处理函数
属性 | 类型 | 描述 |
data | Object | 页面的初始数据 |
onLoad | Function | 生命周期函数--监听页面加载 |
onReady | Function | 生命周期函数--监听页面初次渲染完成 |
onShow | Function | 生命周期函数--监听页面显示 |
onHide | Function | 生命周期函数--监听页面隐藏 |
onUnload | Function | 生命周期函数--监听页面卸载 |
onPullDownRefresh | Function | 页面相关事件处理函数--监听用户下拉动作 |
onReachBottom | Function | 页面上拉触底事件的处理函数 |
其他 | Any | 开发者可以添加任意的函数或数据到 object 参数中,在页面的函数中用 this 可以访问 |
文章图片
页面的路由
在小程序中所有页面的路由全部由框架进行管理,对于路由的触发方式及页面生命周期函数如下:
路由方式 | 触发时机 | 路由后页面 | 路由前页面 |
初始化 | 小程序打开的第一个页面 | onLoad,onShow | |
打开新页面 | 调用 API wx.navigateTo 或使用组件 |
onLoad,onShow | onHide |
页面重定向 | 调用 API wx.redirectTo 或使用组件 |
onLoad,onShow | onUnload |
页面返回 | 调用 API wx.navigateBack或用户按左上角返回按钮 | onShow | onUnload(多层页面返回每个页面都会按顺序触发onUnload) |
Tab 切换 | 多 Tab 模式下用户切换 Tab | 第一次打开 onLoad,onshow;否则 onShow | onHide |
目前支持的选择器有:
选择器 | 样例 | 样例描述 |
.class | .intro | 选择所有拥有 class="intro" 的组件 |
#id | #firstname | 选择拥有 id="firstname" 的组件 |
element | view | 选择所有 view 组件 |
element, element | view, checkbox | 选择所有文档的 view 组件和所有的 checkbox 组件 |
::after | view::after | 在 view 组件后边插入内容 |
::before | view::before | 在 view 组件前边插入内容 |
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
rem(root em): 规定屏幕宽度为20rem;1rem = (750/20)rpx 。
建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准
设备 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) |
iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
(一)限制:
- 通过传入字符串来执行代码的能力都禁用了
禁掉的这些功能,对我们开发来说影响比较显著的应该是字符串转json,以往我们都是通过new Function、eval来处理后台cgi的返回。(移动端一般封装在zepto之类的框架中),小程序开发需要改变一下具体实现。
- 与浏览器BOM相关的api都是没有的。
文章图片
注意一下cookie本身不能在客户端进行读写。因为没有cookie,H5中的csrf问题理论上是根本解决了。小程序是否存在其他客户端安全问题,需要技术、时间来检验~
(二) 优化
- 登录:
- storage:
- 微信支付路径不再受限
1)每个页面是需要手动在app.json中进行注册。如果没有注册,是不执行该页面的。
2)打开的页面有5个的限制,在开发时需要主要控制打开页面的数量
wxss:
- wxss 不再支持媒体查询
- 增加了app的flex布局
- 引入rpx的概念
- wxss中,不能使用背景图片。这跟框架的设计思想认为一切皆组件有关
- wxss动画不支持(目前)
- 不支持多层选择器.classA {} – 支持; .classA.classB {} – 不支持 (api说明表示只支持单层选择器,重构测试有时多层是支持的)
页面js中,data数据是需要约定为只读。框架是单向数据绑定,修改data中的数据不会自动更新View;更新view,需要使用setData()方法。setData()更新View时,与data中的数据进行Diff比较,不同才会更新。这样如果直接修改data,很容易造成data中的数据与View不一致。
- setData单次设置的数据不能超过1024kB,需要避免一次设置过多的数据。
- template,这些模版具有自己独立的作用域。
- 支持ES6中的…展开模块数据。
参考引用资料:小程序官方,腾讯云,腾讯Bugly,微信小程序club的作者【风潇雨落】
下一篇,小程序开发项目实例,测试及发布
欢迎关注公众号(hongji8410)和加入QQ群一起交流(522342554)
推荐阅读
- 一个小故事,我的思考。
- 家乡的那条小河
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 昨夜小楼听风
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 2019.4.18感恩日记
- 那件我们忽略的小事叫感恩
- 你有婚内虐待行为吗()