欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

uniapp 公众号网页跳转小程序

程序员文章站 2022-07-02 19:19:56
一、导言今天上头领导安排了个任务,公众号跳转小程序,没多想以为很简单,就开始干结果意外发现没有做过,又get到一个新技能,现在分享给大家,期间遇到签名(错误码:63002)的问题花了一些时间,那么废话不多说,直接上代码:1.引微信js-sdknpm install jweixin-module --save 2.在需要调用的页面中引入import jweixin from 'jweixin-module'3.js调用jssdk_configs() {let url = encodeU...

一、导言

今天上头领导安排了个任务,公众号跳转小程序,没多想以为很简单,就开始干结果意外发现没有做过,又get到一个新技能,现在分享给大家,期间遇到签名(错误码:63002)的问题花了一些时间,那么废话不多说,直接上代码:

1.引微信js-sdk

npm install jweixin-module --save  

2.在需要调用的页面中引入

import jweixin from 'jweixin-module'

3.js调用

jssdk_configs() {
	let url = encodeURIComponent(window.location.href.split('#')[0]); // 很重要
	let obj = {
		url: url
	}
	jssdk_config(obj).then(response => {
		let res = response.data
		if (res.code === 1) {
			let info = {
				debug: false, // 调试,发布的时候改为false
				appId: res.data.appId,
				nonceStr: res.data.nonceStr,
				timestamp: res.data.timestamp,
				signature: res.data.signature,
				jsApiList: res.data.jsApiList,
				openTagList: ['wx-open-launch-weapp', 'wx-open-launch-app']
			};
			jweixin.config(info);
			jweixin.error(err => {
				console.log('config fail:', err);
			});
	
			jweixin.ready(res => {
				if (callback) callback(jweixin);
			});
		}
	}).catch(error => {
		console.log(error)
	})
},

这里报错,要注意看appid和url,看看是否写错

4.视图层调用

<wx-open-launch-weapp
	  id="launch-btn"
	  username="gh_******", // 小程序的原始id, 下面会教如何获取
	  path="****" // 需要跳转的小程序页面地址
	>
	 <script type="text/wxtag-template">  
		 <style>  
			 .btn-open-weapp{
				 width: 226px;
				 height: 52px;
				 background: linear-gradient(0deg, rgba(255, 179, 16, 0.99), rgba(255, 227, 2, 0.99));
				 border-radius: 26px;
				 border: none;
				 margin-top: 18px;
				 font-size: 16px;
				 color: #B0240A;
				 font-weight: bold;
			 }
			 .btn-open-weapp::after {
				 border: none;
			 }
			 .btn-open-weapp::before {
				 border: none;
			 }
		 </style>
		 <button class="btn-open-weapp">点击领取红包领餐</button>
	 </script>
</wx-open-launch-weapp>
  1. 结果展示
    uniapp 公众号网页跳转小程序
    6.教下如何查看小程序的appid和原始id(会的人可以不用往下看),这里拿饿了么小程序为例:
    1.首先点开饿了么小程序
    uniapp 公众号网页跳转小程序
    2.弹出框后,点击头像那块
    uniapp 公众号网页跳转小程序
    3.点击更多资料

uniapp 公众号网页跳转小程序
4.打工告成
uniapp 公众号网页跳转小程序

本文地址:https://blog.csdn.net/weixin_44097578/article/details/112554656

相关标签: uniapp 公众号