QQ浏览器小程序适配文档

一、QQ浏览器小程序接入（更新）流程
 二、QQ浏览器小程序接入（更新）步骤详解
 三、获取当前运行环境
 四、支付接口
 五、登录接口
 六、分包加载
 七、调起APP

一、QQ浏览器小程序接入（更新）流程

二、QQ浏览器小程序接入（更新）步骤详解

1、适配小程序

QQ浏览器目前不提供PC端开发编译工具，开发者仍然使用微信小程序提供的微信web开发者工具进行小程序的开发。
由于QQ浏览器小程序采用的是兼容微信小程序的方案，部分API与微信存在差异，如涉及登录和支付相关的功能。
需要开发者按照本文档开发适配，详情参考QQ浏览器小程序API支持情况

2、使用接入工具

接入工具是一个运行在微信中的工具，供开发者获得微信开发者工具上开发完成了的小程序，使用微信扫描下面二维码，即可进入到接入工具。具体步骤见接入工具页面提示。

3、使用调试工具

QQ浏览器小程序的调试工具(即调试版QQ浏览器)提供了一个QQ浏览器小程序的运行环境，可以将微信小程序放到QQ浏览器中运行体验。并且
可以看到日志信息。

1、运行体验方法

点击接入工具上的“启动QB打开小程序”按钮即可进入调试工具，若手机上会未安装调试工具，会先进行下载安装。

每次在微信开发者工具中更新完代码都需要在微信中运行，并通过QB接入工具pull一下。

2、调试工具面板说明

在调试工具中启动了小程序后，在页面左上角会有一个蓝色的小按钮，点击可以展开调试页面，如下图所示。
面板中有一排四个按钮，点击前三个可以查看日志信息，点击第四个x按钮最小化调试面板。
点击DebuggerLog按钮查看调试器本身打印的信息，对于开发者来说一般没有有用的信息。
点击FrameworkLog按钮查看QB小程序框架打印的信息，可以看到一些方法调用和参数信息。
点击JavaScriptLog按钮查看JS打印的日志信息，开发者主要通过这个日志定位和调试QB小程序。

4、提交测试

在调试完小程序之后，可以提交测试版本，即上传体验包

5、申请上线

在体验完之后如果要上线，需要选择测试报告，提交审核。等待后台系统审核通过。期间可以查询审核状态。

三、获取当前运行环境

如果开发者的小程序需要同时运行在微信和QQ浏览器端，那么对于开发者来说，第一件事就是需要知道小程序当前的运行环境，
此时，开发者可以通过检查wx.getSystemInfo()或wx.getSystemInfoSync()的返回值判断，如果返回的字典里有 {isQB:”true”}的键值对，
则为QQ浏览器环境，否则为微信环境，建议开发者在小程序的app.js里面对环境变量进行捕获并作为全局变量进行缓存。

四、支付接口

QB小程序的支付和微信小程序不完全一样，QB下支持web支付，包括H5支付和WAP支付。
其中H5支付对应接口为requestPayment，WAP支付对应接口为requestPaymentWap。其中WAP支付已经被微信逐渐放弃，基于安全和适配工作量考虑，不建议使用WAP支付。

QB小程序两种支付接口的相关说明如下：

requestPayment

QB中requestPayment需要3个参数，分别是package, prepay_id和referer。参数说明请参见微信H5支付文档中对应的参数说明。。其中referer是商户申请H5时提交的授权域名。
支付结果的处理,QB小程序支付时会拉起微信支付进程，建议在QB小程序中调用requestPayment之后弹框，由用户点击触发查单操作，进而在小程序内部触发处理支付结果的逻辑。
具体前台流程为： requestPayment ==> 弹框 ==> 用户点击 ==> 向后台确认支付结果。
可以结合页面的onShow事件中判断支付结果。

由于H5支付的特点，QB无法直接获取到支付结果，开发者不应该通过接口的success或fail回调判断支付是否成功。
接口调用示例代码如下：

if (wx.getSystemInfoSync().isQB) { // 如果在QB环境下
  wx.requestPayment({
    package: '1037687096’',
    prepay_id: 'wx20161110163838f231619da20804912345',
    referer: 'http://xx.yyyyy.zzz',
    complete: function(){     // 此处只是接口调用完成，并非支付成功
      showComfirmDialog()  // 弹窗让用户确认支付是否成功，并请求后台确认。
    }
  })
}

弹框效果可参考如下：

关于requestPaymentWap

参数	类型	必填	说明
appid	String	是	微信分配的小程序ID
timestamp	String	是	时间戳从1970年1月1日0000至今的秒数,即当前的时间
nonceStr	String	是	随机字符串，长度为32个字符以下
package	String	是	统一下单接口返回的prepay_id参数值，提交格式如：prepay_id=*
signType	String	是	签名算法，暂支持 MD5
paySign	String	是	签名,具体签名方案参见小程序支付接口文档
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码如下，其中“弹框”等拉起支付后的操作和H5支付处理相同

if (wx.getSystemInfoSync().isQB) {   // 如果在QB环境下
  wx.requestPaymentWap({
    appid: ' wxd678efh567hg6787',
    timeStamp: '1510219550',
    nonceStr: '73aq1gpux9m95ezf4odpxmp1dm12u1op',
    package: 'prepay_id= wx20161110163838f231619da20804912345’,
    signType: 'MD5',
    paySign: 'A50BDD55DA6A2A4665BBED1608CC53E2',
    prepay_id: wx20161110163838f231619da20804912345’,
    complete:function(res){   // 此处只是接口调用完成，并非支付成功
        showComfirmDialog()  // 弹窗让用户确认支付是否成功，并请求后台确认。
    }
})
}

五、登录接口

目前QB暂不支持微信登录相关的wx.login、wx.checkSession接口。
wx.getUserInfo的返回值不包含登录相关的信息。
能获取到以下信息

{
    userInfo: 
    {
        nickName: 昵称,
        avatarUrl: 头像,
        gender: 性别,
        Province: 省份,
        city: 城市,
        country: 国家
    }
}

建议开发者先使用自有登录方案，例如手机号码+密码/验证码的方式。

六、分包加载

QB小程序支持分包加载，不过启动调试前需要将各子包一次性下载全。
下载子包方法如下：

下载代码，作为小程序的一个页面放到小程序代码中。
将该页面通过微信的分享转发出来（可通过微信PC开发者工具中的自定义编译条件直达到该页面）。
每次拉包前先在微信中打开该页面，点击“fetch sub packages”按钮，等待下载各子包完成，即可点击pull按钮进行拉包。

七、调起APP

QB小程序提供拉起APP能力，但是该能力目前不支持小程序直接通过api调用，需要用户点击小程序右上角菜单中的按钮方可拉起app，具体页面路径通过小程序回调返回。
样式如下图：

如需拉起app能力请按下文方法修改并提供一个apk或下载地址给对接人（happyhbchen）后台配置。

1、App侧

QB通过发送一个带有data uri的intent拉起app，该data uri由小程序传出，app开发者可通过在AndroidManifest.xml中给组件定义intent-filter拦截data uri对应的scheme来实现拉起和获取数据，如果没有指定对应的intent-filter，将默认拉起app首页。

<activity android:name=".LaunchByQbActivity" >
    <intent-filter>
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <data android:scheme="myapp"/>
    </intent-filter>
</activity>

2、小程序侧

拉起app的方式类似于分享，需要在Page中定义onQBLaunchApp函数，设置该页面拉起app传递的数据。此事件需要return一个Object。
返回的Object格式如下：

appParameter: string, 数据uri，该uri会作为intent的data传递给app，请与app开发者协商好具体的scheme以及数据格式。
success: function, 拉起app成功的回调。
fail: function, 拉起app失败的回调。
complete: function, 拉起app完成的回调

示例代码：
Page({
  onQBLaunchApp: function () {
    return {
      appParameter: 'myapp://main?key1=value1&key2=value2',
      success: function() {
        console.log('launch app successful');
      }
    };
  }
})