uniappH5跳转小程序

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>
相关推荐
紫禁玄科7 小时前
Shai-Hulud:npm生态的自我复制蠕虫风暴
前端·npm·node.js
东风破_8 小时前
后端API没写好,前端难道干等着吗?
前端
用户938515635078 小时前
从前后端分离到前端接口工程:React + MockJS + Vite 解析
前端·后端·全栈
用户938515635078 小时前
从零在浏览器里跑 DeepSeek-R1:WebGPU + Transformers.js 全链路实战(三)
前端·react.js·typescript
excel8 小时前
当前端行情变差,我们为什么还要坚持?
前端
鸿是江边鸟,曾是心上人9 小时前
快速搭建HTTPS本地开发环境
前端
java1234_小锋9 小时前
【免费】基于Python的微信小程序网约车(打车,在线叫车,移动出行)系统(FastAPI+Vue3) 锋哥原创出品,必属精品
微信小程序·小程序·fastapi·网约车系统·在线叫车系统
To_OC9 小时前
写了 5 个表单 Demo 后,我终于彻底搞懂了 React 受控与非受控组件
前端·react.js·前端框架
Sterting10 小时前
第9课 Vue Router 路由
前端·vue.js
用户0595401744610 小时前
LangChain Memory 测试踩坑实录:用 pytest 自动化回归对话记忆,我折腾了整整一个周末
前端·css