Html5页面打包为webAPP分享微信

最新推荐文章于 2025-04-10 16:17:25 发布

weixin_43749992

最新推荐文章于 2025-04-10 16:17:25 发布

阅读量486

点赞数

文章标签： html5 jquery

本文链接：https://blog.youkuaiyun.com/weixin_43749992/article/details/117665652

版权

本文指导如何使用HBuilderX将HTML5页面打包为WebAPP，并通过微信开放平台实现分享，包括获取APPID、配置分享功能，以及注意事项和解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Html5页面打包为webAPP分享微信

- 微信开放平台创建应用

微信开放平台创建应用

在这里插入图片描述
获取到APPID填写到打包工具中，我这里使用的hbuilderx 在模块配置输入对应的APPID

使用hbuilderx的原生分享就可以实现了，代码如下：

<html>
<head>
	<meta charset="utf-8">
	<title>Hello MUI</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!--标准mui.css-->
	<link rel="stylesheet" href="{#$templets_skin#}css/mui.min.css">
	<link rel="stylesheet" href="{#$templets_skin#}css/mui.css" />
	<!--App自定义的css-->
	<style type="text/css">
		.share {
			float: right;
		}
		.tip-title {
			font-size: 20px;
			color: blue;
			padding-left: 10px;
		}
		.content {
			padding-top: 5px;
			padding-bottom: 10px;
			padding-left: 10px;
		}
		.content span {
			color: red;
		}
	</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<a class="share mui-icon mui-icon-redo" onclick="shareHref()"></a>
	<h1 class="mui-title">第三方分享</h1>
</header>
<div class="mui-content">
	<span class="tip-title">分享平台:</span><br>
	<div class="content">
		1.微信分享:微信好友/微信朋友圈 <br>
		2.QQ分享 <br>
		3.新浪微博分享 <br>
	</div>
	<span class="tip-title">注意事项:</span><br>
	<div class="content">
                <span>
                    微信分享图片大小不能超过32kb限制 <br>
                </span>
	</div>
	<span class="tip-title">解决办法:</span><br>
	<div class="content">
		1.把分享的图片的url转换成图片对象image; <br>
		2.把生成的图片对象image压缩后上传服务器返回新的图片的url; <br>
		3.分享图片地址使用压缩上传后从服务器获取的url; <br>
		或者：<br>
		第一次服务器返回的图片的体积就是32kb以下的. <br>
	</div>
</div>
</body>
<script src="{#$templets_skin#}js/mui.min.js"></script>
<script>

	mui.init({
		swipeBack:true //启用右滑关闭功能
	});

	var Intent = null,
			File = null,
			Uri = null,
			main = null;
	var shares = null;
	var shareImageUrl = '';
	mui.plusReady(function() {
		updateSerivces();
		if (plus.os.name == "Android") {
			Intent = plus.android.importClass("android.content.Intent");
			File = plus.android.importClass("java.io.File");
			Uri = plus.android.importClass("android.net.Uri");
			main = plus.android.runtimeMainActivity();
		}
	})
	/**
	 * 更新分享服务
	 */
	function updateSerivces() {
		plus.share.getServices(function(s) {
			shares = {};
			for (var i in s) {
				var t = s[i];
				shares[t.id] = t;
			}
			outSet("获取分享服务列表成功");
		}, function(e) {
			outSet("获取分享服务列表失败：" + e.message);
		});
	}
	/**
	 * 分享操作
	 */
	function shareAction(id, ex) {
		var s = null;
		if (!id || !(s = shares[id])) {
			outLine("无效的分享服务！");
			return;
		}
		if (s.authenticated) {
			outSet("---已授权---");
			shareMessage(s, ex);
		} else {
			outSet("---未授权---");
			s.authorize(function() {
				shareMessage(s, ex);
			}, function(e) {
				outLine("认证授权失败");
			});
		}
	}
	/**
	 * 发送分享消息
	 */
	function shareMessage(s, ex) {
		var msg = {
			content: '分享-详情',
			href: 'http://blog.youkuaiyun.com/zhuming3834',
			title: 'HGDQ-分享测试-title',
			content: 'HGDQ-分享测试-content',
			thumbs: ['http://img3.3lian.com/2013/v10/4/87.jpg'],
			pictures: ['http://img3.3lian.com/2013/v10/4/87.jpg'],
			extra: {
				scene: ex
			}
		};
		s.send(msg, function() {
			outLine("分享成功!");
		}, function(e) {
			outLine("分享失败!");
		});
	}
	/**
	 * 分享按钮点击事件
	 */
	function shareHref() {
		var ids = [{
					id: "weixin",
					ex: "WXSceneSession"  /*微信好友*/
				}, {
					id: "weixin",
					ex: "WXSceneTimeline" /*微信朋友圈*/
				}, {
					id: "qq"   /*QQ好友*/
				}, {
					id: "tencentweibo"   /*腾讯微博*/
				},{
					id: "sinaweibo"  /*新浪微博*/
				}],
				bts = [{
					title: "发送给微信好友"
				}, {
					title: "分享到微信朋友圈"
				}, {
					title: "分享到QQ"
				}, {
					title: "分享到腾讯微博"
				}, {
					title: "分享到新浪微博"
				}];
		plus.nativeUI.actionSheet({
					cancel: "取消",
					buttons: bts
				},
				function(e) {
					var i = e.index;
					if (i > 0) {
						shareAction(ids[i - 1].id, ids[i - 1].ex);
					}
				}
		);
	}
	// 控制台输出日志
	function outSet(msg) {
		console.log(msg);
	}
	// 界面弹出吐司提示
	function outLine(msg) {
		mui.toast(msg);
	}
</script>
</html>