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

相关文章