微信小程序填坑手册~

本贴最后更新于 2232 天前,其中的信息可能已经时移世易

开发部分

1.小程序的组件修改不能触发页面刷新?
需要在父级文件上保存下才会触发
(使用 wepy 开发)

2.接口请求出现的问题?
记得勾选调试开发工具上 不校验合法域名

3.navigateTo 跳转页面不生效?
页面栈最多支持 5 层,超过 5 层无法后退(注,被提醒已更新到十层)

  • navigateTo, redirectTo 只能打开非 tabBar 页面。
  • switchTab 只能打开 tabBar 页面。
  • reLaunch 可以打开任意页面。

4.onload 只会在页面加载时候执行,比如用 navigateBack 回到之前的页面的时候,之前那个页面不会再执行 onload,
所以我们要触发某些函数的时候,我们可以放在 onshow 里面,即使是 navigateBack 回来也会执行

5.子组件的 onload 会在父组件 onload 之前执行,有一个页面加载完成 3s 后展示飘窗的需求,飘窗会立即被加载
可以在父子组件用 EventHandle(类似 vue 的 eventBus)通信下,以确定子组件加载时机 ~

6.操作用户头像(比如点击跳转)
open-data 类似自定义组件,上面无法绑定事件,简单实现可以用 navigator 包裹 open-data,不用写 js 代码即可实现点击跳转页面。navigator 相当于 html 的 a 元素,默认为 inline,可修改 display 样式为 block
navigator 组件属性 openType 可选值 'navigate'、'redirect'、'switchTab',对应于 wx.navigateTo、wx.redirectTo、wx.switchTab 的功能

7.同一个页面想要 2 个分享?
需要在 Page 中添加 onShareAppMessage 方法,否则点右上角菜单不会出现转发选项
除了右上角菜单外,可以使用 button 组件的 open-type="share"
button 组件和右上角的点点点都是调用 onShareAppMessage 方法
通过参数中的 from 字段区分事件来源是菜单 menu 还是按钮 button(某需求要求两个分享不同)
通过 onShareAppMessage 方法返回的对象来定制转发界面显示的内容

8.分享成功后的打点消失了?
是的,微信取消支持这个功能了。。。
在原来的分享接口中,用户发起分享动作之后,可以通过 success 、fail、complete 等回调来判断用户是否完成了最后的分享动作。老代码也是分享成功的通过分享 success 回调函数内打 log 的记录。由于官方后来取消了这个功能,所以分享的打点要放到外面来。

9.canvas 相关
要进行绘制,则 canvas 组件必须真实地被写在页面上,而且其 wx:if 不能为 false。
canvas 是原生组件,层级是最高的,所以页面中 z-index 设置不生效。
于是把 canvas 放置在屏幕之外,如设置 position:fixed;left:750rpx;

canvas 的 api,在页面中,api 的参数 this 不是必填的,在组件中就是必填的,页面中可不填。
在绘制 canvas 时,由于 draw 是异步操作,需要把 canvasToTempFilePath 写到 draw 成功的回调里
(起初是绘制内容少很快,用同步写也不会出问题)
绘制出来的图片如果觉得有点糊,请在 canvas 中等比例放大绘制尺寸 ~
但是也不能太大,不然在安卓上会有 bug(限制范围貌似在 2000px)。

10.全屏蒙版弹窗遮不住 tabBar?
tabBar 的层级还是很高的,当出现全屏蒙版弹窗时,是无法盖住 tabBar 的,
可以调用微信的 hidetabbar,不过需要注意兼容低版本

测试部分

1.只用开发者工具测试能行吗?
有些功能是版本限制的,开发者工具的基础库版本可以调整,但是无法设置微信版本,还是需要真机。

2.扫描新生成的二维码会跳转到线上的链接?
以前是测试的时候需要用微信开发者工具来测试在编译模式,把二维码的具体信息添加进去
在最新的开发工具中,有一项 二维码编译 模式,解决了跳转线上小程序链接的问题

3.开发者工具上看效果没问题,但是在真机上测试不行?
一般说来都是真机缓存的影响,微信开发者工具是可以一键清理全部缓存
安卓和 ios 的上一般都是删除这个小程序(注意 不是删除使用记录)
再有就是,删除完毕后可以进入小程序的设置选项查看权限的开关来确定是否真的完全清除。

4.清除缓存后还有问题?
这时候就需要使用 vConsole 了
开发版和体验版可以点击真机小程序页面右上角的...按钮打开的菜单项“打开调试”来开启 vConsole
正式版没有“打开调试”的菜单项,可以先通过开发版和体验版来开启 vConsole,然后再打开正式版。
或者预埋一个隐藏操作,比如连续点击某个 Button 多次,然后调用 API 接口 wx.setEnableDebug 来打开。

5.如何远程调试真机?
vConsole 一般用来看有无报错,如果是简单的问题,咱们直接修改代码就可以改好了了
复杂的情况还需要调试,手机毕竟看日志不方便,也不能断点调试、修改样式
此时需要借助远程调试来快速定位复杂问题 ~
使用开发者工具的远程调试窗口只要用手机扫一扫就可以连通手机和模拟器之间的数据链接,调试的上下文会自动切换到 VM Context 1

发布部分

上传代码的话,需要勾选 样式自动补全
一次没通过,请再提交一次吧:(

  • 一些有用的避坑指南。

    69 引用 • 93 回帖
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    130 引用 • 793 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...