微信网页JSSDK实战备忘

微信网页JSSDK本地调试

修改hosts文件

C:\WINDOWS\system32\drivers\etc     // 修改 hosts 

参照下图

• 修改如下,当你访问百度时其实访问的是本地192.168.110.189

• 测试一下

命令行 ping 192.168.110.189

修改配置文件

• 修改vue.config.js
• disableHostCheck: true 跳过 webpack-dev-server默认检查hostname(启动服务链接),直接使用代理链接

devServer: {
    host: '0.0.0.0',
    port: 80,
    hot: true,
    disableHostCheck: true
  }

最后你就可以在微信开发者工具上面愉快的玩耍

录音相关功能基本坑

纪要

微信网页JSSDk录音最长录制1分钟 超时需要调用 onVoiceRecordEnd 并返回localId,注意真机调试,本地不触发

window.wx.onVoiceRecordEnd({ complete: res => { const localId = res.localId } })

开始录音之前推荐先调用关闭

window.wx.stopRecord()
window.wx.startRecord()

• 设置最少录制时间不少于3秒,过短造成错误
• 上传录音换取serverId时 可以设置显示loading,仅仅就是效果没有回调,真机可看
• 微信开发者工具返回 serverId是本地测试使用,是不能直接给服务端进行后续逻辑处理,需要真机测试获取

JSSDk分享避免个别真机不识别Hash参数

大致思路

• 把分享链接设置link定位到根目录,将需要分享链接当做参数
• 如果进入根目录发现分享参数,进行重定向

const link = `https://www.baidu.com/my?shareUrl=${encodeURIComponent(window.location.href)}`

if (location.search.indexOf('shareUrl') !== -1) { 
// 检测分享链接,是分享链接进行重定向 
    var url = location.search.slice(1)
    var params = url.split('&')
    const data = {} 
    params.map(str => { 
        const p = str.split('=') data[p[0]] = p[1] }) 
        const toUrl = decodeURIComponent(data.share) 
        // 拆url重定向 location.replace(toUrl) 
   }

分享链接测试

一定生成二维码测试,直接分享链接没效果