微信小程序防坑指南

398 阅读4分钟

前言

2016年,微信小程序重磅上线,初期虽然只引起了技术爱好者的尝试,并没有太多的明星app发布上线,不过随着时间的流逝,小程序的优势逐渐被大家认可。对商业公司而言,借助微信这大流量的优势,易传播、入口丰富、功能强大(对比与公众号而言),因此越来越多的公司将自己的app/公众号功能放置于小程序上进行尝试,也诞生了像拼多多这样,小程序月活破亿的爆款。对用户而言,小程序简单方便,扫个二维码就可以使用,随用随走,而不像传统APP一样,还需要去应用市场下载,对存储空间低的手机而言来说可谓福音。

这段时间来,我也详细调研、体验开发了小程序,在此将开发小程序可能会遇到的一些问题反馈给大家,如果大家遇到相同的问题也可以有个参考,协助解决

正文

个人小程序&&企业小程序

在申请小程序的时候,我们会被要求选择小程序的主体类型,大多数情况下我们会选择个人、企业进行注册。

image.png

在选择这种类型时候,就会限制我们使用小程序的功能,对开发而言主要有

  1. 个人小程序无法使用和支付相关的API,如支付以及卡包功能
  2. 个人小程序无法使用无法使用webview功能,即个人小程序无法在页面上嵌入一个网页进行访问

页面布局的限制

和传统APP不同,我们可以用代码组合出任意布局。在小程序上,有一些小程序的布局规则必须要去遵守

  1. 微信小程序不能隐藏右侧导航菜单,我们能自定义的部分仅有小图绿色部分
image.png
  1. 启动页无法自定义,和传统app不同,我们只能提供Logo和名称外,启动页是无法自定义的(含启动页上的Loading)
image.png

综上所述,如果产品在设计小程序功能上,需要预留出右侧菜单以及不要加入启动页功能。

模板消息

小程序相对公众号而言,拥有特别的功能,模板消息。我们去麦当劳,用小程序点个餐,麦当劳就会通过模板消息将订餐码发给你,最后用这个码通知取餐就行了。

但是模板消息拥有以下的限制需要注意。

  1. 无法主动推送,模板消息分为2种,支付类模板消表单类模板消息。见名知意,字符类模板消息即用户发起支付后,系统可以在用户发起支付的7天内,发送3条模板消息,而表单类模板消息则是,提交表单的7天内能发送1条消息给用户。

可以看出,模板消息,仅限于小程序页面,且只能被动获取,而不像公众号能主动推送,如果想主动推送,可以在一些按钮上后台偷偷的提交表单(不过这样也只能推送7天内点过按钮的小程序用户,不建议)

webview

上文说到,只有企业小程序(认证后)才能使用webview功能嵌入网页。其实,除了这个限制,webview还有很多功能和传统浏览器,包含

  1. webiew只能访问小程序后台业务域名配置的页面(可以从登陆小程序后台后,设置>开发设置>业务域名中配置)
image.png
  1. 基于webview的表单提交以及微信支付申请,是无法使用模板消息的

  2. 和原生app的webview不同,会默认覆盖满页面,不会出现小程序和webiew混排的情况

原生组件

小程序有一类特殊的组件,原生组件,如果使用该类组件,会单独予以渲染,具体的原生组件列表如下

image.png

原生组件也有不少限制,

  1. 原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上。后插入的原生组件可以覆盖之前的原生组件。

  2. 原生组件还无法在scroll-view、swiper、picker-view、movable-view 中使用。

  3. 部分CSS样式无法应用于原生组件,例如:

    • 无法对原生组件设置 CSS 动画
    • 无法定义原生组件为 position: fixed
    • 不能在父级节点使用 overflow: hidden 来裁剪原生组件的显示区域
    • 原生组件的事件监听不能使用 bind:eventname 的写法,只支持 bindeventname。原生组件也不支持 catch 和 capture 的事件绑定方式。
  4. 在iOS下,原生组件暂时不支持触摸相关事件。

  5. 原生组件会遮挡 vConsole 弹出的调试面板。

针对规则1. 我们可以使用 cover-viewcover-image可以覆盖在部分原生组件上面(经过测试,会有无法正常覆盖的情况,网上已有解决方案

方案1-嵌入式写法

方案2-延迟渲染写法