微信浏览器H5跳转小程序完整示例复制可用

最新推荐文章于 2024-05-06 10:58:13 发布

灵活的胖子_

最新推荐文章于 2024-05-06 10:58:13 发布

阅读量1.5k

点赞数

分类专栏：微信公众号小程序文章标签： java javascript

本文链接：https://blog.csdn.net/lzq_20120119/article/details/115034082

版权

要实现从微信公众号H5页面点击按钮跳转到小程序

查找微信官方文档找到了方法，使用了页面微信js，对js做相应的配置之后，在页面引入跳转标签就可以进行跳转
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

代码引用前言：

首先跳转要使用jssdk
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
登录后可在“开发者中心”查看对应的接口权限。

系统定时获取微信的
access_token 【https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html】
jsapi_ticket【https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62】

页面处理：
1.引入js

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2.页面中要跳转小程序的按钮

<wx-open-launch-weapp id="launch-btn" username="gh开头的一串" path="/pages/  小程序的跳转链接" style="display: block;width: 100%;">
	<template style="display: block;width: 100%;">
		<style>
			.btn {
   
				display: block;
				width: 220px;
				height: 50px;
				line-height: 50px;
				background: #FABF01;
				border-radius: 5px;
				margin: 15px auto;
				font-size: 16px;
			}
		</style>
		<button class=