H5页面内嵌到微信小程序和APP，做分享操作

article/2025/11/9 16:18:49

前言

最近接到项目新需求，H5项目需要内嵌到微信小程序和APP里，然后将H5页面分享出去，被分享的人可以点击消息跳转到H5页面。H5页面不难，难的是要与微信小程序和APP进行交互，因为以前也没有接触过，所以这里卡的时间有点长。现分享出来

小程序内嵌H5页面

介绍

这里小编使用的是 uinapp 写的H5项目！！！
H5页面放入小程序中，需要使用小程序的一个组件 web-view
微信官方文档
官方文档中有详细介绍，H5页面主要需要的API为 相关接口1 在这里插入图片描述

准备工作

其中 wx.miniProgram.postMessage 这个API就是H5做分享功能的主要的接口，在使用它之前还要下载 JSSDK ，这个 JSSDK.js文件在官方文档中可以下载，然后放到你的项目中引入使用。
还可以使用 npm 下载：用 npm install weixin-js-sdk 或 npm install weixin-jsapi

正式开发

// 判断是否是微信环境
export function isWx() {return /MicroMessenger/i.test(window.navigator.userAgent)
}

引入

使用 npm 下载的，在项目的 main.js 文件中引入 jssdk ，这样就能在项目中全局使用：
在这里插入图片描述
官方文档中下载的，在需要使用 jssdk 的页面中引入使用：

页面使用

单页面引入jssdk的使用：

if(this.flagWeChat){ //判断是否为微信环境//提前发送消息给小程序，初始化分享参数let infoList = {type:"share",//H5消息的消息类型messageData:{shareTitle:"@你....！",//分享标题shareImageUrl: "",//分享截图(小程序可以截当前分享页面图，当然也可以使用传过去的图)sharePathUrl:"/pages/web-view/main",//分享小程序页面(如需要参数则此地址需要拼接，注意这里的参数有长度限制)}};wx.miniProgram.postMessage({data:infoList});//必须使用 {data:infoList} 格式
}else{console.log('分享时不在小程序里')
}
注意：这里的 infoList 里面所需参数名称皆为小程序那边的开发人员所规定的

main.js 全局引入的使用：

if(this.flagWeChat){ //判断是否为微信环境//提前发送消息给小程序，初始化分享参数let infoList = {type:"share",//H5消息的消息类型messageData:{shareTitle:"@你.....",//分享标题shareImageUrl: "",//分享截图sharePathUrl:"/pages/web-view/main", //分享小程序页面}};this.wx.miniProgram.postMessage({data:infoList})
}else{console.log('分享时不在小程序里')
}
注意：h5能做的就是发送这一条消息给小程序，具体的分享还是要通过小程序头部自带的3个点

ps：这里的分享主要是小程序分享给微信好友的分享，发送给微信好友时会以消息卡片的形式分享出去。

APP内嵌H5页面

介绍

在 APP 里内嵌H5页面，h5页面需要使用app定义的方法，首先需要app开发者把h5需要使用的方法公开到 window 中，这样h5才能使用。有的是需要引入js文件或是其他东西，这需要与app开发者协商。

正式开发

// 判断当前运行环境 ios，安卓
export function myProgramEnv() {if(/Android/i.test(window.navigator.userAgent)) {return 'android'}if(/ipad|iphone/i.test(window.navigator.userAgent)) {return 'ios'}
}

页面使用

let shareInfo = {shareScene:"friends", //分享场景，friends代表微信好友shareType:"miniProgram",//消息类型，miniProgram代表分享小程序title:"@你.....",//分享标题desc:"....",//分享描述imageData: "",//图片地址link:"",//分享小程序页面，此地址需要拼接，如：/pages/web-view/main?webViewData={linkUrl="xxxxx",isLoginNeeded=true,navigationTitle="xxxxxx"},其中 "linkUrl":"xxxxxx",//分享H5链接;"isLoginNeeded":false,//是否需要账号信息"navigationTitle","xxxx",目标页面标题,可不传webPageUrl:""//网页地址，值与linkUrl值相同，主要用于兼容
}
// wechatShare是app提供的方法，我们只要在需要的地方调用就好
if(this.flagSystemAPP == "android"){try {						// 安卓//MoveCallNative 为安卓开发人员规定的名称，如若未特别规定则使用 window.android......window.MoveCallNative.wechatShare(JSON.stringify(shareInfo))} catch (e) {console.log('android分享错误--',e)}
}else if(this.flagSystemAPP == "ios"){ //iostry {					// ioswindow.webkit.messageHandlers.wechatShare.postMessage(JSON.stringify(shareInfo)						);} catch (e) {console.log('ios分享错误--',e)}
}
注意：这里的 shareInfo 里所需参数名称皆为APP开发人员所规定传参数时必须是字符串 JSON.stringify(shareInfo)

ps：这个分享也是分享给微信好友的分享，分享给好友时是以链接的形式分享的

H5页面

介绍

分享出去的链接或卡片最终还是会回到H5页面，所以在H5页面需要接受参数，做出相应的操作

正式开发

在 App.vue 页面接收参数，分割参数和目标页面路径

<script>export default {globalData:{  // 存放全局数据familyDetail: {}, // 当前登录人的家庭数据initPage: null, // 第一次进入页面的页面pathmbrid: null, // 去获取用户信息的参数 },/* 程序初始化逻辑 1、获取用户初始化进入的相关数据，包括mid（用户身份标识），存储到全局变量2、判断本地有没有token，有就去对应的页面，没有则拦截到授权页面3、拦截前，保存第一次进入的页面地址，用于获取token后，去到该页面*/onLaunch: function(option) {console.log('App.vue初始化数据option---', option)		if(window.location.search){ //获取链接里的参数let parameter = window.location.search.split('mbrid=')[1].split('#')[0];console.log('App.vue初始化数据mbrid---', parameter);getApp().globalData.mbrid = parameter;  // 存储授权数据}else{console.log('路径未带参数---')}getApp().globalData.initPage = window.location.hash.substr(1); //获取链接里的页面路径uni.reLaunch({url: '/pages/auth/auth'}); //跳转到授权页面return},onShow: function() {},onHide: function() {},methods: {}}
</script>

授权页面：授权和跳转到目标页面

<script>/* auth页面，只做授权使用，去获取token*/import { http_getWeChatLogin } from '@/common/api/index.js'import { cache_set_token } from 'common/utils/cache.js'import { ENV } from 'common/utils/constant.js'export default{data() {return {}},onLoad(option) {console.log('auth.vue初始数据:getApp().globalData---：',getApp().globalData)if(['AY_DEV'].includes(ENV)) { //判断是否为正式环境this.handleGetToken('1');} else {this.handleGetToken(getApp().globalData.mbrid);//app.vue里截获的参数}},methods:{async handleGetToken(mbrid) {if(!mbrid) {console.log('mbrid没有----')uni.showToast({title: '非法闯入',icon: 'none'})return}const { code, data, msg } = await http_getWeChatLogin({ mbrId: mbrid }); //请求接口获取tokeif(code == 200) {const { accessToken } = datacache_set_token(accessToken) //存储tokegetApp().globalData.familyDetail = data; //存储家庭信息if(getApp().globalData.initPage.indexOf('pages/auth/auth') > -1) { //判断是否为开发打开页面uni.reLaunch({url: '/pages/client_side/activity/activity' }); //跳转到首页} else {uni.reLaunch({url: getApp().globalData.initPage }); //跳转到app.vue里截获的路径}} else {uni.showToast({title: msg,icon: 'none'})}} }}
</script>