笔触狂放9

这个屌丝很懒，什么也没留下！

热门标签

小程序跳转-官网更新_wx.miniprogram.navigateto

作者：笔触狂放9 | 2024-08-08 06:11:35

踩

wx.miniprogram.navigateto

一.跳转问题

（1）.小程序跳转H5：

官网暂不支持直接跳转H5，只能通过嵌套web-view，来访问H5的页面。

web-view注意事项


<template>
	<view>
		<web-view id="viewopen" :src="src" @message="genData"></web-view>
	</view>
 
</template>
<script>
	export default {
		data() {
			return {
				src: ''
			}
		},
		onLoad(options) {
			let url = options.url
			let redirect_url = 'https://www.*****.com.cn/accesages?type=newurl&url=' + encodeURIComponent(url);
			this.src = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxa32b339***88a59&redirect_uri=' +
				encodeURIComponent(redirect_url) + '&response_type=code&scope=snsapi_base&state=1,0#wechat_redirect';
		},
		onShow() {},
		methods: {
			//获取传递的参数
			genData(e) {
				let dataArr = e.detail.data
				if (dataArr && dataArr.length > 0) {
					console.log(dataArr, 'dataArr && dataArr.length--')
					console.log(dataArr, '获取公众号的数据');
 
				}
			}
		}
	}
</script>

（2）.H5跳转小程序：

A.要获取公众号的信息的

小程序里内嵌的H5业务的时候跳回小程序。在H5引入js，调用wx.miniProgram.navigateTo跳转小程序方法

注意：这个wx.miniProgram.navigateTo 跳转小程序的方法，前提是这个h5的页面是在小程序的web-view嵌套里，然后才可以使用


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>h5跳转小程序</title>
    </head>
    <body>
        <h3 align="center">正在跳转到小程序...</h3>
        <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
        <script>
                wx.miniProgram.navigateTo({url: '/index/index?phone=18012121212'})
        </script>
    </body>
</html>

vue 的h5页面

安装weixin-js-sdk

在组件里


<template>
  <div>
    <div>H5公众号页面</div>
    <button @click="jump">跳转的</button>
    <button @click="backFn">返回 delta: 0</button>
  </div>
</template>
<script setup>
import wx from 'weixin-js-sdk'
import { useRoute } from 'vue-router'
const route = useRoute()
window.wx = wx
 
/*tabBar*/
const tabBarLinks = [
  '/pages/index/index',
  '/pages/product/category',
  '/pages/user/order',
  '/pages/user/my',
]
 
function jump() {
  let url = route.query.url
  if (!url || url.length == 0) {
    return false
  }
  if (tabBarLinks.indexOf(url) !== -1) {
 
    // switchTab 跳转的话，只能用   wx.miniProgram.postMessage传递参数，url不行
    wx.miniProgram.switchTab({
      url: url
    })
    wx.miniProgram.postMessage({ data: route.query })
  } else {
 // wx.miniProgram.navigateTo 目前只能通过url 传递参数，    wx.miniProgram.postMessage传递的话，小程序那边接受不到参数
    console.log('navigateTo：', url)
    wx.miniProgram.navigateTo({
      url: url + '?code=' + route.query.code
    })
  }
}
 
function backFn() {
//返回小程序上一级
  wx.miniProgram.navigateBack()
  wx.miniProgram.postMessage({
    data: route.query
  })
}
onMounted(() => {
  setTimeout(() => {
    //自动跳转
    wx.miniProgram.navigateBack()
    wx.miniProgram.postMessage({
      data: route.query
    })
  }, 1000) 
})
</script>
<style lang="scss" scoped></style>

小程序的获取值的方式如上面 web-view嵌套方式

B.直接跳小程序-2种方式

wx-open-launch-weapp

注意：

在web-view 里是不能直接识别wx-open-launch-weapp 。

使用微信开放标签前置条件
1、绑定域名
登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”

2、开放对象
1、已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
2、已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

开发过程中发现测试环境标签都不生效，只有在正式环境可以使用；开发工具不能实现跳转，只能使用手机测试

1）普通html页面

1.引入 js 文件：https://res.wx.qq.com/open/js/jweixin-1.6.0.js

2.通过config接口注入权限验证配置并申请所需开放标签


$.ajax({
  method:"GET",
  url: "请求后端地址",
  data: {
    // 请求参数
  },
  success: function (res) {
    //  根据返回的参数进行赋值
    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: res.data.appId, // 必填，公众号的唯一标识
      timestamp: res.data.timestamp, // 必填，生成签名的时间戳
      nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
      signature: res.data.signature, // 必填，签名
      jsApiList: [], // 必填，需要使用的JS接口列表
      openTagList: data.data.openTagList,
    });
  },
});
 
// 通过ready接口处理成功验证
wx.ready(function () {
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
});
 
// 通过error接口处理失败验证
wx.error(function (res) {
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
});

3.使用html


<!doctype html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <title>微信服务后台</title>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <style>
    .gooseApplet {
      width: 100%;
    }
    img {
      width: 100%;
      height: auto;
      display: block;
    }
 
    .big-container {
      width: 100%;
    }
  </style>
</head>
 
<body>
  <div class="big-container" id="internal"></div>
  <script>
    var mini_appid = 'wx6****82d';//小程序appid
    var path = 'pages/index/index.html';//小程序地址
 
    var goUrl = GetQueryString('goUrl')//获取地址
    var openid = GetQueryString('o')//openid
 
  
 
    // 获取wx api配置
    $.ajax({
      method: "GET",
      url: "https://www.hxfj.com.cn/wxAppletApi/wx/js-sdk",
      data: {
        url: 'https://www.hxfj.com.cn/gooseApplet.html?goUrl=' + goUrl + '&o=' + openid
      },
      success: function (res) {
        //  根据返回的参数进行赋值
        wx.config({
          debug: false,
          appId: res.data.appId, //公众号
          timestamp: res.data.timestamp,
          nonceStr: res.data.nonceStr,
          signature: res.data.signature,
          jsApiList: ['chooseImage', 'previewImage'], //必写，否则不显示
          openTagList: ['wx-open-launch-weapp'] //必写，否则不显示
        });
      },
    });
 
 
    // 通过ready接口处理成功验证
    wx.ready(function () {
      // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
    });
 
    // 通过error接口处理失败验证
    wx.error(function (res) {
      console.log('签名失败', res);
      // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
    });
 
  //跳转小程序购买
        //跳转小程序或公众号
        var appletcnt = '<div  class="gooseAppletBtn"  style="width: 80%;margin: 0 auto;cursor: pointer;"><img src="https://www.hxfj.com.cn//attach/2024/03/28/%E7%AB%8B%E5%8D%B3%E8%B4%AD%E4%B9%B0%E6%8C%89%E9%92%AE_20240328173926000004116.png" style=" width: 100%;" /></div>'
        // 也就是把 步骤3 中的代码进行样式和内容的更改，动态渲染
        // 这里有个小坑，如果说内容不显示，就给 wx-open-launch-weapp 标签设置width和height，设置不生效要加 position: absolute;
        document.getElementById("internal").innerHTML = '<div class="' + classsty + '" id="goWebs" ><img src="https://www.hxfj.com.cn//attach/2024/03/28/%E5%AE%A3%E4%BC%A0%E5%9B%BE1_20240328173905000003903.png" alt="背景图" />' + '<wx-open-launch-weapp style="    z-index: 999;position: fixed;left: 0; bottom: 0px;width: 100%; height: 52px;" id="launch-btn" appid="' + mini_appid + '" path="' + path + '"><template>' + appletcnt + '</template></wx-open-launch-weapp></div';
        var btn = document.getElementById('launch-btn');
        btn.addEventListener('launch', function (e) {
          console.log('成功');
        });
        btn.addEventListener('error', function (e) {
          console.log('失败', e.detail);
        });
 
 
    // 获取html地址栏参数的函数
    function GetQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    }
 
  </script>
</body>
 
</html>

效果如下

注意：a.内容和样式都要写在 wx-open-launch-weapp 标签里面，否则不生效，样式还可以写成行内样式,同时 wx-open-launch-weapp 标签定位position: fixed;是没效果

b.path 小程序地址必须加html

2）vue项目

安装weixin-js-sdk

组件使用


<div >
	<wx-open-launch-weapp
	id="launch-button"
	appid="wx6***82d"
	path="pages/index/index.html"
	@launch="handleLaunchFn"
	@error="handleErrorFn"
	>
	  <script type="text/wxtag-template">
	  <div style="width: 3rem; height: 3rem">打开小程序</div>
	</div>
	</wx-open-launch-weapp>
</div>
async mounted() {
    await this.init()
},
methods: {
	init() {
	 const url = window.location.href
		getJsSdk({
			url: url
		}).then(res => {
		console.log('获取jsdk:', res, res.data.appId)
		wx.config({
		  debug: true,
		  appId: res.data.appId, //公众号
		  timestamp: res.data.timestamp,
		  nonceStr: res.data.nonceStr,
		  signature: res.data.signature,
		  jsApiList: ['chooseImage', 'previewImage'], //必写，否则不显示
		  openTagList: ['wx-open-launch-weapp'] //必写，否则不显示
		})
		wx.ready(function (res1) {
		  console.log('获取签名成功：', res1)
		})
		wx.error(function (res2) {
		  console.log('获取签名失败：', res2)
		})
		})
	},
	handleLaunchFn (e) {
	  console.log(e)
	},
	handleErrorFn(e){
	  console.log('fail', e.detail);
	},                                            
}

注意： 1.页面报错找不到模板wx-open-launch-weapp,可以在main.js配置

Vue.config.ignoredElements = ['wx-open-launch-weapp']

2.官网例子中template标签要替换为 <script type="text/wxtag-template"><script>

3.注意安装的jssdk版本是1.6.0js

URL Scheme

该接口用于获取小程序 scheme 码，适用于短信、邮件、外部网页、微信内等拉起小程序的业务场景。通过该接口，可以选择生成到期失效和永久有效的小程序码，有数量限制，目前仅针对国内非个人主体的小程序开放

（3）.小程序跳转小程序：

同一公众号下关联的另一个小程序。如果没有关联同一个公众号，则无法成功打开另一小程序。（A主体小程序跳转B主体小程序，必须，A主体公众号关联B主体小程序或是B主体公众号关联A主体小程序）

2020年4月起，小程序跳转小程序不需要关联，直接调用 wx.navigateToMiniProgram 方法，就可以。也没有数量的限制

所以下面的代码需要注意，结合更新的官网。注意，在开发工具上，并不会跳转，要真机调试才有效果

（4）小程序嵌套h5.跳转其他小程序

首先web-view中H5是无法直接打开其他小程序的，只能通过H5跳转回小程序，再让小程序跳转到其他小程序。

H5跳转回小程序使用wx.miniProgram.navigateTo()小程序跳转小程序使用wx.navigateToMiniProgram(),官方文档有示例，用法很简单，只需要传入appid,还有path(可选参数，不是必须的，不传则默认跳转到小程序首页)

二、公众号关联小程序
公众号关联小程序后，将可在图文消息、自定义菜单、模板消息等功能中使用小程序。
关联规则：
所有公众号都可以关联小程序。
一个公众号可关联10个同主体的小程序，3个不同主体的小程序。
一个小程序可关联3个公众号。
公众号一个月可新增关联小程序13次，小程序一个月可新增关联5次。

补充：场景值

如：从公众号 profile小程序列表点击进去，获取appid；根据文档中的描述，当场景值为1020，可以在onLaunch中通过referrerInfo.appId获取到来源公众号appid，

二、wx.navigateToMiniProgram跳转

（1）.在A主体小程序app.json加上B主体小程序的appid

"navigateToMiniProgramAppIdList":[
"wx6f8.......26"
]

（2）.代码触发


let name = '**青11',certNo='35072******8';
//envVersion   ( "develop" 开发板    "trial" 体验版 "release" 正式版)
wx.navigateToMiniProgram({
	appId: "wx6f8*******86",
	path: 'pages/index/index?name='+name+"&certNo="+certNo,
	extraData: {
		name:'**青',
		certNo:'35072******8'
	},
	envVersion:  "trial",
	success(res) {
		console.log('跳B小程序',res)
	},
	fail(res) {
		console.log('跳B小程序跳转失败'+res.errMsg)
	}
})
 
注意调试的时候：A小程序可以通过主机模拟，跳转B小程序体验版，B小程序返回A小程序，之间开发板就好

B主体小程序 pages/index/index 页面 onLoad 可以获取path的参数（url跳转参数）

extraData的传参要在B主体小城app.js 在 App.onLaunch，App.onShow 中获取到这份数据。如果跳转的是小游戏，可以在 wx.onShow、wx.getLaunchOptionsSync 中可以获取到这份数据数据。如下图

（3）.报错


1、报错：fail appId "${appId}" is not in navigateToMiniProgramAppIdList
	在A主体小程序app.json加上B主体小程序的appid
	"navigateToMiniProgramAppIdList":[
		"wx6f8.......26"
	]
2、报错：navigateToMiniProgram:fail can only be invoked by user TAP gesture
	需要点击触发才跳转。于是只能想办法让用户去点击，加个提示框让用户确定继续进行操作？
	wx.showModal({
		title: '温馨提示',
		content: '跳转A主体小程序',
		showCancel:false,
		cancelColor: '#000000',
		confirmText: "确定",
		confirmColor: '#3cc51f',
		success: function (res) {
			  //envVersion   ( "develop" 开发板    "trial" 体验版 "release" 正式版)
			wx.navigateToMiniProgram({
				appId: "wx276f......01",
				path: 'pages/identityValidate/identityValidate?id=2222',
				envVersion:  "develop",
				success(res) {
					console.log('A小程序',res)
				},
				fail(res) {
					wx.showToast({
						title: 'B跳转失败'+res.errMsg,
						icon: 'none',
						duration: 1000
					});
					console.log('失败',res)
				}
			})
		}
	})
3 A小程序跳转到B小程序 ，点击允许跳转 报错“您的来源小程序未被授权或者授权查询失败“
 
这是B小程序来源小程序做了限制，为了阻止外部小程序直接跳转，打开

注意：小程序api 更新：

三.注意的问题

1.如A小程序跳转到B小程序，指定页面跳转（指定的页面，还有上一级的页面情况下），此时B小程序就没办法返回上一个页面。

2.A小程序跳转B小程序，提示框样式不可以修改或者去掉提示框

除了扫码和广告的小程序，自己弄的都会有弹窗提示跳转的

3.小程序模板消息：跳转页面仅限本小程序内的页面（官网说的）

4.小程序嵌套公众号:小程序后台系统白名单认证后，是可以访问，但是不能支付

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/946479