vue3 h5跳转到小程序，h5分享微信自定义标题和图标_vue3 h5公众号分享

这是一起非常绕闹的需求，虽说不难 ，但是一堆坑啊，我每天都在跳坑，本来这篇文章就只讲h5跳转小程序的，但是分享都一起了，那就一起讲了吧，话不多说，先上笔记

第一步：

我们先看一下官网，先去了解一下大致流程 流程都不知道 直接看笔记 看了你也一脸懵逼

微信网页官网：概述 | 微信开放文档

大部分都是配置公众号 然后你传一个当前页面的路径给后端接口 后端返回签名的一些给你         这个自己按着流程来

第二部：

  这里我就直接上代码了 因为我用的是vue3，所有我这就按照vue3流程来了。

以下用其中一个就好了  看个人喜好
npm i weixin-js-sdk   //方法1  安装微信sdk
yarn add weixin-js-sdk //方法2 安装微信sdk 

安装好之后 在需要的页面中 引入weixin-js-sdk   别人都封装了文件 我在这就不封装了 直接在需要的文件中使用 没问题了 自己再去封装

比如你需要在a.vue的文件中使用  那你就在a.vue的文件中引入

// a.vue文件
<template>
  <div class="px-3"> 你好 </div>
</template>
  
<script setup>
    import wx from "weixin-js-sdk";
</script>
  
<style  scoped></style>

第三部：

 引入文件后 我们就要 我们就开始写h5分享和跳转的代码了

  1.请求后端接口获取appId、timestamp、nonceStr、signature等

  2.配置微信sdk需要的方法和组件updateAppMessageShareData、updateTimelineShareData、      wx-open-launch-weapp

   

// a.vue文件
<template>
  <div class="px-3"> 你好 </div>
</template>
  
<script setup>
    import wx from "weixin-js-sdk";
    const wxAppletData = ref({})//保存数据后端返回的数据
    const getSign = async () => {
      let href = encodeURIComponent(location.href.split("#")[0]);
      let { data } = await getShareSignNewApi({ url: href });//这是我封装的请求接口方法 你们自己用自己封装的请求就好了
      wxAppletData.value = data.value
      getConfig(data.value);//调用小程序sdk的方法
    };
 
    //这里我延迟了执行 不然在h5中就没反应 估计是我项目太大了 跑起来有点慢
    setTimeout(() => {
      getSign();
    }, 30);
   
    const getConfig = (data) => {
      wx.config({
        debug: false, //生产环境需要关闭debug模式  测试环境下可以设置为true 可以在开发者工具中查看问题
        appId: data.appId, //appId通过微信服务号后台查看
        timestamp: data.timestamp, //生成签名的时间戳
        nonceStr: data.nonceStr, //生成签名的随机字符串
        signature: data.signature, //签名
        jsApiList: [
          "updateAppMessageShareData", //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0） 新接口
          "updateTimelineShareData", //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
        ],
        openTagList: ['wx-open-launch-weapp', 'wx-open-launch-app'],
      });
    };   
</script>
  
<style  scoped></style>

第四部：

我们就开始配置跳转小程序和分享了  

1.wx-open-launch-weapp组件得属性讲解：

        appid="要跳转得小程序appid"

        username="要跳转得小程序原始得id"

        path="要跳转得小程序页面路径"

// a.vue文件
<template>
  <div class="px-3"> 你好 </div>
  <div class="px-3"> 
  <wx-open-launch-weapp id="launch-btn" :appid="wxkahsfhsdkhfsi" :username="g_asjdaodhs" :path="/index/index.html" style="z-index: 99; position: absolute; top: 0; left: 0; width: 100%; height: 100%">
      <div v-is="'script'" type="text/wxtag-template" style="display:block;height:170px;width: 100%;z-index: 99;">
         <div style="height: 170px;width: 100%;z-index: 99;">点击跳转小程序</div>
      </div>
   </wx-open-launch-weapp>
  </div>
 
</template>
  
<script setup>
    import wx from "weixin-js-sdk";
    const wxAppletData = ref({})//保存数据后端返回的数据
    const getSign = async () => {
      let href = encodeURIComponent(location.href.split("#")[0]);
      let { data } = await getShareSignNewApi({ url: href });//这是我封装的请求接口方法 你们自己用自己封装的请求就好了
      wxAppletData.value = data.value
      getConfig(data.value);//调用小程序sdk的方法
    };
 
    //这里我延迟了执行 不然在h5中就没反应 估计是我项目太大了 跑起来有点慢
    setTimeout(() => {
      getSign();
    }, 30);
 
    const shareData = ref({
      title: '分享标题',    // 分享标题
      imgUrl: '分享显示得图标',  // 分享图标
      link: '分享页面得路径', // 分享链接
    });
 
    const getConfig = (data) => {
      wx.config({
        debug: false, //生产环境需要关闭debug模式  测试环境下可以设置为true 可以在开发者工具中查看问题
        appId: data.appId, //appId通过微信服务号后台查看
        timestamp: data.timestamp, //生成签名的时间戳
        nonceStr: data.nonceStr, //生成签名的随机字符串
        signature: data.signature, //签名
        jsApiList: [
          "updateAppMessageShareData", //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0） 新接口
          "updateTimelineShareData", //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
        ],
        openTagList: ['wx-open-launch-weapp', 'wx-open-launch-app'],
      });
 
      wx.ready(function () {
        wx.updateAppMessageShareData({
          ...shareData.value,
          desc: props.data.description, // 分享描述
          success: function (res) { },
        });
        wx.updateTimelineShareData({
          ...shareData.value,
          success: function (res) { },
        });
      });
      wx.error(function (res) {
        console.log(JSON.stringify(res), "调用失败原因");
      });
    };
        
</script>
  
<style  scoped></style>
   

以上就是配置h5自定义分享 和 h5跳转到微信小程序得代码

这些都是需要发布到线上才能测试成功得