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

智极漫步
• 阅读 6182

摘自:
http://www.itwendao.com/artic...
http://www.iamsuperman.cn/
http://www.cnblogs.com/fair-1...

前言

实现ionic微信朋友圈、朋友分享只要按照着插件的文档来就行,为方便查询,现记录总结(本文是在开发Android App的环境下产生的)。

注:

1.每个应用的名称、包名,签名都必须是唯一。为了做到ionic app能覆盖原有的Android App,必须保证ionic app这三者与原来保持一致。

2.不管你使用什么样的cordova 微信分享插件,都必须要在微信开发者平台(https://open.weixin.qq.com/) 申请应用,并获得appid。appid的作用就是用来标识你的应用,让你的应用可以获取微信提供的接口权限,比如:分享到朋友圈、分享给朋友等权限。

关于如何申请可以参考这篇文章:http://www.cnblogs.com/fair-1...

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

流程大致是下面五步:

1)一个android apk包

2)应用签名(需要android apk包名来生成签名)

3)填写应用信息(包含签名),微信开放平台申请应用获取appid

4)安装cordova微信分享插件( cordova-plugin-wechat)

5)在代码中调用实现分享

细化:

1)一个android apk包
通过ionic 生成一个android apk包

2)应用签名(需要android apk包名来生成签名)
如图1:
【ionic App问题总结系列】ionic 微信朋友圈分享

如图2,根据apk包名,生成应用签名(图中绿色编码):
【ionic App问题总结系列】ionic 微信朋友圈分享

3)填写应用信息(包含签名),微信开放平台申请应用获取appid

不管你使用什么样的cordova 微信分享插件,都必须要在微信开发者平台(https://open.weixin.qq.com/) 申请应用,并获得appid。appid的作用就是用来标识你的应用,让你的应用可以获取微信提供的接口权限,比如:分享到朋友圈、分享给朋友等权限。

 图1,等待应用审核通过,就可以获取一个应用appid: 

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

图2, 圆圈中标记的就是,步骤四所需要的微信appid:

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

4)安装cordova微信分享插件( cordova-plugin-wechat)

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

ionic plugin add cordova-plugin-wechat --variable wechatappid=微信appid
ionic platform add android
ionic build android

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

5)在代码中调用实现分享

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

a):把微信分享的功能写到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()方法,用来分享到微信中。

b):在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);
    }

c):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>

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

点赞
收藏
评论区
推荐文章
梦
4年前
微信小程序new Date()转换时间异常问题
微信小程序苹果手机页面上显示时间异常,安卓机正常问题image(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b691e1230e2f15efbd81fe11ef734d4f.png)错误代码vardate'2021030617:00:00'vardateT
Stella981 Stella981
3年前
Mac 下用 ionic 开发环境的搭建
常用的开发工具:nodeJSjavaSEWebStorm正文:第一步,从(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fnodejs.org%2F)https://nodejs.org/download/中下载Node.jsforMac安装包,下载之后
Stella981 Stella981
3年前
SpringBoot整合Redis乱码原因及解决方案
问题描述:springboot使用springdataredis存储数据时乱码rediskey/value出现\\xAC\\xED\\x00\\x05t\\x00\\x05问题分析:查看RedisTemplate类!(https://oscimg.oschina.net/oscnet/0a85565fa
Stella981 Stella981
3年前
Html5混合开发环境的H5牛牛平台搭建
工具:AndroidSDK,JavaJDK,Node.js,Cordova、Ionic、python;1、androd需要配置:jdk路径和sdk配置;jdk配置环境变量:JAVA\_HOME:jdk安装目录,如:F:\\Java\\jdk1.8.0\_11%JAVA\_HOME%\\bin;%JAVA\_HOME%\\jre\\bi
Stella981 Stella981
3年前
Mobile first! Wijmo 5 + Ionic Framework之:费用跟踪 App
费用跟踪应用采用了Wijmo5和IonicFramework创建,目的是构建一个hybirdapp。我们基于《Mobilefirst!Wijmo5IonicFramework之:HelloWorld!》的环境,将在本教程中完成费用跟踪App的构建。下面的代码结构是本教程完成要达到的效果,请预先创建好文件和目录。www/  
Stella981 Stella981
3年前
Ionic2 集成ECharts
在群里看到有人问怎么在Ionic2中集成ECharts来显示图表。当时答应说写个blog,简单写下步骤。在TypeScript中如果要使用第三方库,必须要有d.ts,也就是定义文件,没有这个文件的话TypeScript是认不出来的,无法编译通过。下面以百度的ECharts图表为例,演示一下使用第三方库的用法。1、安装ECHARTS首先需要使用np
Easter79 Easter79
3年前
SpringBoot整合Redis乱码原因及解决方案
问题描述:springboot使用springdataredis存储数据时乱码rediskey/value出现\\xAC\\xED\\x00\\x05t\\x00\\x05问题分析:查看RedisTemplate类!(https://oscimg.oschina.net/oscnet/0a85565fa
Stella981 Stella981
3年前
Ionic6使用组件出现错误:Did you add it to @NgModule.entryComponents
缘由在Ionic6和Angular8项目中使用组件时出现错误:Error:NocomponentfactoryfoundforLoginComponent.Didyouadditto@NgModule.entryComponents?在我的上一篇文章:移动开发:Ionic框架实现注册与登录功能(https:
Easter79 Easter79
3年前
TypeScript系列1
1\.简介  随着PC端快速向移动端迁移,移动(体验)优先的概念也越来越响。由于ReactJS目前移动端仅仅支持iOS,因此移动端Web开发框架只能选择:AngularJS/Angula2Ionic框架Cordova。想要学习好Angula2以及阅读其代码,就必须了解和学习TypeScript,也因此需要学习好ES6以
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(