移动端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页面不用额外做。