当前位置:   article > 正文

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

jweixin-module

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

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

1、绑定域名

  1. 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
  2. !!!登录后可在“开发者中心”查看相应的接口权限。

 2、安装依赖 jweixin-module

npm install jweixin-module --save

3、引入挂载

!!!main.js引入挂载

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

!!!单页面引入挂载

import wx from 'jweixin-module'

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

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

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

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

5、html代码:

  1. <wx-open-launch-weapp
  2. @launch="handleLaunchFn"
  3. class="launch-btn"
  4. username="目标小程序的原始ID" <!-- 不是appId,是以gh_开头的原始ID -->
  5. path="pages/index/index?openID=123456&str=666"<!-- 要跳转目标小程序的路径页面 -->
  6. style="display: block;">
  7. <script type="text/wxtag-template">
  8. <style>
  9. .text {
  10. font-size: 30rpx;
  11. }
  12. </style>
  13. <view class="text">测试跳转小程序</view>
  14. </script>
  15. </wx-open-launch-weapp>
  1. methods: {
  2. handleLaunchFn (e) {
  3. console.log('success', e)
  4. }
  5. }
本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号