APP具有分享功能吗

Question

如题所述

Answer 1

话说App一般都带有分享到社交平台的入口，web网页的分享也有很不错的框架，但是随着HTML5的不断发展，手机web页面越来越多的进入到我们的生活中，那如何在我们的手机上完成分享呢？话说各大分享平台都有针对Android、Ios的SDK，作为开发者，我们只需要将SDK集成的我们的项目中即可，通过提供的外部接口，我们可以很容易的完成分享的功能；web网页呢，网上也存在很多优秀的分享框架，例如：bShare分享 、JiaThis分享；我们可以很方便的集成到我们的项目中；但是手机web页面实现分享就需要我们下点功夫了，以为这个时候，我们就可以通过调用用户安装的客户端进行分享，这里需要特别提到的就是微信分享了，网页端我们分享时，一般都是弹出一个分享的二维码，我们使用微信App扫描然后进行分享，手机端我们就不能这样操作了，我们需要当用户选中微信分享时，直接打开App进行分享，这里就要吐槽一下微信的分享JS SDK了，初次接触到这个东东时，还以为只要完成操作就可以实现自定义分享了，随着各种坑不断，最后发现，微信JS SDK仅仅只是将我们的自定义内容临时缓存，当我们需要分享时，还是需要通过微信右上角的按钮来完成操作的。好嘞，不多讲废话了，进入今天的主题，接下来我将按照通过超链接完成新浪、QQ、QQ空间、腾讯微博分享，然后为大家奉上基于C#平台的微信JS SDK分享组件的签名逻辑，最后带领大家完成手机web端分享。 　　进入第一点：通过超链接完成分享 　　对于常用的社交平台我们基本可以通过超链接的方式进行内容分享，当然微信除外，微信不支持这种分享方式，这种分享方式可以便于我们自定义分享，并且使用起来非常的方便。 function shareSina() { //分享到新浪微博 var sharesinastring = 'service/share/share/cgi-bin/qzshare/cgi_qzshare_onekey?title=' + $("#title")/widget/shareqq/index/share/share/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi 　　获得jsapi_ticket之后，就可以生成JS-SDK权限验证的签名了。 　　第三步生成JS-SDK权限验证的签名 　　签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分） 。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。 注意事项 　　1/cgi-bin/token?grant_type=client_credential&appid=" + APPID + "&secret=" + SECRECT, 5000); StreamReader reader = new StreamReader(response/cgi-bin/ticket/getticket?access_token=" + accessToken.access_token + "&type=jsapi", 5000); reader = new StreamReader(response.GetResponseStream()); sb = new StringBuilder(); while ((line = reader.ReadLine()) != null) { sb.Append(line.ToString()); } accessToken = js.Deserialize<WXInfo>(sb.ToString()); return accessToken; } /// <summary> /// 创建GET方式的HTTP请求 /// </summary> /// <param name="url">请求的URL</param> /// <param name="timeout">请求的超时时间</param> /// <param name="userAgent">请求的客户端浏览器信息，可以为空</param> /// <param name="cookies">随同HTTP请求发送的Cookie信息，如果不需要身份验证可以为空</param> /// <returns></returns> public static HttpWebResponse CreateGetHttpResponse(string url, int? timeout, string userAgent=null, CookieCollection cookies=null) { if (string.IsNullOrEmpty(url)) { throw new ArgumentNullException("url"); } HttpWebRequest request = WebRequest.Create(url) as HttpWebRequest; request.Method = "GET"; if (!string.IsNullOrEmpty(userAgent)) { request.UserAgent = userAgent; } if (timeout.HasValue) { request.Timeout = timeout.Value; } if (cookies != null) { request.CookieContainer = new CookieContainer(); request.CookieContainer.Add(cookies); } return request.GetResponse() as HttpWebResponse; } } } 　　用于存放Token信息的全局对象WXInfo.cs namespace ManYiAbyWAP.Models { /// <summary> /// 微信获取Token返回参数类 /// </summary> public class WXInfo { public string APPID { get; set; } public string access_token { get; set; }//access_token public string expires_in { get; set; }//Token过期时间,7200秒内有效 public string ticket { get; set; }//jsapi_ticket public string errmsg { get; set; } public int errcode { get; set; } public string noncestr { get; set; }//生成签名的随机串 public string timestamp { get; set; }//生成签名的时间戳 public string signature { get; set; }//签名返回值 } } 　　网页端进行初始化的JS代码： //微信JS SDK请求状态 var requestStatus = 0; function shareWX() { if (requestStatus != 1) { requestStatus = 1;//正在请求 var ajaxPara = "url=" + encodeURIComponent(window.location.href.split('#')[0]); $.ajax({ url: '/WXMessage/GetToken', dataType: 'json', data: ajaxPara, success: function (json) { if (undefined != json && json !== "") { var jsonObjs = eval(json); wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: jsonObjs.APPID, // 必填，公众号的唯一标识 timestamp: jsonObjs.timestamp, // 必填，生成签名的时间戳 nonceStr: jsonObjs.noncestr, // 必填，生成签名的随机串 signature: jsonObjs.signature,// 必填，签名，见附录1 jsApiList: [ 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone' ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 }); wx.ready(function () { //alert("微信验证成功"); // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。 wx.checkJsApi({ jsApiList: [ 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone' ], // 需要检测的JS接口列表，所有JS接口列表见附录2, success: function (res) { // 以键值对的形式返回，可用的api值true，不可用为false // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"} } }); wx.onMenuShareWeibo({ title: '满艺网分享测试', // 分享标题 desc: '满艺网分享描述测试', // 分享描述 link: '', // 分享链接 imgUrl: '/img/logo_2.jpg', // 分享图标 success: function () { // 用户确认分享后执行的回调函数 alert("分享成功"); }, cancel: function () { // 用户取消分享后执行的回调函数 alert("分享取消"); } }); }); wx.error(function (res) { //alert("微信验证失败 res:"+res); // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。 }); requestStatus = 2;//请求完成 } }, complete: function () { window.setTimeout(function () { requestStatus = 2;//请求完成 }, 300); } }); } 　　到这里关于微信分享JS SDK的使用就为大家介绍完毕，大家可以结合自己的需求进行参考。一开始已经为大家介绍了，微信提供的分享JS SDK仅仅只是一个对于微信内部浏览器的缓存处理，真正的分享还是需要我们点击右上角的分享按钮。　 　上面这些都不是太完美的手机web分享解决方法，最后给大家介绍一些Sosh社会化分享组件，当我看到这个组件时，我就知道这是我需要的，简洁的界面，整好可以让我们的网站看起来典雅舒服。好了，废话不多说，进入主题： 以上所述是小编给大家介绍的手机Web APP如何实现分享多平台功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！