微信小程序开发踩坑经验指南(持续更新)

微信小程序开发

Posted by kung on October 12, 2020

一直以来利用空余时间开发了几个微信小程序,直接用原生的小程序比较少,这里用的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/