App 分享微信小程序功能介绍和业务方案分析

今天微信小程序新增了支持跳转 App 的功能，算是一次比较大的突破，我也第一时间体验了一下该功能，App 和小程序之间的跳转还是比较灵活的。

因为需要用户主动触发才能打开 APP，所以该功能不由 API 来调用，需要用 open-type 的值设置为 launchApp 的 <button> 组件的点击来触发。

当小程序从 APP 分享消息卡片的场景打开时（场景值 1036，APP 分享小程序文档 iOS 参见，Android 参见），小程序会获得打开 APP 的能力，此时用户点击按钮可以打开分享该卡片的 APP。即小程序不能打开任意 APP，只能 跳回 分享该小程序卡片的 APP。

在一个小程序的生命周期内，只有在特定条件下，才具有打开 APP 的能力。 打开 APP 的能力 可以理解为由小程序框架在内部管理的一个状态，为 true 则可以打开 APP，为 false 则不可以打开 APP。

在小程序的生命周期内，这个状态的初始值为 false，之后会随着小程序的每次打开（无论是启动还是切到前台）而改变：

当小程序从 1036 （ App 分享消息卡片）打开时，该状态置为 true。
当小程序从 1089 （微信聊天主界面下拉）或 1090 （长按小程序右上角菜单唤出最近使用历史）的场景打开时，该状态不变，即保持上一次打开小程序时该状态的值。
当小程序从非 1036/1089/1090 的场景打开，该状态置为 false。

使用方法

iOS

下载最新的微信 SDK，或使用 CocoaPods 更新。

分享微信小程序：

第一个字段 WebpageUrl 为备用链接，兼容低版本的微信客户端
userName 为小程序的原始 id，可以在小程序中查看
path 为小程序中页面路径
Description 为描述，等同于小程序中 onShareAppMessage 方法中的 title
ThumbImage 和 hdImageData 为分享图片的信息，需要小于 128k，因此在分享前需要先下载要分享的图片，并压缩，最后 resize 到 500*400(小程序卡片图片要求比例是 5 比 4)

- (void)downloadCoverImage{
    SDWebImageManager *manager = [SDWebImageManager sharedManager];
    
    __weak typeof(self) weakSelf = self;
    
    [manager loadImageWithURL:self.item.itemCover.url
                          options:0
                         progress:^(NSInteger receivedSize, NSInteger expectedSizem, NSURL *targetUrl) {
                             //NSLog(@"receiveSize:%ld,expectedSize:%ld",(long)receivedSize,(long)expectedSize);
                         }
                        completed:^(UIImage *image,NSData *data, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
                            if (image) {
                                NSData *imageData = UIImageJPEGRepresentation(image, 0.1);
                                weakSelf.hdImageData = UIImageJPEGRepresentation(image, 0.1);
                                weakSelf.thumbImage = [[[UIImage alloc]initWithData:data] scaledToSize:CGSizeMake(500, 400)];
                                weakSelf.shareImage = [[[UIImage alloc]initWithData:imageData] scaledToSize:CGSizeMake(100, 100)];
                                
                            }
                        }];
    
    
    self.sharestr = [NSString stringWithFormat:@"只需%@元，广州女装源头货，买手精选，一件起批，赶紧来上新进货吧！",self.item.salePrice];
    
}

withShareTicked 为 YES 时，是否带 shareTicket，可以通过 wx.getShareInfo 方法获取群对当前小程序的唯一 ID(OpenGid)
miniProgramType 表示小程序类型，0 是正式版，1 是开发版，2 是体验版

分享效果：

小程序端

需要将 <button> 组件 open-type 的值设置为 launchApp。如果需要在打开 APP 时向 APP 传递参数，可以设置 app-parameter 为要传递的参数。通过 binderror 可以监听打开 APP 的错误事件。

<button open-type="launchApp" app-parameter="itemId=12345&userId=1234" binderror="launchAppError">打开 APP</button>

若分享成功后，微信唤起 App，并传递 app-parameter 参数到 App:

在 App 中添加 WXApiDelegate 中的 onReq 方法，处理参数。

如果唤起 App 失败，在 binderror 对应的方法中处理唤起失败后的逻辑：

Page({ 
    launchAppError: function(e) { 
        console.log(e.detail.errMsg) 
    } 
})

如果是没有安装 App，可以使用 wx.previewImage 的方法弹出引导关注公众号的图片文案。

都知道从公众号文章或者底部菜单是可以调转到小程序的，从小程序是不可以调转回公众号的，从上面的动画中，你有没有发现亮点？这里有个小技巧，在微信小程序中长按 previewImage 打开的图片，是可以识别二维码的，接着直接跳转到公众号！

同学们不要开心的太早，这个功能不是每次都能实现的，有兴趣的可以自己试一下。