前言
只需要脑子里有个印象，用到在来看，智慧调用脑内存，轻松处理大逻辑 😄
小程序uniapp都可以配置系统tabbar
注意需要考虑后期大量迭代tabbar超包，是不能拆分包的，但是需要考虑性确很好，所以需要考虑性能问题
Webview篇
- web-view包括里面网页使用的iframe链接 都是需要配置业务域名。
- 每个页面只能有一个 web-view 会自动铺满整个页面，并接管title,返回按钮等同时 覆盖其他组件
- url 在传输过程中加 encodeURIComponent 防止被转义
- 小程序向网页通信只能通过重新加载地址传参
- h5向小程序通信,只能在特定情况下获取 分享回调,路由跳转回调等等
- 小程序分享回调可以实时获取webview内H5动态跳转链接
小程序To网页,数据交互
// 小程序
<web-view @message="handleMessage">
// 多次传输只取最后一票
handleWebViewBack(res) {
this.result = res.detail.data
this.webViewData = result[result.length - 1]
}
// 最后网页
wx.miniProgram.postMessage({ data })
- 网页向小程序传输消息时,会在特定时机,才能收到（小程序后退、组件销毁、分享）
// 跳转一下子
wx.miniProgram.navigateTo({url: '/path/to/page'})
const data = {
name: '你好'
}
wx.miniProgram.postMessage({ data })
- 同样在网页直接调用小程序跳转并携带参数
wx.miniProgram.navigateTo({url: '/path/to/page?msg=bj'})
- 异步向网页传入登录状态
<web-view src="url" @message="handleMessage">
pageInit() {
this.url = 'http://www.baidu.com'
}
// 相当于重新加载
pagelogin() {
setTimeOut(() => {
this.url = 'http://www.baidu.com?token=123123213'
}, 5000)
}
- 在小程序获取wevview内网页跳转地址
handleWebViewBack(res) {
this.result = res.detail.data
this.webViewData = result[result.length - 1]
}
onShareAppMessage(options) {
// H5内当前切换地址
console.log(options.webViewUrl)
// 分享动作 获取 H5内传入参数
console.log(this.result)
}
环境判断
export const isWeiXin = () => {
var ua = window.navigator.userAgent.toLowerCase()
const isApplet = (navigator.userAgent.match(/micromessenger/i) && navigator.userAgent.match(/miniprogram/i)) || window.__wxjs_environment === 'miniprogram'
// 顺序不要动
if (isApplet) {
// 小程序环境
return 'APPLET'
} else if (ua.match(/MicroMessenger\/[0-9]/i)) {
// 微信网页
return 'WX'
} else if (ua.match(/QQ\/[0-9]/i)) {
return 'QQ'
} else {
return ''
}
}
性能优化篇
- 前言
微信小程序采用的是离线包加载方案,既第一次打开时会先下载好所有代码，然后再加载页面, 也就是说你的代码越多，白屏时间越长
- 编译器设置
-
图片压缩
- 图片引用优先使用超链接
- 图片压缩 推荐使用不失真压缩 tinypng
-
分包加载（推荐有效）
-
在初始化就要考虑好需要拆那些分包
-
用户页面访问量相对较少页面,可以进行分包,页面配置分包,不需要在 pages里面在进行注册
-
目录这个样子
-
配置这个样子
- 先别堵,仔细盘盘目录结构, 在 src目录内创建 loginModule 文件夹,名称一定保持一致
-
// 分包怎么配
"subPackages": [
{
"root": "loginModule",
"pages": [
{
"path": "login"
},
{
"path": "reset"
},
{
"path": "code"
}
]
}
]
// 分包怎么跳转测试,文件夹名称加文件,注意加上斜杠
uni.navigateTo({
url: '/loginModule/code?url=' + encodeURIComponent(url)
})
-
检查
- 报错,可以重启项目,路径无误,就是编译器的事,防止出现资源找不到
- 注意目录内的资源按照新的目录结构引入
-
看是否配置成功
- 分包配置结束 Over 往下看
还可以优化 预加载配置 跟分包是并行逻辑
- 预先加载
//当访问A时预先加载B
{
// 页面配置
"pages": ["pages/index"],
// 分包配置
"subpackages": [
{
"root": "important",
"pages": ["index"],
},
],
// 预加载配置
"preloadRule": {
"pages/index": {
"network": "all",
"packages": ["important"]
}
}
}
- uni 可选开启分包优化配置
- 静态文件：分包目录内放置的static静态资源不会被打包到主包中，同样也不可在主包中使用
- js文件：当 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包
- 自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息
"mp-weixin" : { "optimization": { "subPackages": true } }
小程序分享篇
-
分享控制
支持异步分享控制
uni.showShareMenu({ hideShareItems: ['wechatFriends', 'wechatMoment'] }) // 异步设置分享控制 setTimeOut(()=>{ uni.hideShareMenu({ hideShareItems: ['wechatFriends', 'wechatMoment'] }) }, 1000) -
分享朋友圈
分享朋友圈 开始支持支持平台：Android、iOS
-
分享内容,支持异步获取并配置
- 注意 一定注意参数名中不要包含 share 会导致取不到值
async getShareData() { // 获取分享数据 const res = await setShare(temp) const { data, code } = res || {} if (code === 200) { const { path, query } = data || {} return { // 分享朋友 path: /pages/goodsdetail/goodsdetail?goodsId=535111, // 分享朋友圈,注意参数格式 query: goodsId=535111, // 通用参数 title: 'msg', imageUrl: 'https://www.xxxx.jpg' } } else { return {} } } async onShareAppMessage() { return await this.getShareData() }, async onShareTimeline() { return await this.getShareData() } -
分享朋友支持当前分享,回跳至其他页面
清理缓存
长按删除小程序,然后重新分享
生命周期
- 小程序冷热启动
- 当小程序进入后台，客户端会维持的运行状态，超过一定时间后（目前是5分钟）会被微信主动销毁
- 初次，或者长时间之后再进入，冷启动 onLaunch执行
- 关闭小程序，立马重新进入，热启动 onShow执行
- 启动时执行onLaunch获取options
小程序大内容富文本
- 当富文本内容过于庞大时,使用小程序原生富文本渲染失败时使用 mp-html 还有很多功能根据你的业务自己检索
<mp-html
:content="内容"
ref="mpHtml"
@linktap="
res => {
// 当点击富文本中 a标签出发
}
"
// 点击a标签粘贴文本
:copy-link="false"
// 可以单独设置某个标签的样式
:tag-style="{ a: 'color:#FF5871' }"
/>
getText() {
// 只获取富文本文本部分内容
return this.$refs.mpHtml.getText()
}
小程序canvas海报方案
小程序指定页面返回
- 通过 getCurrentPages()或者位置数量，使用goBack返回，还可以拿到当时参数
onShow() {
setTimeout(() => {
const getOption = () => {
// eslint-disable-next-line no-undef
const pagearr = getCurrentPages() //获取应用页面栈
const currentPage = pagearr[pagearr.length - 1] //获取当前页面信息
return currentPage.options
}
}, 1000)
}
获取元素尺寸
const query = uni.createSelectorQuery().in(this)
query.select('.label-box').boundingClientRect(node => {
// data是选中元素的布局位置信息
}).selectAll('.target_img').boundingClientRect(nodes => {
// data是选中元素的布局位置信息
//
}).exec()
小程序 display: inline-block; 上下对不齐 兼容性问题
display：inline-block，是基于baseline对齐的，大小不一会导致上下不齐，所以设置的时候最好设置vertical-align属性。
写到最后
- 如果你在开发中遇到问题欢迎留言，整理发布后帮助更多的小伙伴。
