H5--公众号页面如何唤起小程序

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

一、整体流程

  1. 认证服务号
  2. 绑定 JS接口安全域名
  3. 配置IP白名单
  4. 将H5和小程序进行关联
  5. 引入 微信sdk jweixin-1.6.0.js
  6. 需要跳转的小程序页面path和原始ID(gh_xxx)

二、检查流程配置是否正确

先查看官方的文档需求:

一步到位「开发前必读文档」
公众号拉起小程序,Vue2,小程序,前端
一步到位「微信 SDK说明文档」
公众号拉起小程序,Vue2,小程序,前端

三、配置

1. 认证服务号;

指微信公众号,不是订阅号,在做之前一定要检查清楚;

2. 绑定JS接口安全域名;

这个需要在微信公众号后台配置,不要找错地方哦
公众号拉起小程序,Vue2,小程序,前端

3. 配置IP白名单

IP白单也是在公众号后台配置:进入公众号》设置与开发》安全中心》找到IP白名单区设置》
公众号拉起小程序,Vue2,小程序,前端

4. 将小程序和H5公众号进行关联

微信公众后台链接:https://mp.weixin.qq.com/
关联公众号登录 “公众号管理后台-小程序管理” 完成关联
查看关联公众号在小程序后台配置:进入小程序后台》设置》关联设置》关联的公众号》

公众号拉起小程序,Vue2,小程序,前端

5. 引入微信jweixin-1.6.0.js

公众号拉起小程序,Vue2,小程序,前端

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
6. 跳转小程序基本信息

● 小程序名称
● 小程序的AppId
● 跳转小程序的path
● usename (所需跳转的小程序原始id,即小程序对应的以gh_开头的id(跳转时,有 appid 会优先使用appid,没有 appid 才会使用username))

四、开发工作

main.js

Vue.config.ignoredElements = ["wx-open-launch-app"];
<template>
  <div class="navi-container">
    <div class="fake-btn" id="weappBtn">跳转小程序</div>
    <wx-open-launch-weapp v-if="isWechat" @launch="launch" appid="xxx" path="pages/index/index?bxChannel=gansuyuanxinhuibao" style="position: absolute;top: 0;left: 0;width: 100%;height: 50px;z-index: 10;">
      <script type="text/wxtag-template">
        <style>.btn {width: 100%;height: 50px;position: absolute;left: 0;top: 0;z-index: 99;background: transparent;border: none;}</style>
        <button class="btn" id="NaviToMini"></button>
      </script>
    </wx-open-launch-weapp>
  </div>
</template>
<script>
import { getHBJsApiConfig } from '@/api/wx'
import { getDeviceInfo } from '@/util/tools' // 工具类
export default {
  data() {
    return {
      isWechat: getDeviceInfo().env === 'wechat'
    }
  },
  async mounted() {
    try {
      if (this.isWechat) {
        let wxConfigInfo = ''
        // 初始化 微信sdk 获取初始化相关密钥
        let sigData = await getHBJsApiConfig()
        wxConfigInfo = JSON.parse(sigData.data)
        window.wx.config({
          debug: false,
          appId: wxConfigInfo.appId,
          timestamp: wxConfigInfo.timestamp,
          nonceStr: wxConfigInfo.nonceStr,
          signature: wxConfigInfo.signature,
          jsApiList: ["scanQRCode","updateAppMessageShareData","updateTimelineShareData"],
          openTagList: ["wx-open-launch-weapp"],
        })
        window.wx.ready(function () {
          console.log("---------ready---------")
        });
        window.wx.error(function (res) {
          console.log("--------fail--------", res)
        });
      }
    } catch (e) {
      // 接口报错 打印错误信息
    }
  },
  methods: {
    launch(e) {
      console.log("获取小程序 允许 按钮 操作回调", e)
    }
  }
}
</script>
<style lang="less"  scoped>
.navi-container {
  position: relative;
  width: 305px;
  height: 50px;
  margin: 18px auto;
  .fake-btn {
    width: 305px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 25px;
    border: 1px solid rgba(246, 31, 30, 1);
    color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 50px;
    z-index: 1;
    background: linear-gradient(to right, #DB0003, #FF6C61);
  }
}
</style>

五、注意事项

● 系统版本要求为:iOS 10.3及以上、Android 5.0及以上
● 微信版本要求为:7.0.12及以上

六、参考文档

官方文档
H5跳转小程序成功案例文章来源地址https://www.toymoban.com/news/detail-740853.html

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

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

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

相关文章

  • 移动端H5页面在input输入框获得焦点时禁止唤起键盘

    移动端 实现效果: 当input输入框获得焦点时,在保留光标的情况下,又不让手机虚拟键盘弹起 问题背景: 哈哈哈哈 我又来了,又是java安卓应用嵌入H5页面,给大家看下效果 点击开始时间或者结束时间时会弹出日期选择器,这个时候呢在手机上看的话,会同时触发键盘,导

    2024年02月16日
    浏览(53)
  • 如何在App里拉起小程序?

    什么是小程序运行时框架? FinClip 的小程序编程模型是分为多个页面,每个页面有自己的 template、CSS 和 JS,实际在运行的时候,业务逻辑的 JS 代码是运行在独立的 JavaScript 引擎中,每个页面的 template 和 CSS 是运行在各自独立的 WebView 里面,页面之间是通过函数 NavigateTo 进行

    2024年02月11日
    浏览(29)
  • uniapp web-view 小程序内嵌H5 打开地图 唤起APP

      uniapp开发小程序内嵌H5的场景中,有需求如下:   在已知某个地点经纬度的情况下,可以在H5打开地图查看该地点的位置,以及能够唤起手机上的地图APP进行导航等操作。   此时uni.openLocation在唤起导航的时候,是打开在线的导航链接,且会由于小程序的限制无法正常

    2024年02月16日
    浏览(62)
  • 微信小程序如何跳转H5页面

    1、登录微信公众后台,进入【开发-开发管理-业务域名】,点击修改。 2、首先请下载校验文件,并将文件放置在域名根目录下。 我是把文件放在nginx主机的data目录下,然后通过增加nginx.config配置,重启nginx后可以通过域名直接访问该校验文件;  nginx.config配置如下:  如何

    2024年02月11日
    浏览(62)
  • 如何在【微信小程序 】中的 webview 查看H5页面的console.log和调试H5页面?

    大家好我是 黑臂麒麟 ; 下面是开发微信小程序嵌入H5调试技巧: 问题: 在微信小程序页面中,web-view内嵌了另一个页面url,从小程序跳转到该H5页面的时候,无法看到该H5页面的控制台信息。那就没有办法了么?不,凭着锲而不舍的精神,在网络的海洋遨游许久。我查找到解

    2024年02月17日
    浏览(47)
  • 如何实现小程序与h5页面间的跳转

    接到新需求,要在小程序页面内点击按钮实现跳转h5,一开始没接触过,还挺头疼的,但真正做起来,也就那么一回事啦,废话少说,直接上 1. 配置域名 先登录小程序开发平台,将页面需要跳转的域名写上去,注意了,域名不是指服务器的域名,而是服务器下面的 业务域名

    2024年02月09日
    浏览(40)
  • html文件 监听唤起小程序后 页面弹窗关闭

    要在HTML文件中实现监听唤起小程序后关闭弹窗的功能,您可以使用JavaScript与小程序进行交互。以下是一个简单的示例代码: 在上述示例中,我们首先定义了一个带有id为\\\"popup\\\"的弹窗元素,并在弹窗中添加了一个关闭按钮。在JavaScript部分,通过监听We [Something went wrong, please

    2024年01月25日
    浏览(36)
  • 小程序开发实战案例五 | 小程序如何嵌入H5页面

    在接入小程序过程中会遇到需要将 H5 页面集成到小程序中情况,今天我们就来聊一聊怎么把 H5 页面塞到小程序中。   本篇文章将会从下面这几个方面来介绍: 小程序承载页面的前期准备 小程序如何承载 H5 小程序和 H5 页面如何通讯 小程序和 H5 页面的相互跳转   首先介绍下

    2024年01月19日
    浏览(49)
  • 微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转其他小程序如何操作?

     微信小程序appId查看方法: 1)有后台登录权限的情况下:登录微信公众平台后, 微信公众平台 微信公众平台,给个人、企业和组织提供业务服务与用户管理能力的全新服务平台。 https://mp.weixin.qq.com/ 点击右上角logo,在“帐号信息”中找到AppID(小程序ID) 2)没有后台登录权

    2024年02月11日
    浏览(81)
  • h5页面如何嵌到微信小程序中(chatgpt回答)

    将 H5 页面嵌入到微信小程序中需要进行以下步骤: 在微信公众平台申请认证并在其后台添加小程序 打开小程序的 app.json 文件,并配置 web-view 组件 在小程序的 wxml 文件中使用 web-view 标签引用 H5 页面。 发布小程序并测试。  问:H5页面的url只能写成https的形式吗? 答: 在微

    2024年02月15日
    浏览(59)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包