版权声明:本文为博主原创文章,遵循 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
}
}
}
这里解释一下:
扫描二维码关注公众号,回复: 7563706 查看本文章
- 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()
- 安卓手机不管是‘-’还是‘/’都能正确转成时间戳