html5获取微信昵称,小程序 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])

}

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

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