外观

本页目录

微信小程序内嵌uniapp网页 ​

参考：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

接口名说明最低版本
wx.miniProgram.navigateTo参数与小程序接口一致1.6.4
wx.miniProgram.navigateBack参数与小程序接口一致1.6.4
wx.miniProgram.switchTab参数与小程序接口一致1.6.5
wx.miniProgram.reLaunch参数与小程序接口一致1.6.5
wx.miniProgram.redirectTo参数与小程序接口一致1.6.5
wx.miniProgram.postMessage向小程序发送消息1.7.1
wx.miniProgram.getEnv获取当前环境

单纯的内嵌的h5页面 ​

在嵌入的h5页面中调用时在页面引入微信的js

javascript
// <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

页面调用

javascript
const isWeiXin = /MicroMessenger/i.test(navigator.userAgent);
if (isWeiXin) {
        //判断是否是微信环境  
        wx.miniProgram.getEnv(function (res1) {
          if (res1.miniprogram) {
            wx.miniProgram.redirectTo({
              url: "/pages/index/index", //这里是小程序页面
            });  
            // wx.miniProgram.navigateBack({ delta: 1 })
          } else {
            //非微信小程序环境下逻辑
          }
        });
} else {
        //html5 环境下 
        console.log("env is html");
 }

内嵌uniapp的h5页面 ​

  • 使用自定义模板

    • 工程根目录下新建一个html文件

    • 复制下面的基本模板内容，到这个html文件，在此基础上修改meta和引入微信的js

      javascript
      <!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>
			<%= htmlWebpackPlugin.options.title %>
		</title> 
		<script>
			var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
			document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
		</script>
		<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
		<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
	</head>
	<body>
		<noscript>
			<strong>Please enable JavaScript to continue.</strong>
		</noscript>
		<div id="app"></div>
		<!-- built files will be auto injected -->
	</body>
</html>

    • 在 manifest.json->h5->template 节点中关联这个html文件的路径

      javascript
      "h5" : { 
	"title" : "测试跳转",
	"template" : "template.html"
}

  • 调用小程序方法,使用 jWeixin 代替 wx

javascript
const isWeiXin = /MicroMessenger/i.test(navigator.userAgent);
if (isWeiXin) {
        //判断是否是微信环境  
        jWeixin.miniProgram.getEnv(function (res1) {
          if (res1.miniprogram) {
            jWeixin.miniProgram.redirectTo({
              url: "/pages/index/index", //这里是小程序页面
            });   
          } else {
            //非微信小程序环境下逻辑
          }
        });
} else {
        //html5 环境下 
        console.log("env is html");
 }

在 GitHub 上编辑此页