h5页面能跳转到某个小程序么（H5页面内嵌到微信小程序和APP，做分享操作）
前言
最近接到项目新需求 ，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>授权页面：授权和跳转到目标页面
<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>至此 ，整个分享过程完结
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！