当前位置:   article > 正文

H5--公众号页面如何唤起小程序_jweixin-1.6.0.js

jweixin-1.6.0.js

一、整体流程

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

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

先查看官方的文档需求:

一步到位「开发前必读文档」
在这里插入图片描述
一步到位「微信 SDK说明文档」
在这里插入图片描述

三、配置

1. 认证服务号;

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

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

这个需要在微信公众号后台配置,不要找错地方哦
在这里插入图片描述

3. 配置IP白名单

IP白单也是在公众号后台配置:进入公众号》设置与开发》安全中心》找到IP白名单区设置》
在这里插入图片描述

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

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

在这里插入图片描述

5. 引入微信jweixin-1.6.0.js

在这里插入图片描述

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

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

四、开发工作

main.js

Vue.config.ignoredElements = ["wx-open-launch-app"];
  • 1
<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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77

五、注意事项

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

六、参考文档

官方文档
H5跳转小程序成功案例

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/804476
推荐阅读
相关标签
  

闽ICP备14008679号