258资源分享网

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

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

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=http://www.yiyongtong.com/archives/"img.gif" />文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</cover-view>

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

6.webview和小程序的通讯

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

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