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

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

4.3 分享一段文本到微信

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

import "WXApi.h"
import "WXApiObject.h"

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

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

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

/*! @brief 请求发送场景
 *
 */
enum WXScene {
    WXSceneSession  = 0,        /**< 聊天界面    */
    WXSceneTimeline = 1,        /**< 朋友圈      */
    WXSceneFavorite = 2,        /**< 收藏       */
};

4.4 分享网页到微信

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

(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:方法。

// 处理其他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，代码如下：

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

3.配置网终权限

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

<uses-permission android:name="android.permission.INTERNET"/>

4.增加依赖

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

dependencies {
    api 'com.tencent.mm.opensdk:wechat-sdk-android:+'
}

注：从6.8.0版本开始，请使用 wechat-sdk-android

5.开始使用

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

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

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);
    }
}

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

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，先贴上布局，其实就是一个最简单的空布局：

<?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的代码：

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，代码如下（复制粘贴的话，把代码中的注释去掉就可以了）

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

下面是指定主题的代码，写在style.xml文件里（windowAnimationStyle可以不添加，这里只是一个动画）：

<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从上至下分别是进入动画、退出动画）：

<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 的代码如下：

<?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 的代码如下：

<?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，