- A+
所属分类：Web前端
小程序开发整理
使用
uni-app跨端开发框架，代码写法与vue2一致。
一、与web开发的区别
1. 运行方式不同
npm run dev:mp-weixin后，用微信开发者工具打开dist中工程。
2. 标签与web开发不同
标签的对应关系
| 小程序中使用 | web中使用 |
|---|---|
| view | div |
| text | span |
| image | img |
| navigator | ａ |
此外，uni-app 还提供scroll-view、swiper等内置组件。 |
3. 运行环境从浏览器变成v8引擎
不能使用document，window、localstorage、cookie等浏览器自带对象，但是可以使用 uni 提供的 api 替代。
3.1 获取dom元素
需要用到SelectorQuery 对象。
const query = uni.createSelectorQuery().in(this); query.select('#id').boundingClientRect(data => { console.log("得到布局位置信息" + JSON.stringify(data)); console.log("节点离页面顶部的距离为" + data.top); }).exec(); // select 返回 NodesRef 对象，即为节点信息。 注：我们常用的
ref获取dom，不能用在uni-app内置组件上，只能用在自定义组件上。
3.2 数据缓存
本地数据缓存
// 异步 uni.setStorage({key: '', data: '', success: ()=>{}, fail: ()=>{}, complete: ()=>{}}) uni.getStorage({key: '', success: ()=>{}, fail: ()=>{}, complete: ()=>{}}) uni.removeStorage({key: '', success: ()=>{}, fail: ()=>{}, complete: ()=>{}}) uni.clearStorage() // 同步 uni.setStorageSync({key: '', data: ''}) uni.getStorageSync({key: ''}) uni.removeStorageSync({key: ''}) uni.clearStorageSync() // 获取当前 storage 相关信息 uni.getStorageInfo({success: (keys, currentSize, limitSize)=>{}}) const {keys, currentSize, limitSize} = uni.getStorageInfoSync(); 4. 工程目录的区别
projectName/src ├── components ├── pages ├── ... ├── pages.json └── manifest.json 4.1 新增 pages.json
pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、组件自动引入规则、分包加载配置、窗口样式、原生的导航栏、底部的原生tabbar 等。
1）组件自动引入规则
"easycom": { "^tp-(.*)": "@/tp-view-ui/components/tp-$1/tp-$1.vue" }, 通过uni-app的easycom，只要组件安装在项目的 components 目录下，并符合 components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册，直接在页面中使用。
- kebab-case (短横线分隔命名)
- PascalCase (首字母大写命名)
2）页面文件路径
编译后，pages的第一个路径会成为首页
"pages": [ { "path": "pages/index/indexA", "style": { "navigationBarTitleText": "AAA", "backgroundColor": "#FFFFFF" } }, { "path": "pages/index/indexB", "style": { "navigationBarTitleText": "BBB", "backgroundColor": "#FFFFFF" } } ], 3）小程序的分包加载机制
微信小程序每个分包的大小是2M，总体积一共不能超过20M。
在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。
"subPackages": [ { "root": "pages/xxxA", "pages": [{ "path": "list/list", "style": {} }] }, { "root": "pages/xxxB", "pages": [{ "path": "detail/detail", "style": {} }] } ], 4.2 新增 manifest.json
manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。
"mp-weixin": { /* 微信小程序特有相关 */ "appid": "wx303f35140da12d22", "setting": { "urlCheck": true, // 检查安全域名和 TLS 版本 "minified": true, // 上传代码时自动压缩 "postcss": true, // 上传代码时样式自动补全 "es6": true // ES6 转 ES5 }, "usingComponents": true, // 全局自定义组件 "permission": { // 小程序接口权限相关设置 "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } } }, appid：微信小程序的AppID，登录 微信公众平台 申请。
5. CSS 注意事项
5.1 像素单位
uni-app 默认为 rpx。rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。
一般UI上手机模型宽度为375px，换算关系为 1px = 2rpx。
5.2 布局
推荐使用 flex 布局。
比如上下子元素高度不固定，中间子元素占据剩余空间：
.flex { display: flex; flex-direction: column; height: 600px; /* 父元素一定要指定高度 */ width: 375px; } .flex-box1 { height: 200px; background: #b7dff0; } .flex-box2 { background-color: #bfa; flex: auto; } .flex-box3 { height: 200px; background: #b7dff0; } 5.3 小程序组件的视图层级
组件内元素被shadow-root包裹，修改样式时需要做/deep/穿透。
二、uni-app 的生命周期
1. 应用生命周期
只能在
App.vue里监听应用的生命周期
| 函数名 | 说明 |
|---|---|
| onLaunch | 当uni-app 初始化完成时触发（全局只触发一次） |
| onShow | 当 uni-app 启动，或从后台进入前台显示 |
| onHide | 当 uni-app 从前台进入后台 |
| onError | 当 uni-app 报错时触发 |
| onUniNViewMessage | 对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯 |
| onUnhandledRejection | 对未处理的 Promise 拒绝事件监听函数（2.8.1+） |
| onPageNotFound | 页面不存在监听函数 |
| onThemeChange | 监听系统主题变化 |
2. 页面生命周期
| 函数名 | 说明 |
|---|---|
| onLoad | 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参） |
| onShow | 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 |
| onReady | 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发 |
| onHide | 监听页面隐藏 |
| onUnload | 监听页面卸载 |
| onResize | 监听窗口尺寸变化 |
| ... | .... |
微信小程序的页面生命周期
使用 onLoad 来页面传参
//在起始页面跳转到test.vue页面并传递参数 uni.navigateTo({ url: 'test?id=1&name=uniapp' }); // 在test.vue页面接受参数 export default { onLoad(option) { //option为object类型，会序列化上个页面传递的参数 console.log(option.id); //打印出上个页面传递的参数。 console.log(option.name); //打印出上个页面传递的参数。 } } - 参数复杂的情况
uni.navigateTo({ url: 'test?data=' + JSON.stringify(obj) }); onLoad: function (option) { const data = JSON.parse(option.data); } - 参数中出现空格等特殊字符，比如 url
uni.navigateTo({ url: 'test?data=' + encodeURIComponent(JSON.stringify(obj)) }); onLoad: function (option) { const data = JSON.parse(decodeURIComponent(option.data)); } 除了
onLoad，还可以用vuex，uni.$on(eventName,callback)，uni.$emit(eventName,OBJECT)进行页面通讯。
3. 组件生命周期
与 vue 标准组件的生命周期相同
| 函数名 | 说明 | 平台差异说明 |
|---|---|---|
| beforeCreate | 在实例初始化之前被调用。 | |
| created | 在实例创建完成后被立即调用。 | |
| beforeMount | 在挂载开始之前被调用。 | |
| mounted | 挂载到实例上去之后调用。 | |
| beforeUpdate | 数据更新时调用，发生在虚拟 DOM 打补丁之前。 | 仅H5平台支持 |
| updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 | 仅H5平台支持 |
| beforeDestroy | 实例销毁之前调用。在这一步，实例仍然完全可用。 | |
| destroyed | Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 |
三、特点功能整理
1. 二维码显示
使用插件 tki-qrcode，uni-app 二维码生成器。
安装
npm i tki-qrcode -S 引入
import tkiQrcode from "tki-qrcode"; export default { components: {tkiQrcode} } 使用
<tki-qrcode ref="qRCodeRef" :val="qrcodeUrl" :size="424" :onval="true" :loadMake="true" :showLoading="true" @result="getQrImgUrl" /> 属性
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|
| size | Number | 200 | 生成的二维码大小 | |
| unit | String | upx | px | 大小单位尺寸 |
| val | String | 二维码 | 要生成的内容 | |
| lv | Number | 3（一般不用设置） | 容错级别 | |
| onval | Boolean | false | 监听val值变化自动重新生成二维码 | |
| loadMake | Boolean | false | 组件初始化完成后自动生成二维码，val需要有值 | |
| showLoading | Boolean | true | false | 是否显示loading |
| loadingText | String | 二维码生成中 | loading文字 | |
| ... | ... | ... | ... | ... |
方法
| 方法名 | 参数 | 默认值 | 说明 |
|---|---|---|---|
| _makeCode() | 生成二维码 | ||
| _clearCode() | 清空二维码（清空二维码会触发result回调 返回值为空） | ||
| _saveCode() | 保存二维码到图库 |
事件
| 事件名 | 返回值 | 说明 |
|---|---|---|
| result | 生成的图片base64或图片临时地址 | 返回二维码路径 注：_clearCode()后返回空 |
2. 二维码卡片下载
使用插件xWxmlToCanvas，根据微信小程序wxml-to-canvas封装。
安装
npm i x-wxml-to-canvas -S 引入
实测引入node_modules内插件，条件编译时会走H5，而不是MP（小程序）。只有复制到项目内，才会走小程序。
import xWxmlToCanvas from './components/x-wxml-to-canvas/x-wxml-to-canvas'; export default { components: {xWxmlToCanvas} } 使用
<xWxmlToCanvas ref="xWxmlToCanvas" :hide="true" :useCORS="true" :width="311" :height="518" :xStyle="myStyle" :xWxml="myWxml"> </xWxmlToCanvas> 属性
| 字段 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| hide | Boolean | false | canvas是否在页面可见 true 通过fixed将canvas移至屏幕外 |
| width | Number | 300 | canvas宽度，单位px |
| height | Number | 300 | canvas高度，单位px |
| xWxml | String | wxml 模板 | |
| xStyle | Object | {} | 样式 |
| useCORS | Boolean | true | canvas 图片跨域 |
wxml 模板
-
支持
view、text、image三种标签，通过 class 匹配 style 对象中的样式。 -
文字必须用
text标签包含，否则不显示。动态文字需要动态赋值宽高，否则会截断不显示。
const wxml = (projectName, inviteToChainStore, inviteExpiredTime, imgUrl) => ` <view class="invite-card vertical-center pos-r"> <text class="fw-b project-name">${projectName}</text> <image class="qrcode" src="${imgUrl}"></image> <text class="invite-desc fw-b">${inviteToChainStore}</text> <view class="footer"> <text class="expired-time ta-c text">${inviteExpiredTime}</text> <text class="text ta-c">TP-LINK商云</text> </view> </view> `; imgUrl 通过tki-qrcode组件获取。
样式
对象属性值为对应 wxml 标签的 class 驼峰形式。需为每个元素指定 width 和 height 属性，否则会导致布局错误。
存在多个 className 时，位置靠后的优先级更高，子元素会继承父级元素的可继承属性。
元素均为 flex 布局。left/top 等 仅在 absolute 定位下生效。
const style = (rowLength) => { let textWidth = 212; return { "verticalCenter": { display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', }, "inviteCard": { width: 311, // 单位为 px height: 518, position: 'relative', backgroundColor: '#fff', borderRadius: 16, }, "projectName": { marginTop: 32, fontSize: 16, lineHeight: '1.2', height: rowLength * 22, width: textWidth, fontWeight: 600, }, ... }; }; 方法
| 方法名 | 描述 | 返回值 |
|---|---|---|
| renderToCanvas | 将wxml渲染至页面 | 无 |
| canvasToTempFilePath | 将canvas转为图片地址 (H5端 Canvas 内绘制的图像需要支持跨域访问才能成功) | promise函数，返回 图片地址，h5为base64 |
| getCanvasImage | renderToCanvas 与 canvasToTempFilePath 合并 | promise函数，返回 图片地址，h5为base64 |
| saveImageToPhotosAlbum | 图片保存至本地 | promise函数，返回 true / flase |
this.$refs.xWxmlToCanvas.renderToCanvas().then(() => { this.$refs.xWxmlToCanvas.canvasToTempFilePath().then(res => { this.$refs.xWxmlToCanvas.saveImageToPhotosAlbum(res); }); }); 真机调试不支持
canvas type2d，可用预览模式。
3. 退出页面时拦截显示弹窗
3.1 开启小程序页面返回询问对话框
watch: { isChanged:{ handler: function(val) { //#ifdef MP-WEIXIN if (val) { wx.enableAlertBeforeUnload({ // 只有真机会出现 message: this.$t('pStoreInfo.quitConfirm') }); } else { wx.disableAlertBeforeUnload(); } //#endif }, immediate: true } } 样式简单时可以使用。
3.2 微信小程序视图容器 page-container
“假页”容器组件，效果类似于 popup 弹出层，页面内存在该容器时，当用户进行返回操作，关闭该容器不关闭页面。
<tp-safe-view has-cutline class="u-h-full"> <!--弹窗内容--> <page-container :show="show" position="center" @beforeleave="beforeleave"> <!--页面主体内容--> </page-container> </tp-safe-view> beforeleave() {} // 离开前触发 四、其他事项记录
-
条目之类的有滚动条时和底部or底部按钮不一定有距离，但拉到底要有
80rpx -
分页加载一般请求条数为10、20
-
预览模式，在真机右上角三个点打开调试使用 vConsole
-
页面在
onLoad获取数据传递给组件，而组件在created生命周期使用该数据，有时会出现组件未获取到值的情况。
