[移动开发]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>

至此，整个分享过程完结