小程序的这些坑你踩过吗？

随着跳一跳小游戏和头脑王者的洗脑式盛行，小程序似乎向广大用户宣布，它要发力了。

公司内部也越来越多小程序的需求，所以本人也慢慢地开发了好几个小程序的项目。下面我把自己在开发的过程中遇到的一些坑记录一下，防止以后再踩坑。

1.模拟器和真机的差异

在开发的过程中，在模拟器上表现得好好的，在真机上却出问题的例子数不胜数。譬如动画的使用，cover-view上面使用定位，在模拟器好好的，在真机却错乱等等等等。

造成这些错乱主要是pc端和移动端不同的内核导致的。

避坑方式：

开发过程中，要时不时地用真机也看一下效果。

2.view对本地图片的引用

平时我们写页面，精彩会用一个标签，然后把图片写到该标签里面，直接引用，譬如下面这个例子：

<view class="icon"></view>

.icon{
color: #1d1d1d;  
background-image: url(../image/doll_user_bg.png);  
width：50rpx;
height:50rpx;
}

一眼看过去感觉没毛病，但是事实上你在模拟器或者真机上会发现，图片出不来。原因出在了相对路径的引用上。

避坑的方法：

（1）直接在标签的属性上添加图片的路径

<view class='icon' style="background-image: url('../image/doll_user_bg.png');"></view>

(2)使用绝对路径

.icon{
color: #1d1d1d;  
background-image: url(https://webtest.yystatic.com/project/yyDoll/mobile/image/doll_user_bg.png); 
width：50rpx;
height:50rpx;
}

(3)直接使用image标签代替view标签

<image src='../image/doll_user_bg.png'></image>

3.cover-view的样式

由于小程序里面video标签的层级是最高的无法覆盖。所以cvoer-view应运而生。它就是用于盖在video标签上面，进行对video标签的周遭加以装饰的利器。

然而，当我满心欢喜地以为这个标签很好用的时候，我遇到了很多奇奇怪怪的坑。

例如在cover-view上面使用相对定位，当video标签大小发生变化的时候，cover-view上面的元素就乱七八糟。又譬如圆角的不起效等等。具体的问题大家可以在开发者社区看看。 developers.weixin.qq.com/search?acti…

避坑方法：尽量在cover-view上不使用定位，其他的bug只能等官方优化，大家谨慎使用。

4.开发小程序的授权登录和公司账号互联

如果只是一般的授权登录还是挺简单的，但是如果你要把你公司的账号体系和微信互联起来，这个流程就不简单了。

我说一下我这边的流程是怎样的，首先我要向公司申请账号互联的appid，然后要经过多个部门的捆绑和审核,然后在公司开发者账号下绑定小程序appid。然后等账号那边的同事把账号打通，然后才实现了账号互联的授权登录。

不同公司可能流程不大一样，写在这里只是作为步骤的记录，免得以后再踩坑。

5.文字围绕

当你在cover-view上面要是实现图文混排的文字围绕时，你会发现平时的一些方法都失效了。

<cover-view><cover-image src="img.gif" />文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</cover-view>

最常用的图片浮动，没有效果。使用定位，使用缩进，使用css3的属性等等，弄出来的效果放到真机上都无法正常显示图文混排的文字围绕。目前暂时没有找到解决方法，有试过在cover-view实现的童鞋，求代码。

6.webview和小程序的通讯

刚开始看到小程序能内嵌webview的时候，内心是十分激动的。因为一些用小程序难以实现或者一些需要经常动态更改的页面，可以通过webview内嵌达到自己想要的效果。但是当我使用后，我发现坑爹了。webview和小程序竟然没有比较完善的通讯机制。小程序和webview的通讯，例如一些参数的传递，目前仅仅是支持url的参数传递。例如：

<web-view src="https://mp.weixin.qq.com？password=12212&name=sasa&ticket=215328736dsadaadasdadaswuqsahkshakskahskahsakhsakshkasha327428749827487284729847382dsakhdlahdlahskjhdlkhlkadhldkhal"></web-view>

如果你内嵌的webview页面是需要登录态的，你只能在url上面把那些账号密码，ticket什么的全传到参数上。很那个对不对。我在想如果有一天我要把一个复杂的form表单数据传过去那种酸爽。希望微信的童鞋能把通讯机制完善起来。

7.input组件的文字居中问题

input组件的宽度使用百分比，设置placeholder的文本text-align：canter，这时文字并不会正常居中。

原来input设置百分比， placeholder就不支持设置 text-align样式了，想实现居中，就只能把input的长度写死。

8.发送模板消息的限制

如果用户在你小程序进行了某些操作，例如支付或者消耗了你们的虚拟的产品时，你可能需要发消息告诉用户提醒用户或者告知用户。这个时候就需要使用到模板消息了。

当你想下发消息的时候你会发现，只有2种情况下你才能下发消息。

1.支付

当用户在小程序内完成过支付行为，可允许开发者向用户在7天内推送有限条数的模板消息（1次支付可下发3条，多次支付下发条数独立，互相不影响）

2.提交表单

当用户在小程序内发生过提交表单行为且该表单声明为要发模板消息的，开发者需要向用户提供服务时，可允许开发者向用户在7天内推送有限条数的模板消息（1次提交表单可下发1条，多次提交下发条数独立，相互不影响）

++注：目前只有这2种情况才能下发消息，而且是有条数限制的，谨记了++。

9.其他一些偶发的bug和小tips

在开发小程序的时候，还会偶发一些小bug，举例一下：

1.longpress 有时有效，有时候失灵

2.canvas的drawImage频繁调动会导致页面卡顿，卡...卡...顿....

3.getUserInfo的方法有时候会获取不到用户信息，建议可以使用轮询，获取到信息后再停止

4.小程序如果想使用一些特殊字体，可以先把字体转成base64，再引入使用

5.如果想做直播相关的需求，不要使用video标签，请使用live-player，可以做到更好的低时延

6.开发小程序之前需要去看看小程序是否已经开放该品类，否则后面会被封（不要问我为什么知道=_=!!）

Biegral Blog