mpvue小程序遇到的坑

图片

1.用img标签,只设置宽度100%,编译后生成的image标签自带高度(高度大小不知道怎么定的),
2.图片放在static目录下,编译后的dist文件夹下的static也建一个images的文件夹

v-for

  1. 要写:key="",要不然编译会警告
v-for="(item, index) in list" :key="item.name"

获取授权用户信息

  1. 改版后使用wx.getUserInfo()不再弹出授权弹窗:
  2. 解决方案:使用wx.getSetting,成功回调里判断是否授权过用户信息。if (res.authSetting[‘scope.userInfo’])
// 判断用户授权信息并做相应处理
wx.getSetting({
  success(res) {
    if (res.authSetting['scope.userInfo']) {
      // 已经授权,可以直接调用 getUserInfo 获取头像昵称
      wx.getUserInfo({
        success: function(data) {
          console.log(data.userInfo)
        }
      })
    } else {
    // 没有授权过的用户,跳转到自己写的授权提示页面
      wx.navigateTo({
        url: '/pages/getUserInfo/main'
      })
    }
  }
})

// getUserInfo页面
// 用户点击允许,这里有个坑
// 原生wx的写法

// 使用mpvue的写法,点击事件,要加上@符号

// 点击的methods方法
methods: {
  onGotUserInfo(e) {
    // 数据是e.mp
    console.log(e)
  }
}

使用web-view对应用进行转译成小程序???

使用mpvue,页面闪现上一页数据

商品列表页点击进入详情–返回–点击另一个商品详情页–中间会闪现上一次页面的内容
解决方法:在onLoad()的时候:

onLoad() {
	Object.assign(this.$data, this.$options.data())
	dataArr.push({ ...this.$data })
}

用canvase绘图,生成带小程序码的海报用于分享朋友圈

  1. 调试工具上绘不出圆,真机 上 ok
  2. 对于网络图片的显示绘画,要先下载图片: wx.downloadFile(),用下载好的图片地址绘画
  3. 图片下载可能需要时间,所以点击分享生成海报图片的时候设置定时器定时检查所必要的那几张图片是否下载完成
    mpvue小程序遇到的坑_第1张图片

路由跳转,tabBar页和非tabBar页跳转API有区别:

https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html

你可能感兴趣的:(小程序)