开发微信小程序时，遇到的坑

最近在开发小程序，遇到一些坑，总结出来跟大家分享一下，我这里使用的是mpvue框架，mpvue也有不少坑~

1.scroll-view的属性设置，scroll-y设置，不管我们设置scroll-y=true还是false，其实都会滚动的，要想设置scroll-y为false，我们需要用数据绑定的形式来设置才会起效:scroll-y=false

2.有时候明明设置 一个变量，当它为false的时候才展示某个元素，比如 isHide?hide:show，有时候会发现，在页面中，还是会先渲染出来一下，然后才被隐藏了，原因是，最开始的时候，data数据还没有初始化完成，这个时候，isHide是undefined，undefined变成boolean值，就是false，所以最开始还是show了，为了解决这种情况，我们可以使用全等符号。 isHide=== true ?hide:show

3.显示image的时候，如果我们设置了mode=widthFix，有时候在渲染的时候会看到图片有一个拉伸过程，然后才变成我们期望的大小，解决这个问题，可以给image添加height:auto；或者使用background-image来展示，需要注意的是background-image不支持本地路径，可以支持本地base64或者服务器返回来的图片

4.在父组件跳转到子组件的时候，使用navigateTo方法，携带参数，如果参数里面带特殊字符，会被截断，导致我们在子组件获取到的参数不正确。解决办法就是，通过encodeURIConponent，对参数进行编码，然后在子组件再进行解码，其实跟我们url传递参数是一样的，都需要注意这一点。

5.cover-view组件IOS可以支持滚动了，不过需要7.0以上版本的微信。

6.单页面目前也是可以支持自定义导航栏，同样需要7.0以上版本的微信。

7.mpvue的坑，双向数据绑定的时候，有些安卓机会卡顿。可以通过防抖赋值或者v-model.lazy，不使用双向绑定。

8.mpvue渲染速度比较慢，有时候会出现数据改变了，但是页面不渲染的情况。

9.<cover-view></cover-view>组件默认不换行，加上这一行代码，可以让它换行white-space:pre-wrap;

10. 第三方组件样式修改:

　　以iview webapp为例，不能直接通过其class的类名直接修改组件样式，可通过i-class来给组件添加类名，通过i-class来修改样式。

全文完，大家可以说说自己开发过程中遇到了哪些坑，以及解决办法^_^

<i-page i-class="ipage" current="{{ page }}" total="{{ total }}" bind:change="handleChange">
   <view slot="prev">
        <i-icon type="return"></i-icon>
          上一页
       </view>
       <view slot="next">
          下一页
       <i-icon type="enter"></i-icon>
   </view>
</i-page>

<style>
.ipage{
  height: 64px!important;
}
</style>

11. 使用wepy时，异步更新数据，手动刷新dom的时候需要使用 this.$apply()

12. 小程序语音功能，通过同声传译插件

https://developers.weixin.qq.com/community/develop/doc/0004aa70d609e099c1d671b2a56009

13. 主动获取位置授权： 

https://developers.weixin.qq.com/community/develop/doc/000cea2305cc5047af5733de751008

14. 原生组件遮盖的问题

由于原生组件层级最高，即使设置了其z-index也于事无补；不能随意在其层级上展示信息，只能通过cover-view和cover-image组件(其实这两个组件也是原生组件)来进行遮盖；

例如,下图在map原生组件上遮盖层：上方banner、地图上的气泡指针以及右下角的归位。

另外需要注意一点，若要在覆盖原生组件上，还需要保证一点：

由于`cover-view`和`cover-image`也是原生组件，需要保证他们插入页面的时机晚于要覆盖的原生组件，即先要插入原生组件。

例如上图中，地图上的banner遮盖层若不是包含在map原生组件内，那么就需要在map出现后插入，否则map组件也会覆盖cover-veiw

15. 不支持base64格式的图片问题

小程序有些图片是不支持base64格式的，例如cover-image，地图marker的iconPath等。在配合webpack构建小程序代码时需要注意不要对这些图片进行base64转换。