一直以来利用空余时间开发了几个微信小程序,直接用原生的小程序比较少,这里用的uniapp,中间踩了一些坑,趁着现在项目不是很紧张,记录一下避免后面再踩坑~
坑点记录
小程序跳转问题
如果是跳转非底部导航页面直接wx.navigateTo({url:'/pages/news/list'})
,如果是跳转到底部导航页面需要改变一下跳转方式wx.switchTab({url: url})
并且不能通过常规手段传参数,实在需要传参数可以尝试把数据放入缓存;
分享路径和跳转路径
分享时路径
//分享给好友
onShareAppMessage(options) {
return {
title: "@你,这里有100G免费吉他学习资料等你来拿!",
path: "pages/home/index" //注意看这里没有斜杠
}
}
跳转路径
wx.navigateTo({
url: `/pages/article/detail?objectId=${item.objectId}` //这里pages前面有斜杠
})
分享只能通过button方式
原生button显示问题
分析
使用::after 伪类选择器,因为button的边框样式是通过::after方式实现的,如果在button上定义边框就会出现两条边框线,所以我们可以使用::after的方式去覆盖默认值。
解决
button::after {
border: none;
}
自定义底部菜单
- 第一步封装自己的菜单组件
- 第二步在pages.json中声明几个需要用的tab
- 第三步在pages页面中隐藏默认的导航菜单
- 第四部引用封装的组件
自定义导航栏
富文本支持
text标签给一个属性
生成的小程序码带的参数有限
封装的组件数据请求不能
小程序使用npm
canvas需要把图片下载下来才能使用
事件调用冒泡(原生)
uniapp中使用腾讯的微信云开发
详见:http://blog.idaikun.cn/2020/10/06/post33/