one. 微信公众号跳转小程序

一、微信开放文档
二、步骤
1、引入微信js-sdk npm install wx-module --save
2、在调用的页面中引入import wx from 'jweixin-module'
3、页面报错找不到模板wx-open-launch-weapp时,main.js中Vue.config.ignoredElements = [ 'wx-open-launch-weapp']
4、引入微信开放标签,在main.js中配置Vue.config.ignoredElements = [‘wx-open-launch-weapp’]出现下面报错,则将配置改为Vue.config.ignoredElements = [...Vue.config.ignoredElements, 'wx-open-launch-weapp']

在这里插入图片描述

5、获取wx.config注册信息
let url = window.location.href.split('#')[0];//要在公众号平台设置JS接口安全域名,ip白名单
  uni.request({
      url: "aaaaaaaaaaa',//调取后台接口拿到wx.config中的参数
      method: 'GET',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: data => {
          wx.config({
              debug: true, // 开启调试模式,返回值会在客户端alert出来。
              appId: "", // 必填,公众号的唯一标识
              imestamp: "", // 必填,生成签名的时间戳
              nonceStr: "", // 必填,生成签名的随机串
              signature: "", // 必填,签名
              jsApiList: [], // 必填,需要使用的JS接口列表
              openTagList: [ 'wx-open-launch-weapp'] // 可选,需要使用的开放标签列表
          });
          wx.ready(function() {
          	let btn = document.getElementById('launch-btn');//视图层对应的id名
			btn.addEventListener('launch', e => {
				console.log('success');
			});
			btn.addEventListener('error', e => {
				console.log('fail', e.detail);
			});
          });
     }     
   });
6、view视图层调用(需注意,html和css内容均为原生写法,不能用框架组件和框架内置样式)
<wx-open-launch-weapp 
	id="launch-btn" 
	username="gh_************" // 小程序的原始id
	path="****" // 需要跳转的小程序页面地址,不填会跳首页,必须.html结尾
	style="width:100%">
	<script type="text/wxtag-template">
		<style>
			.box{width: 100%; display: flex;flex-direction: column;align-items: center;justify-content:center;}
			.text{width: 100%;margin-top: 8px;font-size: 12px;color: #333333;display: inline-block;text-align: center;}
		</style>
		<div class="box">
			<img src="xxxx.png" width="36px" height="36px"/>
			<span class="text">智能门禁</span>
		</div>
	</script>
</wx-open-launch-weapp>
5、成功界面

在这里插入图片描述

two. h5页面跳转小程序

参考 微信官方文档

服务端获取小程序 scheme url,h5跳转即可:

window.open(“weixin://dl/business/?t=xxxxxxx”)

在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐