开发微信小程序遇到的一些问题汇总微信小程序开发过程中遇到的一些问题，以及问题的方案汇总，会持续更新遇到的问题以及解决方

如标题所示一些问题的汇总以及方案

rich-text

小程序 rich-text 标签渲染富文本标签有诸多限制不能像 H5 一样

比如 table 标签一些合并单元格的属性是不支持的这个时候想要解决 table 样式问题就只能把样式设置到 style 上面

看个例子

content?.replace(/<table[^>]*>/gi, (_) => {
  return `<table border="1" cellpadding="0" cellspacing="0" width="100%" bordercolor="#DFDFDF" style="border-collapse:collapse;"  >`;
});
// border="1" cellpadding="0" cellspacing="0" 这些属性在小程序全部不生效 所以要都设置到 style中

具体的可以查看文档

还遇到了一种写法

const str = `<style>.test{color:red}</style><div class="test">测试</div>`;

这种格式也是无法渲染的 rich-text 只能渲染 dom 节点所以为了渲染一下奇怪的富文本于是放弃这种写法采用嵌套 H5 的方式

于是嵌套又产生了一些新的问题

小程序 web-view 的问题

小程序 web-view 嵌套 H5 首先第一点要在后台设置 webview 业务域名否则是不允许嵌套的

比如你要嵌套 baidu.com 首先你要在 baidu.com 服务下放置你要嵌套的小程序的签名

点击下载校验文件把文件放置到 baidu.com 下然后再把配置到地址输入

怎么判断配置成功呢访问 baidu.com/xxx.txt 有内容代表配置成功

这个时候就可以嵌套 baidu.com H5 页面

要注意一点 baidu.com 这个页面里面不能嵌套 iframe 如果嵌套了那么这个 iframe 也需要配置在业务域名下否则后报错不支持访问当然你也可以删除这个 iframe

嵌套的 webview 导航顶部可能是黑色的那么可以配置 navigationBarBackgroundColor: '#fff', 变成白色

而且这个标题好像不可以更改只能尝试修改 H5 的 title 比如例如设置 H5 document.title="商品详情"

并且 ios 下 https 域名下的 http 图片无法正常打开需要把 http 的图片修改为 https 安卓下没有发现这个问题

navigateTo 路由跳转无效问题

遇到一个偶现问题小程序所有点击路由无效但是页面正常展示滚动弹窗正常，也无报错

一番查找之后发现原来小程序的 navigateTo 栈是有上限的 10 层栈满之后再点击就会失效

还看到一个回答记录一下

//reLaunch和redirectTo跳转之前加一个定时器进行延时！！改成
setTimeout(() => {
  wx.reLaunch({
    url: url,
  });
}, 300);

所以解决方案要么不让栈满从业务层面考虑有进有出的优化
使用 wx.reLaunch（）代替 wx.navigateTo() 关闭所有页面跳转，一般用于自己做的 tabbar 组件跳转直接把用到 wx.navigateTo 替换为 wx.reLaunch
可以在页面加载的时候就调用 getCurrentPages() 监听当前页面栈的个数内容，判断当前页面栈中是否存在即将要跳转的页面路径，如果有，直接用 wx.navigateBack() 返回到该页面
这个方法类似于 2，可以在页面加载的时候就调用 getCurrentPages() 监听当前页面栈的个数内容，在页面要跳转的时候，判断当前页面栈的个数是否超过 10，如果超过 10 个，就给 wx.reLaunch（）关闭所有页面，重新进行页面栈个数统计

小程序的 image

小程序的 image 标签设置宽度 100%不一定能完全展示的还要看一个 mode 属性，mode 属性的一些限制会让你的图片展示有不同的方式，所以遇到图片设置常规的 css 不能达到自己要求时去看看 mode 设置也许可以解决你的问题

image 相关文档

小程序插件报错

小程序引用插件报错 Error: Plugin "wxxxxxxxxxxx/0" is not defined.

可能的原因如下

可能是在主包使用插件被打包进分包，这个时候需要把插件设置移动到主包内
可能是在使用时插件还没下载完导致的
可能是本地设置中将 js 编译成 ES5 没有勾选

scroll-view 设置圆角无效问题

给 scroll-view 设置如下 css

  overflow: 'hidden',
  borderRadius: 8,// 这是react 用法
  transform: 'translateY(0)',

小程序插件问题

使用小程序的插件上传的时候插件会被打包进去文件如果插件在主包中那么占用主包的容量微信限制主包 2M

如果在分包中使用那么占用分包的容量

network

当你发现 network 无法查看到请求的记录首先查看是不是你切换了什么配置如果没有

那么则考虑是不是你代码在全局请求之前做了什么处理导致报错出的问题

很奇怪的真机调试是可以的我遇到的问题是我在请求之前用了一个 JSON.parse() 一个空值导致出错

判空处理和增加 try catch 处理

小程序的 view 标签不能嵌套很多层

使用基础库 2.24.4 其他基础库可能有同样的问题

大概 16 层后面再嵌套内容无法渲染

修改一下这个是我使用 OCTOPUS 编译的问题小程序本身不存在这个问题

小程序上传图片图片会被压缩再上传

参考链接
 文档 api

可能会存在错误仅供参考

持续更新。。。。。。。

开发微信小程序遇到的一些问题汇总