一. 前言

区别于传统H5网页，微信小程序无法直接操作dom，以数据绑定条件渲染页面元素。基于此，QuickGame小程序版SDK，以组件(components)形式提供标签，开发者可通过设置标签属性传递参数，通过绑定事件监听登录、支付回调

二. 微信小程序后台配置

1. 安全域名配置

由于QuickGame会使用网络通信，故添加SDK前，需通过微信小程序后台配置安全域名

配置入口如下图：

进入添加页面，在【request合法域名】处配置对应的域名。使用QuickGame在线SAAS版，直接填入：https://qkgamesdk.quickapi.net，部署版用户需填入部署版API地址，可联系

QuickSDK相关人员进行确认

三. 资源导入

将QuickGame资源包中 /components/QuickGame 复制至小程序工程对应路径下，若小程序没有components路径，则在小程序项目根目录下创建components

在项目主页面配置文件中注册组件，如项目主页面是index，则编辑index.json文件

        

"usingComponents": {
    "QGSDK_login":"/components/QuickGame/login",
    "QGSDK_pay":"/components/QuickGame/pay"
  }

四. 显示登录界面

组件名称：QGSDK_login

功能描述：呈现登录界面

使用说明：在不需显示登录界面时，可通过小程序条件渲染wx:if="false"隐藏此控件，需要显示时通过wx:if="true"装载此控件

属性说明：

属性	类型	默认值	必要性	说明
logo	bool	true	否	是否显示登录界面厂商logo
productcode	string	空	是	从SDK后台获取的接入参数productCode
channelcode	string	default	否	子包分包标识
fullscreen	bool	false	否	是否满屏显示，默认false 以弹框显示
host	string	空	否	在线SAAS版无需填写 部署版需填写部署版域名 可联系QuickSDK确认域名
removeunamelogin	bool	false	否	为true时将不显示用户名密码登录
bindloginsuccess	function	空	是	登录成功回调函数
bindlogincancel	function	空	是	取消登录界面回调 在玩家取消登录后 游戏应提供按钮使玩家再次调用登录
bindlogout	function	空	是	退出登录回调 游戏接受此回调后应退出游戏界面回到登录界面

登录成功事件：

通过bindloginsuccess绑定的监听函数可在用户完成登录后接收通知，通知数据为JS Object。字段含义如下：

字段	是否必有	说明
status	是	登录状态，登录成功为true  登录失败为true
uid	是	玩家唯一UID，游戏通过此UID绑定玩家角色
username	是	玩家用户名，游戏可记录此值 但关联角色需使用uid
isAdult	是	是否为成年人，大于等于18岁为true 小于18岁为false
token	是	客户端接受此值后，应使用此token和uid 调用SDK服务器接口进行fang'cuan'ga

取消登录事件：

通过bindlogincancel绑定的监听函数可在玩家点击关闭登录界面时触发，此时游戏应提供按钮使玩家再次唤起登录界面

退出登录事件：

通过bindlogout绑定的监听函数将在特定时机被触发，如未成年玩家已达到法定的游戏时长后，游戏在接受此通知后应退出游戏回到登录界面

调用示例：

<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" 
  ></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;

  },

五. 显示支付界面

组件名称：QGSDK_pay

功能描述：呈现支付中心 玩家可通过此页面选择微信支付或平台币支付

使用说明：在不需显示支付界面时，可通过小程序条件渲染wx:if="false"隐藏此控件，需要显示时通过wx:if="true"装载此控件

属性说明：

属性	类型	默认值	必要性	说明
cporderno	string	空	否	透传参数，游戏内部订单号，将在服务器支付回调中原样透传此值
subject	string	空	是	购买商品名称 如 元宝 钻石
desc	string	空	否	订单描述 如首充60钻石
goodsid	string	空	否	商品ID 可选 用于运营后台查询统计订单
amount	string	空	是	订单金额，单位元，最小0.01元
extrasparams	string	空	否	透传参数，可传递游戏发货时需要的相关信息 将在服务器通知中原样回传，核心数据请注意签名
userroleid	string	空	是	玩家角色ID
userrolename	string	空	是	玩家角色名称
serverid	string	空	是	玩家角色所在区服ID
servername	string	空	是	玩家角色所在区服名称
userlevel	string	空	是	玩家角色等级
bindpaycancel	function	空	是	支付失败回调函数 回调格式参加下文
bindpaysuccess	function	空	是	支付成功回调 回调格式内容参见下文

支付成功事件：

通过bindpaysuccess绑定的监听函数可在用户完成支付后接收通知，通知数据为JS Object。字段含义如下：

字段	是否必有	说明
status	是	支付状态，支付成功为true  未支付或支付失败为true
orderNo	是	SDK唯一订单号
orderAmount	是	单位元 订单金额
payAmount	是	单位元 扣除折扣代金券后实际支付金额

调用示例：

 <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" 
  ></QGSDK_pay>

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

onPayCancel:function(){
    console.log('接受取消支付回调');
    this.setData({wantPay:0});
  },

六. Demo工程下载

下载地址 https://www.quicksdk.com/download.html

七. 显示效果图

1. 登录界面显示效果

2. 支付页面显示效果