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，这样就动态渲染成你要的地址了