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 

正式开发

// 判断是否是微信环境exportfunctionisWx(){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，安卓exportfunctionmyProgramEnv(){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)}}elseif(this.flagSystemAPP =="ios"){//iostry{// 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>exportdefault{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'exportdefault{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:{asynchandleGetToken(mbrid){if(!mbrid){
                    console.log('mbrid没有----')
                    uni.showToast({title:'非法闯入',icon:'none'})return}const{ code, data, msg }=awaithttp_getWeChatLogin({mbrId: mbrid });//请求接口获取tokeif(code ==200){const{ accessToken }= data
                    cache_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>

至此，整个分享过程完结