首页 > 代码库 > 移动端html页面分享
移动端html页面分享
开发APP应用比开发移动端网页挑战小，因为APP应用只需要适配不同手机即可，而移动端网页不仅需要适配不同手机，还要适配同一部手机的不同浏览器。
移动端页面分享是一个常用的功能，需要宿主环境，可以是某APP应用，也可以是微信，还可以是浏览器。
如果html页面内嵌APP应用或者微信，想实现分享功能，需要在按钮元素上加代码，要么调用APP方法或协议，要么调用微信API；如果html页面直接在浏览器打开，网页前端不用额外做分享功能，因为浏览器自带分享。
站在网页前端的角度，下面具体介绍一下微信分享和APP分享及浏览器分享。
一、 微信分享
说明：移动端html页面嵌入微信，调用微信分享功能。
官方文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
1、封装js
require.async(‘/static/common/wxShare/jweixin-1.0.0.js‘, function() { wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId:wxParamObj.appId , // 必填，公众号的唯一标识 timestamp:wxParamObj.timestamp , // 必填，生成签名的时间戳 nonceStr:wxParamObj.nonceStr, // 必填，生成签名的随机串 signature:wxParamObj.signature,// 必填，签名 jsApiList: [ "onMenuShareAppMessage", "onMenuShareTimeline" ] // 必填，需要使用的JS接口列表 }); wx.ready(function(){ /** * config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后， * config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口， * 则须把相关接口放在ready函数中调用来确保正确执行。 */ // 分享到朋友圈 wx.onMenuShareTimeline({ title: wxParamObj.title ,//分享标题 link: wxParamObj.link, //分享链接 imgUrl: wxParamObj.imgUrl ,//分享图标 success: function () { // 用户确认分享后执行的回调函数 }, cancel: function () { // 用户取消分享后执行的回调函数 } }); //分享给朋友 wx.onMenuShareAppMessage({ title: wxParamObj.title, // 分享标题 desc: wxParamObj.desc, // 分享描述 link: wxParamObj.link, // 分享链接 imgUrl: wxParamObj.imgUrl, // 分享图标 type: ‘‘, // 分享类型,music、video或link，不填默认为link dataUrl: ‘‘,// 如果type是music或video，则要提供数据链接，默认为空 success: function () { // 用户确认分享后执行的回调函数 }, cancel: function () { // 用户取消分享后执行的回调函数 } }); });});
2、传参数
var wxParamObj = {//定义全局变量 debug: "<?php echo $debug;?>", appId: "<?php echo $appId;?>", timestamp: "<?php echo $timestamp;?>", nonceStr: "<?php echo $nonceStr;?>", signature: "<?php echo $signature;?>", title: "<?php echo $title;?>", desc: "<?php echo $desc;?>", link: "<?php echo $link;?>", imgUrl: "<?php echo $imgUrl;?>"}
分享的按钮是微信原生页面的元素，网页前端只管传参数，微信APP那边监听点击事件。
二、APP分享
说明：移动端html页面嵌入APP，调用APP原生的分享功能。
场景1：
分享的按钮是APP原生页面的元素。网页前端传参数调APP自定义的方法，APP前端监听点击事件，弹出分享框。html页面初始化时，下面的代码执行。
var wxParamObj = { title : title, // 分享标题 desc : content, // 分享描述 imgUrl: imgurl, // 分享图标 shareUrl: link // 分享链接};wxParamObjStr = JSON.stringify(wxParamObj);pahaofang.setRightItem(‘share‘, wxParamObjStr);
场景2：
分享的按钮是html页面的元素。网页前端监听点击事件，传参数，调APP方法。点击html元素时，下面的代码执行。（网页前端在click事件里面写如下代码）
Native.share(title, content, link, imgurl);
场景3：
分享的按钮是html页面的元素。网页前端监听点击事件，重定向到APP协议中。点击html元素时，下面的代码执行。（网页前端在click事件里面写如下代码）
<a href="javascript:void(0);" class="hft-share">分享</a>
var shareUrl = "haofangtuo://service/showSNSPad?desc=锄禾日当午\r\n信息信息信息内容内容内容！&" +"imgUrl=http://static.xxx.com/mmm.png&" +"shareUrl="+encodeURIComponent(link)+"&title=锄禾日当午\r\n信息信息信息内容内容内容";$(‘.hft-share‘).on(‘click‘, function(event) { location.href = shareUrl;});
三、浏览器分享
浏览器自带分享功能，移动端html页面不用额外做。
移动端html页面分享
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。