H5跳小程序的三种方法

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

1、H5页面嵌入到小程序中,H5跳本小程序其他页面

wx.miniProgram.navigateTo({
     url: '/pages/product/details?from=智能客服微信小程序&uits_source=智能客服微信小程序&productCode='+ code +'&uits_s01=28&uits_s02=XCX&uits_s03=buy'
 })

2、H5页面在服务号内直接跳转其他小程序

需要调用微信jssdk中的方法

$.ajax({
      //jssdk后台签名接口,需要后台提供
      url: '/weixinsignature/getWXJWeiXinSignature?url=' + encodeURIComponent(location.href.split('#')[0]) + '&sysNum=' + sysNum + '&wxcId=' + wxcId,
      type: 'get',
      success: function (data) {
        wx.config({
          appId: data.appid, 
          timestamp: data.timestamp, 
          nonceStr: data.nonceStr,
          signature: data.signature, 
          jsApiList: ['startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice', 'translateVoice', 'uploadVoice', 'chooseImage', 'uploadImage'], 
          openTagList: ['wx-open-launch-weapp']
        })
        ready()
      }
    })
<wx-open-launch-weapp class="launch-btn" name="'+ name +'" rel="'+ code +'"  path="'+ path +'"><template>'+ data +'</template></wx-open-launch-weapp>

3、H5页面嵌入到小程序中,H5跳其他小程序页面

此种不支持直接跳转其他小程序,需要先跳转到本小程序的一个空页面,然后在当前这个空页面的onload方法里面跳转其他第三方小程序
H5页面:

wx.miniProgram.redirectTo({
   url: '/pages/xiaoJi/xiaoJi?productCode='+ code +'&url=' + encodeURIComponent(JSON.stringify(location.href))
})

小程序空页面:文章来源地址https://www.toymoban.com/news/detail-559250.html

onLoad(options) {
    this.navigateToWxc(options)
}methods:{
  navigateToWxc: function(options){
      this.url = JSON.parse(decodeURIComponent(options.url))
      let programPath;
      if(options.productCode.indexOf("600") > -1){
          programPath = 'pages/global/detail'
      }else{
          programPath = 'pages/product/details'
      }
      programPath += '?from=智能客服微信小程序&uits_source=智能客服微信小程序'
         + '&productCode=' + options.productCode 
         + '&uits_s01=28&uits_s02=XCX&uits_s03=buy'
          wx.showModal({
              title: '提示',
              content: '是否允许跳转第三方小程序?',
              success (res) {
                  if (res.confirm) {
                      wx.navigateToMiniProgram({
                         appId: programAppId,
                         path: programPath,
                         success(res) {
                             console.log(res)
                         },
                         fail(err) {
                             console.log(err)
                          }
                      })
                  } else if (res.cancel) {
                       console.log('用户点击取消')
                  }
               }
           })
      }
}

到了这里,关于H5跳小程序的三种方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 从短信,H5页面浏览器跳转到微信小程序指定页面

     在H5页面或者短信链接中要进行小程序跳转,所以需要通过生成具体页面的链接进行跳转 1、参考链接生成接口,详见微信官方文档地址:urllink.generate | 微信开放文档      重点参数如图:       2、后端调用api进行生成  请求完的结果: 3、前端页面入口  4、编写一个中间

    2024年02月11日
    浏览(71)
  • Android——跳转到小程序

    1.接入第三方时,一定要先看官方文档,防止出错 微信开放文档 这个是从Android跳转到微信小程序的官方文档说明,是比较简单的 这里主要说明一下appId,这个是移动应用的appId,不是小程序的appId,文档说得很清楚 移动应用的appId,需要去微信开放平台去注册获取:  微信开放

    2024年02月15日
    浏览(42)
  • uniapp项目编译成H5后跳转到微信小程序(支持微信扫码、支付宝扫码)

    uniapp项目编译成 H5 后跳转到 微信小程序 (支持微信H5、支付宝H5) 场景:1、微信扫码跳转到该H5中后点击某事件(或者不点击直接跳转)需要跳转到微信小程序;2、支付宝扫码跳转到H5中后点击某事件(或者不点击直接跳转)需要跳转到微信小程序 思路:调用后端接口返回

    2024年02月13日
    浏览(50)
  • 记录--静态网站 H5 跳小程序,以及踩坑

    我司有 智慧功成家 APP和对应的小程序,现在已经实现APP分享到微信,微信点击分享链接直接进入小程序。 目前有一个问题就是我们APP在网警那边还没有完全审批下来,已经搞了几个月了,还不知道啥时能上线。微信对于这类分享是有限制的,可以分享1000次,后面不给分享了

    2024年02月05日
    浏览(52)
  • 微信短链跳转到小程序指定页面调试

    首先说下背景:后端给了短链地址,但是无法跳转到指定页面。总是在小程序首页。指定的页面我们是h5页面。排查步骤如下: 1、通过快速URL Scheme 编译。上部普通编译 下拉找到此选项。 、 2、按照小程序的要求的URL Scheme输入。另外后端给的短链打开之后,拷贝尾缀作为t

    2024年02月10日
    浏览(59)
  • Android与H5交互 -- 点击H5跳转到 Android原生 页面 ,webview与h5(js)交互

    Android与H5交互 app开发过程中,利用原生+h5模式来开发是比较常见的 下面案例演示的是:原生调起一个H5页面,然后H5点击跳转到原生 WebViewActivity页面 调用H5 ,点击H5链接 跳转到原生MainActivity页面 注意 别忘了 !-- 添加网络权限 -- 一、清单文件,增加的配置 data的数据就是H5

    2023年04月14日
    浏览(68)
  • 如何Uniapp中嵌入H5,并且在H5中跳转到APP的指定页面

    有一个需求是,在app中嵌入一个H5页面,H5是一个网络页面,不在app项目里,APP可以打开H5页面,实现单点登录,并且在H5 页面中打开APP指定的页面 在uniapp中,有一个web-view组件,这就相当于一个浏览器组件,可以用来承载网页的容器,会自动铺满整个页面 web-view的详细文档参

    2024年02月04日
    浏览(65)
  • 实现微信扫一扫跳转到小程序指定页面

    使用场景:例如我们经常用到的共享充电宝,首先我们需要使用手机上的微信,打开微信扫一扫,扫描共享充电宝上的二维码,当我们扫描二维码后微信会直接跳转到小程序内的某个页面(不一定是首页)。像其他的一些共享设备也是一样的运行模式。那么怎么样才能通过微

    2024年02月02日
    浏览(65)
  • 微信小程序扫描普通二维码跳转到小程序指定页面

    二维码就相当于是一个链接 相当于我们点击一个链接跳转到另一个页面 只不过这里是扫码的形式 1、首先我们需要在微信公众平台的开发管理——开发设置,找到(扫普通链接二维码打开小程序),点击添加,会出现下面的页面,配置好之后点击保存就行了 2、配置好之后我

    2024年02月11日
    浏览(66)
  • uniapp微信公众号跳转到小程序(是点击微信页面上面的按钮/菜单跳转)

    先看效果 先贴代码: 1、先下载依赖 2、main.js 3、使用的页面引入(或者main引入) 4、初始化、注册 5、html 接下来才是重点: 要在公众号后台配置JS接口安全域名、网页授权域名、IP白名单,而且域名需要备案,在微信开发者工具中不能通过ip调试,可以修改本地hosts代理一下

    2024年02月09日
    浏览(114)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包