最新!微信小程序填坑手册

2018-10-12 admin

从6月份开始到现在,写小程序将近4个月了 开发时给自己埋了不少坑~ 给大家分享下我的填坑经验~~


开发部分

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

发布部分

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

原文链接:https://segmentfault.com/a/1190000016662122

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-42540.html

文章标题:最新!微信小程序填坑手册

相关文章
百度新功能【特效搜索】演示 惊呆了小伙伴
百度搜索最近又出新玩意新功能了,可能你还没有发现,名为【百度特效搜索】已经默默上线了,有什么效果呢? 在百度搜索中根据用户搜索的关键词来出发某些动作,例如笔者搜索“打雷”关键字,在搜索结果中你会听到有打雷声, 黑洞,闪烁、翻转、跳跃,打雷,...
2015-11-12
微信JSSDK上传图片
前不久微信公开了一些接口,其中有一个uploadImage接口用于上传图片,一般和chooseImage接口配合使用。先调用chooseImage接口让用户选择一张或者多张图片,用户选择完毕后微信会返回被选中图片的id,再把图片id传给up...
2017-03-29
微信火了HTML5,技术革新才是未来
Html5小游戏自从诞生以来,以其玩法简单、内容娱乐等特点,而深受玩家的欢迎。就像音乐领域的《小苹果》和《最炫名族风》一样,Html5小游戏也曾经有多款神作,在微信朋友圈如病毒式疯传。 微信让H5火了 去年,H5游戏“围住神经猫”上线微信朋...
2015-11-12
Ajax入门手册chm
下载地址:Ajax入门手册chm ...
2015-11-12
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $('#gzrwTable').on('click-row.bs.table', function(e, row, $element) { $(&#x...
2017-02-17
Vue 短信验证码组件开发详解
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此...
2017-03-17
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
本文实例讲述了JS常见创建类的方法。分享给大家供大家参考,具体如下: Javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有Class。(不过,ES6引...
2017-04-05
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
本文主要通过代码示例给大家介绍IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题;分步介绍,先给大家介绍IE7浏览器窗口大小改变事件执行多次bug,具体问题分析及解决方案请看下文。 var resizeTi...
2017-03-29
利用n 升级工具升级Node.js版本及在mac环境下的坑
一、利用n 升级Node.js 最近在用NPM安装一个nodejs工具时发现,我的nodejs的版本有些旧了。这不是大问题,只要升级就可以了,当然,重新从nodejs.org最新版本是一种方法,但我想应该有更简单的方法,那就是使用 n 这个...
2017-03-17
回到顶部