【ionic App问题总结系列】ionic 微信朋友圈分享

原创 2016年11月19日 23:10:16

前言

做完之后才发现实现ionic微信朋友圈、朋友分享并不难。只要按照着插件的文档来就行。但是在刚接触的时候依然是存在疑惑,还是写点记录总结下吧(本文是在开发Android App的环境下产生的)。

整个流程大致是下面三步:

  1. 微信开放平台申请应用获取appid

  2. 安装cordova微信分享插件

  3. 在代码中调用实现分享

开发前的准备

不管你使用什么样的cordova 微信分享插件,都必须要在微信开发者平台(https://open.weixin.qq.com/) 申请应用,并获得appid。appid的作用就是用来标识你的应用,让你的应用可以获取微信提供的接口权限,比如:分享到朋友圈、分享给朋友等权限。由于之前开发原生Android App的同事已经将这一步完成了,我直接是利用已经申请好的appid,并没有重新尝试(实际上也并没办法尝试,每个应用的名称、包名,签名都必须是唯一。为了做到ionic app能覆盖原有的Android App,我也必须保证ionic app这三者与原来保持一致)。关于如何申请可以参考这篇文章:http://www.cnblogs.com/fair-1107518056/p/5667773.html

安装并使用插件

完成上一步之后,你就获得了appid。然后就可以安装所需要的插件了。这里使用的插件是:https://github.com/xu-li/cordova-plugin-wechat 。README部分已经够用了,如果还不清楚的话,作者还很贴心的提供了sample:https://github.com/xu-li/cordova-plugin-wechat-example

第一步:先安装插件


cordova plugin add cordova-plugin-wechat --variable wechatappid=YOUR_WECHAT_APPID

其中YOUR_WECHAT_APPID要替换成你上一步申请应用成功后获得的appid。

如果你只是用到了“分享给好友”和“分享到朋友圈”这两个功能,那代码其实就非常简单了。

第二步:把微信分享的功能写到service层中

/**
* 微信分享插件Service
*/
.factory('WechatService', [ function () {
 function share(params) {
   if (typeof Wechat === "undefined") {
     alert("手机尚未安装微信");
     return false;
   }

   var json = {};
   Wechat.share(params, function () {
     alert(分享成功);
   }, function (reason) {
     alert('Failed'+ reason);
   });
   return true;
 }

 return {
   share: share
 }
}])

插件安装后,会自动注册一个Wechat全局变量,在这个全局变量下,定义了一个share()方法,用来分享到微信中。

第三步:在Controller层中调用

/**
* type 表示分享类型。0:表示分享给朋友,1表示分享到朋友圈
/

$scope.share = function (type) {
 var json = {};
 Wechat.isInstalled(function (installed) {
   if (!installed) {
     alert(尚未安装微信);
     return false
   }
 }, function (reason) {
    alert('Failed'+ reason);

 });

 $scope.params = {
   scene: type,
   message: {
     title: "添米送万元,几万人都在领,我在这里等你",
     thumb: "https://www.91tianmi.com/mobile/statics/mobile/images/icon-tm-logo.jpg",
     description: "写上描述文本",
     media: {
       type: Wechat.Type.LINK,
       webpageUrl: “http://xxx.xxx.com/siteurl”    // 这里的webpageUrl要替换成你的页面url
     }
   }
 };
 WechatService.share($scope.params);
}

第四步:View层中的html页面显示


<div class="row text-center" flex="box:mean">
 <div class="share-option" ng-click="share(0)">
   <img src="main/assets/images/account/invite/share-friends.png" alt="" class="icon-share">
   <p>微信好友</p>
 </div>
 <div class="share-option" ng-click="share(1)">
   <img src="main/assets/images/account/invite/share-timeline.png" alt="" class="icon-share">
   <p>微信朋友圈</p>
 </div>
</div>

然后就可以愉快得使用微信分享了。

问题总结

  • 安装插件的时候必须要将添加你的appid,要不然是无法调用分享功能;

  • 要测试微信分享功能,必须是签名之后的release apk,debug-apk是无法测试。因为在微信开发平台申请移动应用的时候需要你填写签名,所以你也必须对你的apk进行签名后才能正常使用微信分享功能;

结尾

想要查看ionic Android App的真机效果,可以前往各大应用市场搜索添米财富 下载便可看到(这里真不是打广告)

文章首发于我的个人博客: www.iamsuperman.cn

版权声明:本文为博主原创文章,未经博主允许不得转载。

Ionic 常见问题及解决方案——留着给自己解解惑~~

前言 Ionic是目前较为流行的Hybird App解决方案,在Ionic开发过程中会遇到很多常见的开发问题,本文尝试对这些问题给出解决方案。 一些常识与技巧 list 有延...
  • taohai123
  • taohai123
  • 2016年05月24日 19:11
  • 14380

ionic开发——微信分享朋友,朋友圈的实现方法

上一篇文章讲了 ionic开发——微信分享准备工作之签名和包名的获取方法http://blog.csdn.net/yu17310133443/article/details/52701417 点击打...
  • yu17310133443
  • yu17310133443
  • 2016年09月29日 16:52
  • 4532

ionic2微信分享

需要用到cordova-plugin-wechat这个cordova插件。 github地址:https://github.com/xu-li/cordova-plugin-wechat/tree/...
  • cyan747
  • cyan747
  • 2016年12月09日 15:40
  • 2256

ionic开发App-问题收集总结

总结使用ionic开发App算是告一段落了。使用前端的技术来统一移动端,不得不承认这个听起来很酷。JavaScript要统一世界的节奏。 然而现实并不是这样,使用ionic开发App虽然在开发速度上...
  • qq673318522
  • qq673318522
  • 2016年11月19日 23:28
  • 3425

理解 async/await

刚出来不久的 ES7 包含了 async 函数,它的出现,终于让 JavaScript 对于异步操作有了终极解决方案。No more callback hell。 async 函数是 Generat...
  • qq673318522
  • qq673318522
  • 2017年07月18日 21:58
  • 2276

nodejs-typescipt-Promise代码实例讲解,看完就理解async和await了

这里就不讲解Promise和Async和Await什么东西了,直接上代码,和对应的结果。希望你能自己跑一边就知道他们之间的区别和什么时候用了。 标准代码和结果: interface IBa...
  • wwaayyaaa
  • wwaayyaaa
  • 2016年11月02日 12:01
  • 1727

ionic入门教程第十六课-在微信中使用ionic的解决方案(按需加载加强版)

对于微信端来说,其实使用ionic是一个比较大的前端框架。 有更多比较轻量化的前端框架可以选择。 但是使用ionic有一个明显的优点就是,能够做到一端开发,三端同步上线。 这个梗说了好多遍了,但确实是...
  • onil_chen
  • onil_chen
  • 2016年05月19日 19:07
  • 12020

ionic2实现社会化分享Social Sharing

使用到ionic-native中的Social Sharing插件:Social Sharing        在ionic2项目下,执行如下语句安装插件: $ ionic plugin add c...
  • qq_15096707
  • qq_15096707
  • 2016年11月14日 15:05
  • 1977

为Cordova + Ionic + AngularJS 应用添加微信分享功能

为Cordova + Ionic + AngularJS 应用添加微信分享功能     不知道 Cordova 、Ionic、AngularJS 为何物的,请点击下方链接自行恶补: · ...
  • bblonglp
  • bblonglp
  • 2015年09月10日 16:44
  • 4906

ionic android app 微信/朋友圈分享网页

appionic框架/cordova/phonegap 安卓android平台 插件https://github.com/xu-li/cordova-plugin-wechat创建一个ionic安...
  • lucy_100
  • lucy_100
  • 2015年11月06日 17:53
  • 2187
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【ionic App问题总结系列】ionic 微信朋友圈分享
举报原因:
原因补充:

(最多只允许输入30个字)