小程序 web-view 内嵌的 h5 调用微信头像和昵称

连踩了好几个大坑,太深,记录一下。

小程序端 (wepy)

const userInfo = this.$parent.globalData.userInfo
// 参数值需要用 encodeURIComponent 进行编码
const nickName = encodeURIComponent(userInfo.nickName)
const avatarUrl = encodeURIComponent(userInfo.avatarUrl)
// 不能使用 # 字符拼接参数,在真机微信上会报错,推荐使用 ?...&...
this.src = `result?nickName=${nickName}&avatarUrl=${avatarUrl}`

h5 端 (vue)

const paramStr = window.location.href.split('?nickName=')[1]
if (paramStr) {
  const param = paramStr.split('&avatarUrl=')
  // 使用 decodeURIComponent 解码
  this.nickName = decodeURIComponent(param[0])
  this.avatarUrl = decodeURIComponent(param[1])
}

最后,使用 <img/> 在真机预览时显示不了图像,就算调用同域名下的远程图像也显示不了,正确的姿势是使用 background .

PS:用 vue + wepy 开发小程序很完美。

 

历史上的今天:

  1. 2017:  压岁钱(0)
  2. 2015:  第2456天:在家工作的时间好难挤(0)
  3. 2014:  第2079-2090天:春节(0)
  4. 2012:  第1359天:《心理学导论》随记(1),用“我的电脑”直接访问 FTP 的方法(0)
  5. 2009:  第264天:取消“焦点”新增“创业”“日常”,和郑振两口子一起吃牛排(0)

RSS

上一篇:

下一篇:

发表评论

电子邮件地址不会被公开。 必填项已用*标注