版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
前言
基于mpvue框架：mpvue官方文档
语法同vue框架：vue官方文档
小程序中会有一些坑点，这里会就工作中遇到的坑一一列举出来
小程序基于mpvue开发遇到的坑点
v-show无法使用在小程序中
<!-- 下面这行代码无法正常工作 -->
<img v-show="IDcard" :src="IDcard" alt="">
<!-- 替代方案 -->
<img v-if="IDcard" :src="IDcard" alt="">input标签的type无法动态赋值
<!-- 下面的inputType的值可能为：number|text|tel -->
<!-- 下面的代码无法得到正确结果 -->
<input class="value" :type="inputType" v-model="value">
<!-- 替代方案 -->
<input v-if="inputType === 'text'" class="value" v-model="value" type="text">
<input v-else-if="inputType === 'number'" class="value" v-model="value" type="number">
<input v-else class="value" v-model="value" type="tel">img标签的src内不可使用三元运算符
<!-- 下面的写法导致src拿不到bg_identity.png -->
<img :src="IDcard?IDcard:'../../../static/images/bg_identity.png'" alt="">
<!-- 替代方案 -->
<img v-if="IDcard" :src="IDcard" alt="">
<img v-else src="../../../static/images/bg_identity.png" alt="">详情页跳转旧数据不销毁处理办法
场景：从商品列表点击一件商品进详情，返回列表页，选择另一件商品进详情，会出现上一件商品的数据后再渲染新商品的数据
// 解决方案
onUnload () {
Object.assign(this.$data, this.$options.data())
}- 在小程序的页面卸载生命钩子onUnload中添加以上代码，可让data对象里的属性重新初始化
原生组件的层级问题
官方说明文档原生组件说明
- 举例说明：如果想让一个按钮定位在canvas内容层级上面，直接使用z-index是无效的，
- 解决办法：使用小程序提供的cover-view 与 cover-image组件可覆盖在部分原生组件上面，
- 实际例子：①button组件定位在canvas组件上面√；
- 注意事项：①使用了cover-view组件后，cover-view容器内不能使用常规的div，a，span等等，可嵌套cover-view 、 cover-image和button√；②可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher
onLoad与onShow的区别
onLoad：页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
- 例如从分享的消息卡片中带参数到指定页，如：pages/index/main?id=123
onLoad (e) {
console.log(e.id) // 123
},
onShareAppMessage: function (res) {
return {
title: '邀请您填简历',
path: `/pages/index/main?id=${this.id}`
}
}
onShow：页面显示/切入前台时触发。不可带参数，但是可以动态更新当前页
textarea原生组件相关问题
解决textarea组件为原生组件层级最高，穿透弹窗或遮罩层。
<textarea v-model="desc" class="inp" placeholder="" auto-focus v-if="focusFlag" @blur="hideTextarea"></textarea>
<p v-else-if="!focusFlag && desc" class="textarea-replace" @click="showTextarea">{{desc}}</p>
<p v-else class="textarea-replace no-desc" @click="showTextarea">请介绍一下自己的性格特点、工作经历，描述下自己擅长做的事情</p>export default {
data () {
desc: '',
focusFlag: true
},
methods: {
hideTextarea () {
this.focusFlag = false
},
showTextarea () {
this.focusFlag = true
}
}
}这里解释一下：
- auto-focus很重要，不加的话，每次输入文字都得聚焦（点击）两次；
- placeholder可以通过增减p标签的class名来实现，即class="no-desc"
- @blur事件是失去焦点时触发
new Date()设置日期在IOS的兼容问题
new Date(date).getTime()，用这个方法来获取时间戳时，iphone手机上打印出的时间戳为NaN
- 日期为2019-08-27 16:11:02时使用
new Date(date).getTime()方法无法在iphone手机上获取到对应的时间戳 - 解决方案：
const time = '2019-08-27 16:11:02'
const newTime = new Date(time.replace(/-/g, '/')).getTime()- 安卓手机不管是‘-’还是‘/’都能正确转成时间戳