mpvue 小程序开发爬坑汇总

<!-- 小程序的爬坑记录 -->

1 微信小程序之动态获取元素宽高 var obj=wx.createSelectorQuery();

2 微信小程序图片自适应 <image class="themeImg" :src="themeImg" mode="widthFix" /> mode设置为widthFix 宽度100%

3.小程序上拉加载 下拉刷新

4.经过 this.$root.$mp.query 进行获取小程序在 page onLoad 时候传递的 options。经过 this.$root.$mp.appOptions 进行获取小程序在 app onLaunch/onShow 时候传递的 options。

5 style 支持的语法:

动态给生成节点赋样式

<p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</p>

<p v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</p>

6 微信小程序地图markers 动态数据渲染的坑

因为异步设置值的过程，组件已经渲染。可是map变量没有预约义是undefined状态，map初始化拿不到数据直接报错了，而异步过来又变成动态更新致使了wxml须要从新渲染map组件的状况致使的。由于官方文档有提到：

地图组件的经纬度必填, 若是不填经纬度则默认值是北京的经纬度。 标记点markers只能在初始化的时候设置，不支持动态更新。

只能初始化一次，所以致使每次都是显示的初始化信息。

 

wx:if会渲染一下组件，那咱们按照这个思路给他加个if就好了

<map markers="{{markers}}" style="width: 375px; height: 200px;" wx:if="{{map}}"></map>

默认map是false,就是加载时不渲染map组件，等ajax回来后把map设置为true，这样就动态渲染成你要的地址了

7.小程序显示弹窗时禁止下层的内容滚动

 用 catchtouchmove="return"

//此处为弹窗内容
<view  catchtouchmove="return"> //外层加 catchtouchmove="return"仅触摸背景区域时不穿透底部.
    <view  catchtouchmove="return"></view> //在每一个小的区域内加 catchtouchmove="return"
    <view> // 有须要滚动的列表区域位置不要加 catchtouchmove="return", 不然列表没法滚动
        <view>滚动列表1</view>
        <view>滚动列表2</view>
        <view>滚动列表3</view>
        <view>滚动列表4</view>
    </view>
</view>

8.小程序使用地图导航功能进行地图导航

wx.getLocation({//获取当前经纬度
      type: 'wgs84', //返回能够用于wx.openLocation的经纬度，官方提示bug: iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息  
      success: function (res) {
        wx.openLocation({//​使用微信内置地图查看位置。
          latitude: 22.5542080000,//要去的纬度-地址
          longitude: 113.8878770000,//要去的经度-地址
          name: "宝安中心A地铁口",
          address:'宝安中心A地铁口'
        })
      }
    })

 

 

wx.getLocation({//获取当前经纬度
      type: 'wgs84', //返回能够用于wx.openLocation的经纬度，官方提示bug: iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息  
      success: function (res) {
        wx.openLocation({//​使用微信内置地图查看位置。
          latitude: 22.5542080000,//要去的纬度-地址
          longitude: 113.8878770000,//要去的经度-地址
          name: "宝安中心A地铁口",
          address:'宝安中心A地铁口'
        })
      }
    })

 

 

 

9.隐藏canvas的状况下不能导出图片？

如今须要作一个图片处理的功能 可是又不须要canvas显示在页面上，

我尝试了不少隐藏的方法 结果都是两种：

1. canvas始终显示并且显示在最上层 比debug的页面都高
2. canvas display:none 可是没法经过canvasToTemoFilePath导出图片
3. 父级宽高0，overflow:hidden 无效 ，canvas很霸道...

解决方案： 把canvas定位到了屏幕外

 

10.小程序更新迭代很快 ，建议多去看看小程序官方api文档