span require 常用 show text 操作 menu 用户
开发 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、传参数
- varwxParamObj = {//定义全局变量debug: "",
- appId: "",
- timestamp: "",
- nonceStr: "",
- signature: "",
- title: "",
- desc: "",
- link: "",
- 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>
- varshareUrl = "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 页面分享
来源: http://www.bubuko.com/infodetail-2147274.html