这是一起非常绕闹的需求,虽说不难 ,但是一堆坑啊,我每天都在跳坑,本来这篇文章就只讲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跳转到微信小程序得代码
这些都是需要发布到线上才能测试成功得