小程序系列（三）——踩坑（持续更新）

前言 

基于mpvue框架：mpvue官方文档

语法同vue框架：vue官方文档

小程序中会有一些坑点，这里会就工作中遇到的坑一一列举出来

 小程序基于mpvue开发遇到的坑点

v-show无法使用在小程序中

input标签的type无法动态赋值

img标签的src内不可使用三元运算符

详情页跳转旧数据不销毁处理办法

场景：从商品列表点击一件商品进详情，返回列表页，选择另一件商品进详情，会出现上一件商品的数据后再渲染新商品的数据 

// 解决方案
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组件为原生组件层级最高，穿透弹窗或遮罩层。

{{desc}}
请介绍一下自己的性格特点、工作经历，描述下自己擅长做的事情

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()

•  安卓手机不管是‘-’还是‘/’都能正确转成时间戳