前言
最近接到项目新需求，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"){ //ios
try {
// ios
window.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, // 第一次进入页面的页面path
mbrid: 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>
授权页面：授权和跳转到目标页面文章来源：https://www.toymoban.com/news/detail-463940.html
<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 }); //请求接口获取toke
if(code == 200) {
const { accessToken } = data
cache_set_token(accessToken) //存储toke
getApp().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>
至此，整个分享过程完结文章来源地址https://www.toymoban.com/news/detail-463940.html
到了这里，关于H5页面内嵌到微信小程序和APP，做分享操作的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
