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

正式开发

引入

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

页面使用

单页面引入jssdk的使用：

main.js 全局引入的使用：

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
	}
}

页面使用

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>

至此，整个分享过程完结