HBuilder webApp开发(七)微信/QQ/新浪/腾讯微博分享
HBuilder是支持微信分享(好友和朋友圈),QQ分享,新浪微博和腾讯微博分享。
但是在使用的过程中,官方给的文档似乎很坑爹。
《分享插件配置》
《分享插件开发指南》
都是2014年7月发表的文档,后期也没看见更新说明;有用户过来提问,就都给引导去看这两篇文档,真不知道有什么好看的。
在公司的项目中,实际也使用了分享。昨天下班回去就重新写了一下代码,弄到半夜12点多。
HBuilder的配置
配置权限
双加manifest.json文件,我们需要先配置权限(默认是有分享权限的)所以我们只需要再看看核实一下。
配置相关的appkey
打开manifest.json的SDK配置视图。
这些appkey我们可以在其他第三方平台上面获取做测试。例如ShareSDK。实际项目中需要实际自己公司的。再勾选对应的平台。查看代码视图
代码视图里面我们只需要看看有这些东西就可以了。不需要修改。
基本界面和工作流程
- 界面
界面里面我已经把存在的问题和解决方案都列出来了。 - 工作流程
点击右上角的分享按钮,弹出分享视图,选择相应的平台,然后就会跳转到对应的平台,分享成功之后就会返回我们的应用,原生应用也是这样的流程。但是在HBuilder里面多了一个更新分享服务,也许就相当无原生里面的注册吧。详细可以看看下面的代码。
代码
代码部分注释都有了,使用流程也会更加清晰。
<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="../css/mui.min.css"><link rel="stylesheet" href="../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="../js/mui.min.js"></script><script src="../js/mui.zoom.js"> </script><script src="../js/mui.previewimage.js"></script><script src="../js/tools.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.csdn.net/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>
实际使用过程中只需要这么操作就可以了。
遇见的坑
前天晚上在做原生的iOS时,测试给提了一个bug,有的地方可以调起微信分享,有的不行。以前是出现过这关问题,后来其他同事解决了。前天我就有看了一下之前同事的代码,发现了里面的坑。
之前他们的图片压缩是使用的:
UIImageJPEGRepresentation(图片对象,压缩系数)
// 项目里面压缩系数固定是0.01
使用这个方法做的,之前解决了问题。然后前天在分析中发现这个方法有时会把图片越压缩体积越大。比如图片体积只有37kb,压缩之后可能会有58kb左右,但是对于500+kb的图片,压缩之后的图片体积可以达到32kb以下。(万恶的微信,万恶的32kb限制)。
最后分析了一下分享的图片是在那里使用的
左边的小图,才是分享出去的。
想想之前自己做二维码(《CoreImage原生二维码生成(一)》)的时候,使用过的方法。
我的解决办法是,直接把调用上面UIImageJPEGRepresentation压缩之后的图片再压缩成制定尺寸的图片,然后分享。
/*** 大图片压缩成制定尺寸的图片** @param img 需要压缩的图片* @param size 目标尺寸** @return 压缩后的图片*/
+ (UIImage *)scaleTosize:(UIImage *)img size:(CGSize)size{// 创建一个bitmap的context// 并把它设置成为当前正在使用的contextUIGraphicsBeginImageContext(size);[img drawInRect:CGRectMake(0, 0, size.width, size.height)];UIImage *scaledImage = UIGraphicsGetImageFromCurrentImageContext();return scaledImage;
}
在上面的二维码生成中我使用的方法大家可以查看之前的博客。
然而在HBuilder里面分享的图片的url,即使通过url获取的图片最终超过32kb也不能使用微信分享。
解决办法就是:
1.把分享的图片的url转换成图片对象image;
2.把生成的图片对象image压缩后上传服务器返回新的图片的url;
3.分享图片地址使用压缩上传后从服务器获取的url;
或者:
第一次服务器返回的图片的体积就是32kb以下的。
这个微信分享图片32kb的限制,昨晚坑了我一下,最后在HBuilder官网去找答案,最后无果。后来想想,前天刚刚解决了这个问题,问题,问题是微信对从苹果手机端分享出去图片大小的限制,实际在安卓机器上面是没限制的。
最后
关于效果图,大家可以去我的github下载查看,CSDN上传图片不能超过2M.
代码下载地址:请点击我!
更新日志:
2016.07.12
应CSDN网友u012155655 要求,增加腾讯微博分享,github代码已更新。
HBuilder webApp开发(七)微信/QQ/新浪/腾讯微博分享相关推荐
- 新浪腾讯微博互刷互粉工具-网页版
其实早些年,应该算是前年吧.就已经注册了新浪微博,然后腾讯微博出来了就又注册了腾讯微博,不过,推特还真没注册过,当我知道的时候就已经需要爬墙了,人矮,懒得爬了! 那时候,腾讯我记得我发过好几期的邀请码 ...
- HTML制作分享到QQ空间,微信,新浪等效果
HTML制作分享到QQ空间,微信,新浪等效果 分享保存一个简单的HTML制作分享到QQ空间,微信,新浪等效果,分享一个比较简单的方法,只需套用代码便可完成 1.首先打开http://www.jiath ...
- 微信,新浪登录分享遇到的问题
问题一: 项目要集成微信,新浪第三登录分享功能,通过shardsdk,首先获取sharesdk appkey 获取微信,微博appkey appsecret 配置签名文件,等等 然后发现微信授权页面是 ...
- HBuilder webApp开发(十三)二维码扫描
好久没有写<HBuilder webApp App开发>这个专栏了.这周的这两天暂时比骄没事,就对着官方文档barcode写了这个二维码扫描的Demo. 以前做原生开发的时候,关于二维码扫 ...
- 天气预报js调用代码(QQ,新浪,265)
天气预报js调用代码(qq,新浪,265) 本文章提供四款不同的调用天气预报的天气代码,包括我们可以调用中国气象台的天气预报,qq天气,新浪天气,265天气等方法啊.都非常方便等. 中国气象台 < ...
- 新浪押宝微博拖累利润 开支增长近2730万美元
新浪押宝微博拖累利润 开支增长近2730万美元 新浪(SINA.NASDAQ)仍然在加大对微博的投入.由于来自于微博有关的营销和人力相关开支增加,二季度运营开支同比增加近2730万美元,环比增长近一倍 ...
- 新浪能让微博变成一家移动公司吗?
关于新浪微博架构调整,新浪无线事业部并入微博,以及阿里巴巴(甚至可能还有百度)入股新浪微博的两个传闻,在我看来最后都可能归到一个问题上:新浪敢让微博变成一家移动公司(或至少,是移动为先Mobile F ...
- 分享到新浪/腾讯/人人等
我们经常会有分享到大网站的需求来满足用户吸引.常用的有分享到新浪/腾讯/人人网等.那么如何实现这些分享呢?今天就来探究一下,,首先了解一下第三方登录. 1.常用的第三方登陆 我们想要在自己的网站上提供 ...
- HQChart实战教程41 -新浪+腾讯A股数据源对接 - uniapp版本 (源码付费)
HQChart实战教程41 -新浪+腾讯A股数据源对接 - uniapp版本 数据源 支持周期 平台支持 demo安卓apk下载 源码售价 580元 效果截图 HQChart代码地址 数据源 使用公开 ...
最新文章
- remote: HTTP Basic: Access denied
- 数据库操作(使用FMDB)
- 生物学将是下一代计算平台:DNA是代码,CRISPR是编程语言
- linux c openssl rsa 加解密
- Activity和ListActivity的区别
- 软件工程实践2017第二次作业
- sql查询无结果返回空_3分钟短文 | Laravel 查询结果检查是不是空,5个方法你别用错...
- 排序函数(sort()、sorted()、argsort()函数)
- IP-GUARD内网安全监管系统
- python实现发送免费短信功能
- 究竟 javascript 错误处理有哪些类型?
- lesson 4 Show Messages in Messagebox
- Java程序员从笨鸟到菜鸟之(五十)细谈Hibernate(一)hibernate基本概念和体系结构...
- spring中的@Bean是否一定要与@Configuration一起用
- java未_Java未被捕获的异常
- 面试宝典-Java反射机制
- 漫游配置文件修改为强制配置文件|ntuser.dat ntuser.man
- 免费的SQL Server监控工具
- Inrie(洪晓军)
- igraph基本用法
热门文章
- 域名被墙查询以及免备301解决办法/DNS污染解决
- IPC/NVR通过GB28181协议接入EasyCVR平台通道显示为0排查及处理
- PHP基础之一揽子方案
- win10系统下避坑顺利安装superset
- hmi触摸屏将数据存入sd卡_如何将HMI数据记录保存至单个文件?
- Windows窗体应用c#制作屏保
- 太吾绘卷加载卡54_太吾绘卷保存卡死应对方案_无法保存解决方法一览_可可网...
- 4、福尔摩斯到某古堡探险
- 常见的U盘数据丢失问题及U盘数据恢复教程?
- 登陆QQ手机版,免费拿精品靓号