APP微信分享流程

APP微信分享流程

[TOC]

一、iOS分享到微信教程

1.在微信开放平台申请账号并创建移动应用

要分享内容到微信,必须得在微信公众平台注册一个帐号并且创建一个移动应用。创建了移动应用还需要审核通过才可以,这一过程大概需要2-3天。

2. 项目集成微信SDK

2.1 下载微信iOS SDK

前往微信公众平台-资源中心下载微信iOS SDK。

2.2 创建项目,加入SDK

打开XCode,创建一个Single View Application,命名为WechatShareDemo。我们这个教程接下来就在这个项目的基础上进行。 将2.1下载好的SDK压缩包解压后你可以看到以下文件:

其中的README.txt你有时间可以看看。 其他的.a、.h文件是我们需要的,直接导入到我们创建的WechatShareDemo中来。

此时我们已经有了一个导入了微信SDK的项目了,接下来我们需要配置一下!

3 配置SDK环境

3.1 导入需要的动态库和框架

在工程Build Phases -> Link Binary With Libraries 链接以下动态库和框架文件:

  • 1.SystemConfiguration.framework
  • 2.CoreTelephony.framework
  • 3.Security.framework
  • 4.CFNetwork.framework
  • 5.libsqlite3.0.tbd
  • 6.libz.1.2.8.tbd
  • 7.libc++.tbd

3.2 设置Other Linker Flags为"-Objc -all_load"

3.3 设置URL scheme

为了跳转至微信后还能跳回我们的app,我们必须将我们的appID添加为URL scheme。

4. 编写分享代码

到目前为止,我们导入了微信的SDK,配置了开发环境。试着运行一下吧!如果没有报错,就可以进行下一步啦!

4.1 获取appID

在我们编写代码之前,还有一个东西需要准备的,那就是appID。 什么是appID呢?appID是微信用来标识你的应用的唯一ID,注意与苹果的app id没有任何关系。 如果你已经创建了移动应用并且审核通过了的话,点击应用的查看按钮进入应用详情可以看到如下图:红框里面的就是appID,这个东西待会有用。

4.2 在应用里注册你的appID

在AppDelegate.m文件中,引入WXApi.h

java 复制代码
(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [WXApi registerApp:@"wxd930ea5d5a258f4f"];//注册appID
    return YES;
}

4.3 分享一段文本到微信

好了!该开始写分享的代码了,在Main.storyboard的viewController里放置一个按钮,在viewController.m文件里引入微信的两个头文件:

java 复制代码
import "WXApi.h"
import "WXApiObject.h"

在按钮的响应事件里这样写:

java 复制代码
- (IBAction)shareButtonClick:(id)sender {
    SendMessageToWXReq *req = [[SendMessageToWXReq alloc]init];
    req.bText = YES;           // 指定为发送文本
    req.text = @"hello world"; // 要发送的文本
    req.scene = WXSceneSession;// 指定发送到会话
    [WXApi sendReq:req];
}

运行一下,一切正常的话,你现在应该可以分享文本到微信好友了! 注意req.scene是指定你要分享到哪个场景,在上面的代码里是分享到会话(聊天界面)里,你还可以选择分享到朋友圈或者收藏:

java 复制代码
/*! @brief 请求发送场景
 *
 */
enum WXScene {
    WXSceneSession  = 0,        /**< 聊天界面    */
    WXSceneTimeline = 1,        /**< 朋友圈      */
    WXSceneFavorite = 2,        /**< 收藏       */
};
4.4 分享网页到微信

只需要简单的代码,我们可以分享一个网页到微信:

java 复制代码
(void)sendUrl:(NSString*)url To:(enum WXScene)scene{
    SendMessageToWXReq *req = [[SendMessageToWXReq alloc]init];
    req.bText = NO;
    req.scene = WXSceneSession;// 分享到会话
    WXMediaMessage *medMessage = [WXMediaMessage message];
    medMessage.title = @"分享网页的标题"; // 标题
    medMessage.description = @"这个就是描述啦";// 描述
    WXWebpageObject *webPageObj = [WXWebpageObject object];
    [medMessage setThumbImage:[UIImage imageNamed:@"kitty"]];// 缩略图
    webPageObj.webpageUrl = @"http://www.baidu.com";
    medMessage.mediaObject = webPageObj;
    req.message = medMessage;
    [WXApi sendReq:req];
}

效果如图:

上面是分享到会话里,同样的也可以分享到微信朋友圈和收藏,只要修改scene(场景)即可。

5 对分享结果进行处理

当微信处理完你的情求,跳回到你的app时,会给你带上一些信息,在这里你可以对其进行处理,知道是用户取消了,还是发送成功了。 在AppDelegate.m 里:

  1. 声明实现WXApiDelegate协议
  2. 实现application:handleOpenURL方法,将url交给微信SDK进行处理
  3. 实现WXApiDelegate协议里的onResp:方法。
java 复制代码
// 处理其他app调起的情况
(BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url{
    // 交给微信处理,如果它能处理 会回调delegate的相关方法如onResp:
    return [WXApi handleOpenURL:url delegate:self];
}
#pragma mark WXApiDelegate
(void) onResp:(BaseResp*)resp{
    NSString *str = [NSString stringWithFormat:@"%d",resp.errCode];
    UIAlertView *alertview = [[UIAlertView alloc] initWithTitle:@"微信返回结果" message:str delegate:self cancelButtonTitle:@"好的" otherButtonTitles:nil, nil];
    [alertview show];
}

6.总结

iOS分享内容到微信的基本流程到这里就差不多了,如果还想深入可以去看官方的开发文档和demo。

官方的IOS开发文档及demo

二、Android分享到微信教程

1:微信开放平台申请应用

微信开放平台

分享需要用到appId,这里注意了,申请时用到的是MD5值,而不是SHA1值。

2.Application中注册

在自定义的Application中的onCreate方法中,注册一下app,代码如下:

java 复制代码
// 三个参数分别是上下文、应用的appId、是否检查签名(默认为false)
IWXAPI mWxApi = WXAPIFactory.createWXAPI(this, "你的appId", true);
// 注册
mWxApi.registerApp("你的appId");

3.配置网终权限

微信分享是肯定需要请求网络的,所以要在manifests文件中允许网络权限:

java 复制代码
<uses-permission android:name="android.permission.INTERNET"/>

4.增加依赖

在app模块的build.gradle文件中,添加如下依赖:

java 复制代码
dependencies {
    api 'com.tencent.mm.opensdk:wechat-sdk-android:+'
}

注:从6.8.0版本开始,请使用 wechat-sdk-android

5.开始使用

微信分享,可以是纯文本类型、图片类型、音乐类型、视频类型、网页类型、小程序类型。

请求的代码写到了一个工具类里,方便调用,下面附上代码:

java 复制代码
public class WxShareUtils {
/**
     * 分享网页类型至微信
     *
     * @param context 上下文
     * @param appId   微信的appId
     * @param webUrl  网页的url
     * @param title   网页标题
     * @param content 网页描述
     * @param bitmap  位图
     */
    public static void shareWeb(Context context, String appId, String webUrl, String title, String content, Bitmap bitmap) {
        // 通过appId得到IWXAPI这个对象
        IWXAPI wxapi = WXAPIFactory.createWXAPI(context, appId);
        // 检查手机或者模拟器是否安装了微信
        if (!wxapi.isWXAppInstalled()) {
            ToastUtil.makeText("您还没有安装微信");
            return;
        }

        // 初始化一个WXWebpageObject对象
        WXWebpageObject webpageObject = new WXWebpageObject();
        // 填写网页的url
        webpageObject.webpageUrl = webUrl;

        // 用WXWebpageObject对象初始化一个WXMediaMessage对象
        WXMediaMessage msg = new WXMediaMessage(webpageObject);
        // 填写网页标题、描述、位图
        msg.title = title;
        msg.description = content;
        // 如果没有位图,可以传null,会显示默认的图片
        msg.setThumbImage(bitmap);

        // 构造一个Req
        SendMessageToWX.Req req = new SendMessageToWX.Req();
        // transaction用于唯一标识一个请求(可自定义)
        req.transaction = "webpage";
        // 上文的WXMediaMessage对象
        req.message = msg;
        // SendMessageToWX.Req.WXSceneSession是分享到好友会话
        // SendMessageToWX.Req.WXSceneTimeline是分享到朋友圈
        req.scene = SendMessageToWX.Req.WXSceneSession;

        // 向微信发送请求
        wxapi.sendReq(req);
    }
}

工具类写好了,最后只要在你需要的地方调用就行了。

java 复制代码
Glide.with(this).asBitmap().load("图片url").into(new SimpleTarget<Bitmap>() {
            /**
             * 成功的回调
             */
            @Override
            public void onResourceReady(Bitmap bitmap, Transition<? super Bitmap> transition) {
                // 下面这句代码是一个过度dialog,因为是获取网络图片,需要等待时间
                mDialog.dismiss();
                // 调用方法
                WxShareUtils.shareWeb(this, "你的appId",
                        "网页url", "网页标题", "网页描述",
                         bitmap);
            }

            /**
             * 失败的回调
             */
            @Override
            public void onLoadFailed(@Nullable Drawable errorDrawable) {
                super.onLoadFailed(errorDrawable);
                mDialog.dismiss();

                WxShareUtils.shareWeb(this, "你的appId",
                        "网页url", "网页标题", "网页描述",
                         null);
            }
});

这里还是需要补充一下,图片大小超过32KB(我记得没错应该是这个值),会导致分享界面调不起来,这里就需要压缩一下图片.

6.收尾工作

在app模块包的根目录下新建一个wxapi的包,在这个包下面新建一个WXEntryActivity

这个WXEntryActivity就是个普通的Activity,先贴上布局,其实就是一个最简单的空布局:

java 复制代码
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</android.support.constraint.ConstraintLayout>

下面就是这个Activity的代码:

java 复制代码
public class WXEntryActivity extends AppCompatActivity implements IWXAPIEventHandler {

    private IWXAPI wxapi;

    @Override
    protected void onNewIntent(Intent intent) {
        super.onNewIntent(intent);
        setIntent(intent);
        wxapi.handleIntent(intent, this);
    }

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_wxentry);

        wxapi = WXAPIFactory.createWXAPI(this, "你的appId");
        wxapi.handleIntent(getIntent(), this);
    }

    /**
     * 微信发送请求到第三方应用时,会回调到该方法
     */
    @Override
    public void onReq(BaseReq baseReq) {
        // 这里不作深究
    }

    /**
     * 第三方应用发送到微信的请求处理后的响应结果,会回调到该方法
     * app发送消息给微信,处理返回消息的回调
     */
    @Override
    public void onResp(BaseResp baseResp) {
        switch (baseResp.errCode) {
            // 正确返回
            case BaseResp.ErrCode.ERR_OK:
                switch (baseResp.getType()) {
                    // ConstantsAPI.COMMAND_SENDMESSAGE_TO_WX是微信分享,api自带
                    case ConstantsAPI.COMMAND_SENDMESSAGE_TO_WX:
                        // 只是做了简单的finish操作
                        finish();
                        break;
                    default:
                        break;
                }
                break;
            default:
                // 错误返回
                switch (baseResp.getType()) {
                    // 微信分享
                    case ConstantsAPI.COMMAND_SENDMESSAGE_TO_WX:
                        Log.i("WXEntryActivity" , ">>>errCode = " + baseResp.errCode);
                        finish();
                        break;
                    default:
                        break;
                }
                break;
        }
    }
}

这样还没完,最后需要在manifests文件中申明这个Activity,代码如下(复制粘贴的话,把代码中的注释去掉就可以了)

java 复制代码
<activity
    // 下面三行代码必须要有
    android:name=".wxapi.WXEntryActivity"
    android:exported="true"
    android:launchMode="singleTop"
    // 下面两行代码可有可无
    android:screenOrientation="portrait"
    // 指定一个主题,这里是无标题、半透明的主题
    android:theme="@style/NoTitleTranslucent80Theme"/>

下面是指定主题的代码,写在style.xml文件里(windowAnimationStyle可以不添加,这里只是一个动画):

java 复制代码
<style name="NoTitleTranslucent80Theme" parent="BaseAppTheme">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowBackground">#80000000</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowAnimationStyle">@style/AlphaAnim</item>
</style>

下面是动画的style(代码中两个item从上至下分别是进入动画、退出动画):

java 复制代码
<style name="AlphaAnim" parent="android:Animation">
    <item name="@android:windowEnterAnimation">@anim/bottom_in</item>
    <item name="@android:windowExitAnimation">@anim/bottom_out</item>
</style>

bottom_in 的代码如下:

java 复制代码
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="300"
        android:fromXDelta="0"
        android:fromYDelta="100%"
        android:toXDelta="0"
        android:toYDelta="0" />
</set>

bottom_out 的代码如下:

java 复制代码
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="300"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="0"
        android:toYDelta="100%" />
</set>

至此,一个完整的微信分享功能就实现了。

7.总结

只要按照上面的步骤一步步来,基本就能实现微信分享功能了。其中,要注意一点, 分享的图片大小不能大于32KB,

相关推荐
玩电脑的辣条哥3 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452183 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52353 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.93 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站3 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺6 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover17 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
柠檬豆腐脑10 小时前
从前端到全栈:新闻管理系统及多个应用端展示
前端·全栈
Dest1ny-安全10 小时前
Dest1ny漏洞库: 美团代付微信小程序系统任意文件读取漏洞
微信小程序·小程序·php