1. 获取 JS-SDK 文件
1.官方 CDN(推荐)
在根目录index.html中引入jssdk
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
2.npm 包
npm install weixin-js-sdk
通过 ES Module 导入
import wx from 'weixin-js-sdk'
2.确认 wx 对象存在后再使用
javascript
// 推荐写法
if (window.wx && window.wx.miniProgram) {
window.wx.miniProgram.navigateTo({
url: "",
});
} else {
console.log('当前不在微信小程序 webview 中,或 SDK 未加载')
}
注:不要使用wx.miniProgram.navigateTo("目标地址")
在 wx.navigateTo 中,url 参数需要用对象形式包裹,即使只提供一个参数
如果window.wx.miniProgram获取不到为undefined
可能原因:
1.使用的JS-SDK版本不对:旧版本可能没有暴露miniProgram,或者需要特定环境。通 常微信JS-SDK jweixin-1.6.0.js 是包含miniProgram的。但可能被某些构建工具或CDN修改了
2.页面不是在微信小程序webview中运行:window.wx.miniProgram只有在微信小程序webview环境中才会被注入,普通浏览器或非微信环境下,该属性不存在
3.使用了错误的对象
解决方式:
1.确认当前页面确实在微信小程序的webview中运行
2.检查是否由于某些打包工具(如webpack)导致wx对象被封装或修改。尝试直接使用wx.miniProgram而不是window.wx.miniProgram
3.使用官方推荐的方式:if (typeof wx !== 'undefined' && wx.miniProgram)或者检查window.__wxjs_environment === 'miniprogram'
推荐通过 window.__wxjs_environment 来判断
javascript
if (window.__wxjs_environment === 'miniprogram') {
// 肯定在小程序 web-view 中
wx.miniProgram.navigateTo({ url: "" })
} else {
console.log('当前不在小程序 web-view 中')
}
使用 wx.miniProgram 直接尝试
javascript
if (typeof wx !== 'undefined' && typeof wx.miniProgram !== 'undefined') {
wx.miniProgram.navigateTo({ url: '' })
}
延迟获取
javascript
etTimeout(() => {
if (window.wx && window.wx.miniProgram) {
// 跳转
} else {
console.log('未检测到小程序环境')
}
}, 500)
如果确认后还获取不到
可能原因:
1.使用最新版本sdk 1.6.0 https://res.wx.qq.com/open/js/jweixin-1.6.0.js
2.小程序基础库太低 确保小程序基础库在 2.4.0 以上
如果window.__wxjs_environment为miniprogram但是wx.miniProgram 为 undefined
说明微信客户端虽然标识了小程序环境,但 JS-SDK 中的 miniProgram 属性没有被正确地注入或覆盖。
解决方法:
重新加载sdk
javascript
// 先移除已有的 wx 对象
onload(){
delete window.wx
// 重新动态创建 script 标签加载
var script = document.createElement('script')
script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js'
document.head.appendChild(script)
}
3.完整代码
H5
javascript
<template>
<view>
<view @click="btnGo">跳转</view>
</view>
</template>
<script>
onLoad() {
// 尝试重新加载
var s = document.createElement('script')
s.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js'
document.head.appendChild(s)
},
methods:{
btnGo(){
wx.miniProgram.navigateTo({
url: "目标地址",
});
}
}
</script>
小程序
javascript
<template>
<view>
<web-view src="你的url"></web-view>
</view>
</template>