小程序开发有哪些坑（一）

小程序开发有哪些坑（一）

随着跳一跳小游戏和头脑王者的洗脑式盛行，小程序似乎向广大用户宣布，它要发力了。
公司内部也越来越多小程序的需求，所以本人也慢慢地开发了好几个小程序的项目。下面我把自己在开发的过程中遇到的一些坑记录一下，防止以后再踩坑。

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上面的元素就乱七八糟。 又譬如圆角的不起效等等。 具体的问题大家可以在开发者社区看看。
https://developers.weixin.qq.com/search?action=list&t=search/index&search_type=1&key=cover-view&token=&lang=zh_CN
避坑方法：
尽量在cover-view上不使用定位，其他的bug只能等官方优化，大家谨慎使用。

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

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

我说一下我这边的流程是怎样的，首先我要向公司申请账号互联的appid，然后要经过多个部门的捆绑和审核,然后在公司开发者账号下绑定小程序appid。然后等账号那边的同事把账号打通，然后才实现了账号互联的授权登录。
不同公司可能流程不大一样，写在这里只是作为步骤的记录，免得以后再踩坑。

先写到这里，以后再继续把其他的坑一一补上。

阿龙
2018-03-31