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

这篇具有很好参考价值的文章主要介绍了uniapp微信公众号(h5)端跳转微信小程序。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

1、绑定域名

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


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

uniapp微信公众号(h5)端跳转微信小程序,微信小程序,uni-app,小程序,微信公众平台

 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分享微信好友,最后仅供参考文章来源地址https://www.toymoban.com/news/detail-649386.html

 !!!在页面初始化加载(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)
    }
}

到了这里,关于uniapp微信公众号(h5)端跳转微信小程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序如何跳转微信公众号

    登录微信公众号,点击【小程序管理】: 点击【添加】: 点击【关联小程序】: 输入小程序进行关联: 登录微信小程序,点击【设置】: 打开 “引导关注公众号”,设置需要关注的公众号: 首页添加代码: 如果关联的公众号为已认证企业号,可以添加如下代码: url 为公

    2024年02月11日
    浏览(113)
  • uniapp开发的App(安卓)端跳转uniapp微信小程序

    本文总结两种跳转方法:!!!适合自己的才是最好的         !   小程序的 URL Scheme           !! 小程序的 URL Link    代码实现: !!!切记本案例是前端调用,应该让后端封装调用(为了安全考虑) 以上可以拿到小程序的两种URL 链接 vebView页面代码: !!!打包App时需

    2024年02月08日
    浏览(50)
  • H5页面跳转微信小程序

    微信浏览器中实现跳转 使用微信官方接口 wx-open-launch-weapp (该方法只开放给已认证的服务号或者小程序云开发的静态网站托管绑定的域名下的网页) 案例代码 相关文档 目录 | 微信开放文档 微信开发者平台文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.htm

    2023年04月17日
    浏览(40)
  • H5跳转微信小程序-成功案例(VUE)(踩坑无数)

    微信官方文档:H5跳转小程序. 已认证的服务号 绑定JS接口安全域名 IP白名单 将小程序和H5公众号进行关联 需要跳转的小程序页面path和原始ID(gh_xxxxxxxxx) 引入jweixin-1.6.0.js 1、已认证的服务号 H5必须是依附于公众号的,且公众号必须为 服务号 ,不是订阅号。 什么样的公众号

    2024年02月09日
    浏览(35)
  • h5跳转微信小程序方案及注意事项(vue方向)

    在正式开发工作之前,请优先熟读并查看微信开发文档。 需提前登录微信公众平台进入“公众号设置”的“功能设置”的“JS接口安全域名”、“业务域名”、“网页授权域名”内依次配置h5页面的相关域名地址(例如:www.baidu.com)这里不包含协议名称和端口,同时可在根目

    2024年02月09日
    浏览(52)
  • uniApp配置微信分享 uniApp跳转微信小程序

    最近在做uniApp时需要跳转微信小程序进行支付,以为和跳转支付宝小程序支付一样简单结果让我发狂,跳转微信代码其实很简单就是下面这一段,但是要配置一大推东西 提示:plus为App端默认的系统参数,不用引入或者其他操作            ios跳转跳转微信小程序还需要配置

    2024年02月09日
    浏览(36)
  • uniapp中 app跳转微信小程序

    1.manifest.json中配置  appid 在微信开放平台申请应用的AppID,先到微信开放平台申请移动应用 然后在微信开放平台管理中心绑定小程序,拿到原始小程序原始id 2.app拉起小程序 // #ifdef APP-PLUS                 plus.share.getServices(                     res = {           

    2024年02月14日
    浏览(36)
  • uniapp 应用APP跳转微信小程序

            最近APP项目开发完成,在评审会上老板提了一个需求,想在开发的APP上添加一个链接,可以跳转公司的小程序商城。                 原以为会很复杂,结果只有短短的几行代码。         plus.share.getServices(function(res){                var sweixin = null;  

    2024年02月09日
    浏览(36)
  • h5页面跳转微信小程序(最简单的方法|URL Scheme)

    H5页面跳转微信小程序的需求是普遍存在的。由于微信小程序是一种只能在微信内部访问的应用程序,而H5页面可以在任何浏览器中访问,因此需要通过跳转来实现两者之间的衔接。 对于用户来说,H5页面跳转微信小程序可以提供更好的用户体验。用户可以在H5页面中浏览和选

    2024年02月02日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包