微信，微博，QQ共享开发教程

本文介绍了如何使用x5提供的cordova插件在微博，微信和QQ上共享.

x5中提供了两种类型的共享插件，一种是针对特定客户端（如微信，QQ和微博）的共享插件，另一种是常规共享功能. 另一篇文章: <社交共享开发教程>（social-share /）；本文介绍了使用第一个插件的教程.

注意: 在wex53.4版本中，还有另一种方法来实现微信和qq的共享功能，即借助于一组本地API（即“ JS-API”）来实现.

我们在x5中为微博，微信和QQ提供了三个插件. 这三个插件已经提供了共享接口. 我们只需要根据插件相关文档配置相关参数，导入插件，编写相应的js代码，并调用相应的接口即可实现共享功能，极大地简化了开发人员的开发过程. 以下是详细的演示:

由于这三个插件已连接到微博，微信和QQ的SDK，因此我们需要在相应的开发平台上注册开发者帐户才能成为开发者并申请相应的appID（对应于不同的访问平台）参数名称略有不同），以便我们开发的应用程序可以通过授权验证！对于测试过程，您可以在插件中使用默认参数（wex5综合演示案例默认配备了相关参数）. 如果需要发布，建议去腾讯（微博，微信）开放平台申请个人开发者帐号，并按照Access流程申请aey和其他相关参数！

qq aey和appId应用程序如下所示:

登录到腾讯开放平台并注册为开发人员，然后访问该应用程序以获取所需的appId和aey.

微信appId和appSecret的应用如下所示:

登录到微信开放平台，然后注册为开发人员，然后访问移动应用程序以获取所需的appId和appSecret.

微博的aey和appId应用程序如图所示:

登录到新浪微博开放平台，注册为开发人员，访问移动应用程序，然后您可以在我的应用程序的基本信息中看到所需的aey和appId.

将插件导入需要实现共享功能接口的js文件中，然后根据该插件的规范编写js代码，并调用相关接口.

/**
  导入相关插件
**/
    require("cordova!com.justep.cordova.plugin.qq");
	require("cordova!com.justep.cordova.plugin.weibo");
	require("cordova!com.justep.cordova.plugin.weixin.v3");
 

/**
  调用相关接口，实现分享功能
**/
    Model.prototype.weiboClick = function(event) {
		function success(result) {
			alert(JSON.stringify(result));
		}
		function error(result) {
			alert(JSON.stringify(result));
		}
		navigator.Weibo.shareToWeibo(success, error, {
			"title" : "WeX5开发指南",
			"url" : window.location.href,
			"imageUrl" : "http://wex5.com/cn/wp-content/uploads/2015/03/wen-xin-2.png"
		});
    };//微博分享
 

    Model.prototype.qqClick = function(event) {
		function success(result) {
			alert(JSON.stringify(result));
		}
		function error(result) {
			alert(JSON.stringify(result));
		}
		var args = {};
		args.url = utils.getShareUrl(window.location.href);
		alert(args.url);
		args.title =  "WeX5开发指南";
		args.description = "分享到qq";
		args.imageUrl = "http://wex5.com/cn/wp-content/uploads/2015/03/wen-xin-2.png";
		args.appName = "share";	
		navigator.QQ.shareToQQ(success, error, args);
    };//分享到qq联系人

    Model.prototype.kongjianClick = function(event) {
		function success(result) {
			alert(JSON.stringify(result));
		}
		function error(result) {
			alert(JSON.stringify(result));
		}
		var args = {};
		args.url = location.href.split('#')[0];
		args.title =  "WeX5";
		args.description = "desc";
		args.imageUrl = ['http://wex5.com/cn/wp-content/uploads/2015/03/wen-xin-2.png'];
		args.appName = "";
		navigator.QQ.shareToQzone(success, error, args);
    };//分享到qq空间
    
 

    Model.prototype.weixinClick = function(event) {
		function success(result) {
			alert(JSON.stringify(result));
		}
		function error(result) {
			alert(JSON.stringify(result));
		}
		navigator.weixin.share({
			message : {
				title : "WeX5开发指南",
				description : "分享到微信",
				mediaTagName : "Media Tag Name(optional)",
				thumb : "http://YOUR_THUMBNAIL_IMAGE",
				media : {
					// type: weixin.Type.WEBPAGE, // webpage
					webpageUrl : window.location.href
				// webpage
				}
			},
			scene : navigator.weixin.Scene.SESSION
		}, success, error);
    };//分享到微信联系人
    Model.prototype.pengyouquanClick = function(event) {
		function success(result) {
			alert(JSON.stringify(result));
		}
		function error(result) {
			alert(JSON.stringify(result));
		}
		navigator.weixin.share({
			message : {
				title : "WeX5开发指南",
				description : "分享到微信",
				mediaTagName : "Media Tag Name(optional)",
				thumb : "http://YOUR_THUMBNAIL_IMAGE",
				media : {
					// type: weixin.Type.WEBPAGE, // webpage
					webpageUrl : window.location.href
				// webpage
				}
			},
			scene : navigator.weixin.Scene.TIMELINE
		}, success, error);
    };//分享到微信朋友圈

在上面的示例中，调用共享接口后成功和失败的回调结果只是一个简单的回调结果显示. 如有必要，开发人员可以根据需要实现相应的成功和失败回调方法！实际上，代码编写基本相同，但是调用接口时需要传递的参数略有不同. 详细的参数说明要求我们参考各自开放平台的正式文档微信 qq谁开发的，在此我不会做太多解释.

到目前为止，我们已经完成了一个共享案例的大部分开发工作，下一步是打包和测试！

实际上，打包和配置参数非常简单. 我们已经在插件中进行了相应的配置. 开发人员只需在打包时将第一步中获得的相应appId填写到插件的参数输入框中，然后对其进行打包即可打包向导！如图所示:

①必须确保填写的参数正确且与应用程序的包名称相对应，否则将无法调用微信（微博微信 qq谁开发的，QQ）客户端.

②在iOS上共享时，请尽量避免在参数url字符串中使用太多特殊字符，否则会出现无法调用客户端的现象. 解决方案是导入x5的utils模块并在js中转换arg.url. 如下:

    var utils = require("$UI/system/components/justep/common/utils");
    args.url = utils.getShareUrl(window.location.href);

③在iOS中，确保一个bundleID对应于一个appID. 尽量避免与多个bundleID共享相同的appID. 否则，从微信（微博，QQ）客户端返回应用程序时会产生混乱，导致应用程序无法正常返回. 由于Android的回调应用程序机制不同，因此Android不会出现此问题！

④在Android系统下，微信和微博均存在签名问题. Android生成apk软件包后，签名应回填到微信和新浪微博开发者平台中. 具体方法是: 下载并安装签名工具，然后输入软件包名称，获取签名，然后将其用作微信/微博开发者平台中应用程序的签名，可以参考另一篇“ h5app微信支付”起始样式”（）与Android相关的签名设置.

⑤如果开发人员使用x5_3.3版本，则微信插件应选择发布模式进行打包和测试.

以上仅是作者在开发中遇到的问题，或作为特例，仅供参考.

生成安装软件包后，您可以对其进行安装和测试. 如有任何疑问，欢迎来到北京启动技术开发者论坛的cordova插件部分（）进行讨论！

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-217450-1.html