小程序嵌套 h5 并分享给朋友-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序嵌套 h5 并分享给朋友。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.先准备一个https地址，用于在微信公众平台/小程序中/开发管理/开发设置/业务域名中设置
小程序分享h5页面,小程序,vue.js,javascript 主要是后续要用到 web-view 组件

2.在小程序中设置跳转信息 task/index.vue
this.graceJS.navigate(“/pagesA/task/sharePage?path=yes&houseName=”+houseName+“&typeName=”+typeName)

?path=yes&houseName=“+houseName+”&typeName="+typeName 这个是我个人要传的值，可根据实际情况填写

3.在小程序中创建一个分享页面，task/sharePage.vue

export default {
	data() {
		return {
			web_src:'https:xxxxxxx',//这个是在小程序中配置的业务域名 <!-- 第一步 -->
			//下面参数是我需要传的值，用于分享标题 （动态）
			name: '', //登录人
			houseName: '', //站房名称
			typeName: '' //任务类型
		}
	},
	onLoad(options) {
		let that = this
		let type = uni.getStorageSync('taskType');
		let id = uni.getStorageSync('taskNodeId')
		let typeTaskId = uni.getStorageSync('taskAllType');
		that.name = this.$store.state.userInfo.name
		//从本程序页面点击过来的也是从卡片点击过来的参数
		if (options.houseName) { //从task/index页面传值过来的 站房名称  用于分享
			this.houseName = decodeURIComponent(options.houseName)
		}
		//从本程序页面点击过来的也是从卡片点击过来的参数
		if (options.typeName) { //从task/index页面传值过来的 任务类型  用于分享
			this.typeName = decodeURIComponent(options.typeName)
		}
		//从本程序页面点击过来的
		//因为我要传值 判断，所以对this.web_src 进行了拼接，不需要传值的直接用data里面的web_src
		if (options.path) { 
		this.web_src += '?id=' + id +'&houseName=' + this.houseName + '&typeName=' + this.typeName+ '&type=' + type + '&typeTaskId=' + typeTaskId+'&name='+this.name +'&erweilma=yes' 
		}

		//从卡片页面点击过来的 <!-- 第三步 -->
		//分享出去后，其他人点击分享的卡片，进入小程序页面
		if (options.name) { //decodeURIComponent 解码
			this.name = decodeURIComponent(options.name)
		}
		//从分享卡片 H5点击过来的 <!-- 第三步 -->
		if (options.shareUrl) { //decodeURIComponent 解码
			that.web_src = decodeURIComponent(options.shareUrl)+'&houseName=' + this.houseName + '&typeName=' + this.typeName+'&name='+this.name;
		}
		
	},
	/**
	 * 用户点击右上角分享 第二步 
	 */
	onShareAppMessage(options) {
		let that = this
		let return_url=this.web_src+'&erweilma=no'
		//分享出去的路径，当其他人从卡片点击进入时，就可以进入小程序pagesA/task/sharePage这个页面
		//'pagesA/task/sharePage?shareUrl=' + encodeURIComponent(return_url)这句与上方onload方法里面的if (options.shareUrl) {}对应
		var path = 'pagesA/task/sharePage?shareUrl=' + encodeURIComponent(return_url)+'&houseName=' + encodeURIComponent(this.houseName)+'&typeName='+ encodeURIComponent(this.typeName)+'&name='+encodeURIComponent(this.name) ; //此处加密，onload里面就要解密
		var titles = ''//动态title
		if (that.houseName != null && that.houseName != '' && that.houseName != 'null') {
			titles = that.name + '/' + that.houseName + '/' + that.typeName
		} else {
			titles = that.name + '/' + that.typeName
		}
		return {
			title: titles,
			path: path,
			success: function(res) {
				// 转发成功
				uni.showToast({
					title: "转发成功",
					icon: 'success',
					duration: 2000
				})
			},
			fail: function(res) {
				// 转发失败
			}
		}
	},
}

4.准备一个H5页面，放在服务器https：xxx里面

//因为我这次需要传参，所以H5里面的参数解析为
onLoad(option) {
			let that = this
			// 获取参数  必须这样获取 h5打包 后才有效  而且需相对路径 ./
			var url = window.location.search;
			// var url = 'https:/xxxx/?id=47&type=2&typeTaskId=1&erweilma=no'//为了本地测试
			var theRequest = new Object();
			if (url.indexOf("?") != -1) {
				var index = url.indexOf("?");
				var str = url.substr(index + 1, url.length); //04
				var strs = str.split("&");
				for (var i = 0; i < strs.length; i++) {
					theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
				}
			}
			that.ids=theRequest['id']
			that.typeTaskId=theRequest['typeTaskId']
			that.type=theRequest['type']
			that.erweilma=theRequest['erweilma']
		},

/此文章只是用于记录/文章来源地址https://www.toymoban.com/news/detail-542259.html

到了这里，关于小程序嵌套 h5 并分享给朋友的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！