为Cordova + Ionic + AngularJS 应用添加微信分享功能
不知道 Cordova 、Ionic、AngularJS 为何物的,请点击下方链接自行恶补:
· Cordova
· Ionic
需求
最后开始接触一些基于 Ionic +Cordova + AngularJS技术的移动App的开发,然后就遇到了很多都是需要有一个分享功能的,尤其是微信的分享,这也是第一次搞这种事情啊,没办法,折腾了好多天,解决了这个问题之后发现,原来是如此的简单。
准备好你的App
我在这里创建一个名为 WechatShareDemoApp 的新的App,在工作目录中运行如下命令:
1. ionic start WechatShareDemoApp tabs
这会使用 Ionic Tabs Seed 创建一个基于标签导航的空的App,创建成功之后,使用任何一个你喜欢的编辑器编辑该项目,我使用的是 WebStorm。
为 DashCtrl
增加一个 share(title,desc,url,thumb)
文法
share(title,desc,url,thumb)
方法用来打开一个 ActionSheet
面板,在该面板中,会提供两个分享按钮,一个用于分享内容至朋友圈,一个用于分享至会话,代码如下:
1. // 上面代码省略
2. .controller('DashCtrl', function($scope, $ionicActionSheet) {
3. $scope.share = function(title, desc, url, thumb) {
4. $ionicActionSheet.show({
5. buttons: [
6. { text:'<b>分享至微信朋友圈</b>' },
7. { text:'分享给微信好友' }
8. ],
9. titleText: '分享',
10. cancelText:'取消',
11. cancel: function() {
12. // 取消时执行
13. },
14. buttonClicked: function(index) {
15. if(index == 0) {
16. $scope.shareViaWechat(WeChat.Scene.timeline, title, desc, url, thumb);
17. }
18. if(index ==1 ) {
19. $scope.shareViaWechat(WeChat.Scene.session, title, desc, url, thumb);
20. }
21. }
22. });
23. };
24.})
25.// 下面代码省略
share(title,desc,url,thumb)
的运行方式是,点击该方法被调用时,打开一个 ActionSheet ,点击 分享至微信朋友圈 按钮被点击时,执行 $scope.shareViaWechat(WeChat.Scene.timeline, title, desc,url, thumb)
,点击 分享给微信好友 时,执行$scope.shareViaWechat(WeChat.Scene.session, title, desc,url, thumb)
,前者分享内容至朋友圈,后者分享内容至会话,但是,$scope.shareViaWechat
方法本身是不存在的,所以,我们还需要添加该方法。
为 DashCtrl
添加 $scope.shareViaWechat
方法
该方法使用了第三方的 Cordova
插件提供的方法 WeChat.share
,该方法可以将内容分享至微信中,代码如下:
1. // 前面代码省略
2. .controller('DashCtrl', function($scope, $ionicActionSheet, $ionicPopup) {
3.
4. //......
5.
6. $scope.shareViaWechat = function(scene, title, desc, url, thumb) {
7. // 创建消息体
8. var msg = {
9. title:title ? title : "行者无疆",
10. description: desc ? desc : "A real traveller's province isboundless.",
11. url: url ?url : "http://www.xingzhewujiang.xinligen.osnuts.com",
12. thumb:thumb ? thumb : null
13. };
14.
15. WeChat.share(msg, scene, function() {
16. $ionicPopup.alert({
17. title: '分享成功',
18. template: '感谢您的支持!',
19. okText:'关闭'
20. });
21. }, function(res) {
22. $ionicPopup.alert({
23. title: '分享失败',
24. template: '错误原因:' + res + '。',
25. okText:'我知道了'
26. });
27. });
28. };
29.})
30.// 后面代码省略
在上面的代码中, WeChat 是由第三方插件提供的,至现在为止,分享功能已经做完,我们现在需要在 views
中添加分享功能的激活按钮。
添加分享按钮
打开 templates/tab-dash.html
,在 ion-content
结束前,添加如下代码:
1. <buttonclass="button button-assertive button-outlinebutton-block"ng-click="share()">分享</button>
该按钮会打开分享的 ActionSheet,我们不需要传任何参数,因为在上面的分享方法中,对没有设定的参数已经提供了默认的内容了。
此时,应用的界面如下图所示:
添加微信分享插件
虽然样子已经成型了,但是还是不能进行分享的,我们需要安装一个插件,该插件使用到了微信官方的第三方开发库,需要先在微信开放平台申请一个AppId,然后还需要使用Gen_Signature_Android221cbf.zip 插件从手机中根据包名获取一个 Signature Code,该代码还必须填写进入开放平台中,在该过程中,若我们的App是运行在Android平台的话,还涉及到 keystore 的问题,这里不做过多的阐述,若我们的项目为新项目的话,还需要先生成一个Android安装包(必须生成 Apk 包之后安装),安装至某一个手机中,然后在该手机中使用上面的 Gen_Signature_Android221cbf 应用获取 Signature 值,再填入开放平台的相应设置中。
您在申请了AppID之后,还需要了解到你需要将你的包名也设置进入开放平台中,该包名在 Ionic 项目中的, config.xml 文件中可以进行设置。
该插件必须在 Platform 添加之后安装,所以我们先添加一个 Platform,比如 Android
:
1. ionic platform add android
在 App 的根目录下使用下面的命令即可:
1. cordova plugin add com.wordsbaking.cordova.wechat --variableAPP_ID=[你的APPID]
上面的 APP_ID
为你在微信开放平台申请的 App ID,安装该插件时,必须添加至命令中。
打包并安装使用
将新生成的项目专稿 Eclipse 中,打包并安装测试。