文档中心 | 一键联接，全心服务

更新日期：2022年 10月 11日QuickGame（微信小程序）客户端接入文档

<h3 style="font-family:微软雅黑, "margin:0px;padding:0px;color:#323232;white-space:normal;background-color:#FFFFFF;"> 一. 前言 </h3> 区别于传统H5网页，微信小程序无法直接操作dom，以数据绑定条件渲染页面元素。基于此，QuickGame小程序版SDK，以组件(components)形式提供标签，开发者可通过设置标签属性传递参数，通过绑定事件监听登录、支付回调 <h3 style="white-space:normal;font-family:微软雅黑, "margin:0px;padding:0px;color:#323232;background-color:#FFFFFF;"> 二. 微信小程序后台配置 </h3> 1. 安全域名配置 由于QuickGame会使用网络通信，故添加SDK前，需通过微信小程序后台配置安全域名 配置入口如下图： <img src="https://staticsite.quickapi.net/data/newFiles/20221011/20221011103433oLH0654.png" alt="" /> 进入添加页面，在【request合法域名】处配置对应的域名。使用QuickGame在线SAAS版，直接填入：https://qkgamesdk.quickapi.net，部署版用户需填入部署版API地址，可联系 QuickSDK相关人员进行确认 <img src="https://staticsite.quickapi.net/data/newFiles/20221011/20221011103501002v639.png" alt="" /> <h3> 三. 资源导入 </h3> 将QuickGame资源包中 /components/QuickGame 复制至小程序工程对应路径下，若小程序没有components路径，则在小程序项目根目录下创建components 在项目主页面配置文件中注册组件，如项目主页面是index，则编辑index.json文件          <pre class="brush:js;toolbar:false">"usingComponents": { "QGSDK_login":"/components/QuickGame/login", "QGSDK_pay":"/components/QuickGame/pay" }</pre> <h3> 四. 显示登录界面 </h3> 组件名称：QGSDK_login 功能描述：呈现登录界面 使用说明：在不需显示登录界面时，可通过小程序条件渲染wx:if="false"隐藏此控件，需要显示时通过wx:if="true"装载此控件 属性说明： <table style="width:100%;" cellpadding="2" cellspacing="0" border="1" bordercolor="#000000"> <tbody> <tr> <td> 属性 </td> <td> 类型 </td> <td> 默认值 </td> <td> 必要性 </td> <td> 说明 </td> </tr> <tr> <td> logo </td> <td> bool </td> <td> true </td> <td> 否 </td> <td> 是否显示登录界面厂商logo </td> </tr> <tr> <td> productcode </td> <td> string </td> <td> 空 </td> <td> 是 </td> <td> 从SDK后台获取的接入参数productCode </td> </tr> <tr> <td> channelcode </td> <td> string </td> <td> default </td> <td> 否 </td> <td> 子包分包标识 </td> </tr> <tr> <td> fullscreen </td> <td> bool </td> <td> false </td> <td> 否 </td> <td> 是否满屏显示，默认false 以弹框显示 </td> </tr> <tr> <td> host </td> <td> string </td> <td> 空 </td> <td> 否 </td> <td> 在线SAAS版无需填写部署版需填写部署版域名可联系QuickSDK确认域名 </td> </tr> <tr> <td> removeunamelogin </td> <td> bool </td> <td> false </td> <td> 否 </td> <td> 为true时将不显示用户名密码登录 </td> </tr> <tr> <td> bindloginsuccess </td> <td> function </td> <td> 空 </td> <td> 是 </td> <td> 登录成功回调函数 </td> </tr> <tr> <td> bindlogincancel </td> <td> function </td> <td> 空 </td> <td> 是 </td> <td> 取消登录界面回调在玩家取消登录后游戏应提供按钮使玩家再次调用登录 </td> </tr> <tr> <td> bindlogout </td> <td> function </td> <td> 空 </td> <td> 是 </td> <td> 退出登录回调游戏接受此回调后应退出游戏界面回到登录界面 </td> </tr> </tbody> </table> 登录成功事件： 通过bindloginsuccess绑定的监听函数可在用户完成登录后接收通知，通知数据为JS Object。字段含义如下： <table style="width:100%;" cellpadding="2" cellspacing="0" border="1" bordercolor="#000000"> <tbody> <tr> <td> 字段 </td> <td> 是否必有 </td> <td> 说明 </td> </tr> <tr> <td> status </td> <td> 是 </td> <td> 登录状态，登录成功为true  登录失败为true </td> </tr> <tr> <td> uid </td> <td> 是 </td> <td> 玩家唯一UID，游戏通过此UID绑定玩家角色 </td> </tr> <tr> <td> username </td> <td> 是 </td> <td> 玩家用户名，游戏可记录此值但关联角色需使用uid </td> </tr> <tr> <td> isAdult </td> <td> 是 </td> <td> 是否为成年人，大于等于18岁为true 小于18岁为false </td> </tr> <tr> <td> token </td> <td> 是 </td> <td> 客户端接受此值后，应使用此token和uid 调用SDK服务器接口进行fang'cuan'ga </td> </tr> </tbody> </table> 取消登录事件： 通过bindlogincancel绑定的监听函数可在玩家点击关闭登录界面时触发，此时游戏应提供按钮使玩家再次唤起登录界面 退出登录事件： 通过bindlogout绑定的监听函数将在特定时机被触发，如未成年玩家已达到法定的游戏时长后，游戏在接受此通知后应退出游戏回到登录界面 调用示例： <pre class="brush:js;toolbar:false">&lt;QGSDK_login wx:if="{{wantLogin == 1}}" removeunamelogin="false" logo="true" host="http://sdkapi.demo.com" productcode="8cf0c4ea388c7d53435c1e361949f154" channelcode="banner1" bindloginsuccess="onLogin" bindlogincancel="onCancel" bindlogout="onLogout" fullscreen="true" >&lt;/QGSDK_login> onLogout:function(){ wx.showModal({ title:'注销通知', content:'接收到SDK发出的注销回调', }) this.setData({userInfo:null}); }, onLogin:function(data){ console.log("login sucess"); wx.showToast({ title: '登录成功', icon:'success', }) var returnObject = data.detail; console.log(returnObject); if(returnObject.status){ this.setData({userInfo:returnObject.data}); } this.setData({wantLogin:0}); //游戏应将token和uid发往游戏服务器游戏服务器调用SDK服务器验证接口确保uid token通过验证未被篡改 var uid = returnObject.data.uid; var token = returnObject.data.token; },</pre> <h3> 五. 显示支付界面 </h3> 组件名称：QGSDK_pay 功能描述：呈现支付中心玩家可通过此页面选择微信支付或平台币支付 使用说明：在不需显示支付界面时，可通过小程序条件渲染wx:if="false"隐藏此控件，需要显示时通过wx:if="true"装载此控件 属性说明： <table cellpadding="2" cellspacing="0" border="1" bordercolor="#000000" style="width:1285px;"> <tbody> <tr> <td> 属性 </td> <td> 类型 </td> <td> 默认值 </td> <td> 必要性 </td> <td> 说明 </td> </tr> <tr> <td> cporderno </td> <td> string </td> <td> 空 </td> <td> 否 </td> <td> 透传参数，游戏内部订单号，将在服务器支付回调中原样透传此值 </td> </tr> <tr> <td> subject </td> <td> string </td> <td> 空 </td> <td> 是 </td> <td> 购买商品名称如元宝钻石 </td> </tr> <tr> <td> desc </td> <td> string </td> <td> 空 </td> <td> 否 </td> <td> 订单描述如首充60钻石 </td> </tr> <tr> <td> goodsid </td> <td> string </td> <td> 空 </td> <td> 否 </td> <td> 商品ID 可选用于运营后台查询统计订单 </td> </tr> <tr> <td> amount </td> <td> string </td> <td> 空 </td> <td> 是 </td> <td> 订单金额，单位元，最小0.01元 </td> </tr> <tr> <td> extrasparams </td> <td> string </td> <td> 空 </td> <td> 否 </td> <td> 透传参数，可传递游戏发货时需要的相关信息将在服务器通知中原样回传，核心数据请注意签名 </td> </tr> <tr> <td> userroleid </td> <td> string </td> <td> 空 </td> <td> 是 </td> <td> 玩家角色ID </td> </tr> <tr> <td> userrolename </td> <td> string </td> <td> 空 </td> <td> 是 </td> <td> 玩家角色名称 </td> </tr> <tr> <td> serverid </td> <td> string </td> <td> 空 </td> <td> 是 </td> <td> 玩家角色所在区服ID </td> </tr> <tr> <td> servername </td> <td> string </td> <td> 空 </td> <td> 是 </td> <td> 玩家角色所在区服名称 </td> </tr> <tr> <td> userlevel </td> <td> string </td> <td> 空 </td> <td> 是 </td> <td> 玩家角色等级 </td> </tr> <tr> <td> bindpaycancel </td> <td> function </td> <td> 空 </td> <td> 是 </td> <td> 支付失败回调函数回调格式参加下文 </td> </tr> <tr> <td> bindpaysuccess </td> <td> function </td> <td> 空 </td> <td> 是 </td> <td> 支付成功回调回调格式内容参见下文 </td> </tr> </tbody> </table> 支付成功事件： 通过bindpaysuccess绑定的监听函数可在用户完成支付后接收通知，通知数据为JS Object。字段含义如下： <table cellpadding="2" cellspacing="0" border="1" bordercolor="#000000" style="width:927px;"> <tbody> <tr> <td> 字段 </td> <td> 是否必有 </td> <td> 说明 </td> </tr> <tr> <td> status </td> <td> 是 </td> <td> 支付状态，支付成功为true  未支付或支付失败为true </td> </tr> <tr> <td> orderNo </td> <td> 是 </td> <td> SDK唯一订单号 </td> </tr> <tr> <td> orderAmount </td> <td> 是 </td> <td> 单位元订单金额 </td> </tr> <tr> <td> payAmount </td> <td> 是 </td> <td> 单位元扣除折扣代金券后实际支付金额 </td> </tr> </tbody> </table> 调用示例： <pre class="brush:html;toolbar:false"> &lt;QGSDK_pay wx:if="{{wantPay == 1}}" cporderno="1" userroleid="1" userrolename="天怒惊雷" serverid="1" servername="3区天府" userlevel="1" amount="1" subject="购买灵石" desc="一大袋钻石" goodsid="com.goods.1" extrasparams="extparams" bindpaycancel="onPayCancel" bindpaysuccess="onPaySuccess" >&lt;/QGSDK_pay></pre> <pre class="brush:js;toolbar:false">onPaySuccess:function(e){ console.log('接受成功支付回调'); this.setData({wantPay:0}); var returnObject = e.detail; console.log(returnObject); wx.showModal({ title:'支付成功回调', content:'接收到SDK支付成功通知，订单号:' + returnObject.data.orderNo + ' 订单金额：' + returnObject.data.orderAmount + ' 折后支付金额:'+ returnObject.data.payAmount, }) },</pre> <pre class="brush:js;toolbar:false">onPayCancel:function(){ console.log('接受取消支付回调'); this.setData({wantPay:0}); },</pre> <h3 style="white-space:normal;font-family:微软雅黑, "margin:0px;padding:0px;color:#323232;background-color:#FFFFFF;"> 六. Demo工程下载 </h3> 下载地址 <a href="https://www.quicksdk.com/download.html" target="_blank">https://www.quicksdk.com/download.html</a> <img src="https://staticsite.quickapi.net/data/newFiles/20221011/20221011112302La08334.png" alt="" /> <h3> 七. 显示效果图 </h3> 1. 登录界面显示效果 <img src="https://staticsite.quickapi.net/data/newFiles/20221011/20221011145451vrAb975.png" alt="" /><img src="https://staticsite.quickapi.net/data/newFiles/20221011/20221011145442GFBU615.png" alt="" style="white-space:normal;" /><img src="https://staticsite.quickapi.net/data/newFiles/20221011/20221011145526CmAI432.png" alt="" style="white-space:normal;" /> 2. 支付页面显示效果 <img src="https://staticsite.quickapi.net/data/newFiles/20221011/20221011145518OjLx366.png" alt="" /><img src="https://staticsite.quickapi.net/data/newFiles/20221011/20221011145511rUj8310.png" alt="" style="white-space:normal;" /><img src="https://staticsite.quickapi.net/data/newFiles/20221011/20221011145459aMoZ497.png" alt="" style="white-space:normal;" />