uniapp微信公众号(h5)端跳转微信小程序

!!!不是微信公众号菜单跳转小程序

微信公众号菜单跳转小程序:公众号和小程序相互关联,在公众号的自定义菜单中配置即可

1、绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。


!!!登录后可在“开发者中心”查看相应的接口权限。

 2、安装依赖 jweixin-module

npm install jweixin-module --save

3、引入挂载

!!!main.js引入挂载

import wx from 'jweixin-module'

//单页面挂载main.js中也要写以下代码
Vue.config.ignoredElements.push('wx-open-launch-weapp')

!!!单页面引入挂载

import wx from 'jweixin-module'

4、通过 config 接口注入权限验证配置(需要后端配合)

        !!!Java代码请移步到微信公众号H5分享微信好友,最后仅供参考

 !!!在页面初始化加载(onLoad、created)

//#ifdef H5
  uni.request({
    url: '请求地址',
    method: 'POST',
    data:'传参',
    header: {//配置请求头
      'Content-Type': this.$store.state.contentType,
      'Authorization' : this.$store.state.token
    },
    success: res => {
      if (res.statusCode < 500) {
        if (res.data.code === 200) {
          // console.log('res.data', res.data.data)
          wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
            appId: res.data.data.appId, // 必填,公众号的唯一标识
            timestamp: res.data.data.timeStamp, // 必填,生成签名的时间戳
            nonceStr: res.data.data.nonceStr, // 必填,生成签名的随机串
            signature: res.data.data.sign, // 必填,签名,见附录1
            jsApiList: ["wx-open-launch-weapp"], // 必填,需要使用的JS接口列表
            openTagList:['wx-open-launch-weapp'], // 可选,需要使用的开放标签列表,例如['wx-open-launch-weapp','wx-open-launch-app']
          })
          wx.ready(res => {
            console.log('res',res);
          });
          wx.error(res => {
              console.log('error',res);
          });
        }
      } else {
        console.error('服务器错误,请检查')
      }
    },
    fail: err => {
      uni.showToast({
        title: '请求失败',
        icon: 'error'
      })
    }
  })
  //#endif

5、html代码:

<wx-open-launch-weapp
	@launch="handleLaunchFn"
    class="launch-btn"
    username="目标小程序的原始ID" <!-- 不是appId,是以gh_开头的原始ID -->
    path="pages/index/index?openID=123456&str=666"<!-- 要跳转目标小程序的路径页面 -->
	style="display: block;">
  <script type="text/wxtag-template">
      <style>
		  .text {
			font-size: 30rpx;
		  }
      </style>
	  <view class="text">测试跳转小程序</view>
  </script>
</wx-open-launch-weapp>
methods: {
    handleLaunchFn (e) {
	    console.log('success', e)
    }
}
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值