小程序接入

一、 需要提供的平台信息

1、 小程序appid

2、 小程序登录页路径登录页配置后用户登录店铺，无登录态情况下会跳转到配置的登录链接页面，请确保链接的正确性。

3、 业务域名校验文件名称

4、 业务域名校验文件内容

5、 小程序资质类目截图(受政策影响，除「视频」以及「直播」功能可使用小鹅通插件服务外，电子书、实物商品、作业本、打卡、圈子、错题本功能需小程序具备文娱-小说、商家自营、社交-论坛资质，请上传您的类目截图，确保您已具备相关资质，若您未能具备上述资，将无法使用类目对应的功能；)

二、 配置业务域名及服务器域名

小鹅通侧完成配置后，需要接入方配置小程序的业务域名及服务器域名。

1、域名配置信息

业务域名:

// 下方为商家店铺appId域名
https://{{appid}}.h5.xiaoeknow.com
https://iframe.xiaoeknow.com
https://prvsh.myqcloud.com
https://wechatapppro-1252524126.cos.ap-shanghai.myqcloud.com
https://static-resource.xiaoeknow.com

request合法域名:

https://1252524126.vod2.myqcloud.com
https://200026219.vod.myqcloud.com
https://5060.liveplay.myqcloud.com
https://522ff1e0vodcq1252524126-10022853.cos.ap-chongqing.myqcloud.com
https://app.xiaoe-tech.com
https://b-vod-hw-k.xiaoeknow.com
https://b-vod.hw-cdn.xiaoeknow.com
https://c-vod-hw-k.xiaoeknow.com
https://c-vod.hw-cdn.xiaoeknow.com
https://e33d04fdvodgzp1252524126-10022853.cos.ap-guangzhou-2.myqcloud.com
https://jsreport.xiaoe-tech.com
https://learnreport.xiaoeknow.com
https://liveplay.xiaoeknow.com
https://pic.tim.qq.com
https://report.h5.xeknow.com
https://sensors.xeknow.com
https://training-app.xiaoeknow.com
https://vod2.qcloud.com
https://webim.tim.qq.com
https://wechatappdev-1252524126.file.myqcloud.com
https://wechatavator-1252524126.file.myqcloud.com
https://wxresource-1252524126.file.myqcloud.com
https://learnreport.h5.xed.plus  
https://learnreport-backup1.xiaoeknow.com  
https://iframe.xiaoeknow.com  
https://wechatapppro-1252524126.file.myqcloud.com  
https://learnreport-backup2.xiaoeknow.com
https://vod.volcengineapi.com;
https://mcs.zijieapi.com;
https://tob-upload-x.volcvod.com;
https://tob-upload-y.volcvod.com;
https://tob-upload-x-d.volcvod.com;
https://tob-upload-y-d.volcvod.com;
https://vod2.qcloud.com;
https://vodreport.qcloud.com;
https://logreport.xiaoeknow.com;
https://quanzi-cdn.xiaoeknow.com;
https://quanzi-1252524126.file.myqcloud.com;
https://quanzi-1252524126.cos.ap-shanghai.myqcloud.com;
https://quanzi-1252524126.accelerate.myqcloud.com;
https://hw-upload.test.xiaoeknow.com;
https://hw-upload.xiaoeknow.com;
https://obs.cn-north-4.myhuaweicloud.com;
https://vod.cn-north-4.myhuaweicloud.com;
https://wechatapppro-1252524126.cdn.xiaoeknow.com
// 下方为商家店铺appId域名
https://{{appId}}.h5.xiaoeknow.com

uploadFile合法域名：

https://522ff1e0vodcq1252524126-10022853.cos.ap-chongqing.myqcloud.com
https://app.xiaoe-tech.com
https://e33d04fdvodgzp1252524126-10022853.cos.ap-guangzhou-2.myqcloud.com
https://file.xiaoe-tech.com
https://pic.tim.qq.com
https://sh.file.myqcloud.com
https://vod2.qcloud.com
https://webim.tim.qq.com
https://wechatappdev-10011692.file.myqcloud.com
https://tob-upload-x.volcvod.com;
https://tob-upload-y.volcvod.com;
https://tob-upload-x-d.volcvod.com;
https://tob-upload-y-d.volcvod.com;
https://vod2.qcloud.com;
https://vodreport.qcloud.com;
https://quanzi-cdn.xiaoeknow.com;
https://quanzi-1252524126.file.myqcloud.com;
https://quanzi-1252524126.cos.ap-shanghai.myqcloud.com;
https://quanzi-1252524126.accelerate.myqcloud.com;
https://hw-upload.test.xiaoeknow.com;
https://hw-upload.xiaoeknow.com;
https://obs.cn-north-4.myhuaweicloud.com;
https://vod.cn-north-4.myhuaweicloud.com;

// 下方为商家店铺appId域名
https://{{appId}}.h5.xiaoeknow.com

downloadFile合法域名：

https://1252524126.vod2.myqcloud.com
https://200026219.vod.myqcloud.com
https://app.xiaoe-tech.com
https://download-vod-hw.xiaoeknow.com
https://download-vod.xiaoeknow.com
https://pic.tim.qq.com
https://sh.file.myqcloud.com
https://webim.tim.qq.com
https://wechatappdev-10011692.cos.xiaoeknow.com
https://wechatappdev-10011692.file.myqcloud.com
https://wechatappdev-1252524126.file.myqcloud.com
https://wechatapppro-1252524126.file.myqcloud.com
https://wechatavator-1252524126.file.myqcloud.com
https://wxresource-1252524126.file.myqcloud.com
https://v-l1-vod.xiaoeknow.com  
https://b-encrypt-k-vod.xiaoeknow.com  
https://c-vod.hw-cdn.xiaoeknow.com  
https://cover-v-vod.xiaoeknow.com  
https://b-vod-hw-k.xiaoeknow.com  
https://v-vod-o.xiaoeknow.com  
https://big-class-vod-tx.xiaoeknow.com  
https://t-vod.h5.xed.plus  
https://v-tos-k.h5.xet.tech  
https://v-tos-bigclass.xiaoeknow.com  
https://o-vod.xiaoe-tech.com  
https://b-vod.hw-cdn.xiaoeknow.com  
https://v-vod-k.xiaoeknow.com  
https://encrypt-k-vod.xet.tech  
https://v-tos-cover.xiaoeknow.com  
https://h-vod.h5.xed.plus  
https://o-vod-hw-k.xiaoeknow.com  
https://btt-vod.xiaoeknow.com  
https://v-vod-k.h5.xed.plus  
https://live-playback-video-tx.xiaoeknow.com  
https://download-v-vod.xiaoeknow.com  
https://h-l1-vod.xiaoeknow.com  
https://subtitle-cdn.xiaoeknow.com  
https://vth-vod.h5.xed.plus  
https://encrypt-vod.xiaoeknow.com  
https://v-tos-dload.xiaoeknow.com  
https://v-bg-vod.xiaoeknow.com  
https://v-tos-k.xiaoeknow.com  
https://htv-vod.h5.xed.plus  
https://c-vod-hw-k.xiaoeknow.com  
https://h-bg-vod.xiaoeknow.com  
https://v-tos-in.xiaoeknow.com  
https://v-tos-l1.xiaoeknow.com
https://quanzi-1252524126.cdn.xiaoeknow.com
https://wechatapppro-1252524126.cdn.xiaoeknow.com
// 下方为商家店铺appId域名
https://{{appId}}.h5.xiaoeknow.com
2、操作步骤：

1、 登录微信公众平台

2、 找到左侧导航栏的开发->开发管理->开发设置

3、 找到下图业务域名->点击修改，配置准备好的四个域名，添加保存

4、 找到服务器域名->点击修改，在request合法域名、uploadFile合法域名、downloadFile合法域名中添加提供的域名配置

三、 小程序开发

1、 登录&&获取用户id

获取登录态链接时，需要传入小鹅通用户的用户id，接入方可以通过查询用户信息接口查询现有用户id。对于新用户，可以调用注册新用户接口获取用户id。

相关接口：

查询单个用户信息 · 小鹅云

注册新用户 · 小鹅云

2、 web-view组件开发

web-view 是小程序内承载小鹅通内容的容器，为了保障用户使用时的体验，建议小程序接入时，将访问的目标页传给后端服务器，后端服务器通过小鹅3API获取登录链接，小程序web-view直接打开登录链接，该链接会给当前传入的用户种上登录态，并重定向至访问的目标页。

此处需要后端封装登录链接接口：

获取登录鉴权链接

●请求方式: POST

●请求url: https://api.xiaoe-tech.com/xe.login.url/1.0.0

●频率限制：10秒10000次

请求参数

参数 必选 类型 说明
access_token 是 string 获取access_token
user_id 是 string 用户id
data.redirect_uri 否 string 登录成功后跳转的目标url
data.login_type 是 int 登录类型：1:pc 2:h5 3:App 4:小程序
data.extra_info 是 array 补充信息
data.extra_info.wx_app_id 是 string 小程序appid
ddata.extra_info.wx_open_id 是 string 用户的openid

请求参数实例

{
    "app_id": "appxxxxxxxxxxxxxx",
    "user id": "U_644256d170088_XXXXXXXXXX",
    "data": {
        "login_type": 4,
        "redirect_uri": "https://your_redirect_url",
        "extra_info": {
            "wx_app_id": "wxxxxxxxxxxxxxxxx",
            "wx_open_id": "xxxxxxxxxxxxx"
        }
    }
}

注意事项：

传入的redirect_uri参数，必须带上 app_env_type=mini_program_wechat_sdk

返回响应

参数 类型 说明
code int 状态码，0表示成功，其他错误码见全局返回码
msg string 错误信息提示
data array 数据
data.login_url string 登录url，有效期为1分钟
data.permission_denied_url string 店铺无SDK权益包权限跳转链接

相关demo如下：

<template>
    <view class="content">
        <web-view :src="url"></web-view>
    </view>
</template>

<script>
import { globalData } from "../../utils/config";
import { loginApi} from "../../utils/api/mainApi";
    export default {
        data() {
            return {
                url: ''            
            }
        },
        onLoad(e) {
            // 如果进入当前页面是从登录页面跳转进来，则不需要重新登录
           decodeURIComponent(e.urlData) !== 'undefined'?this.url = decodeURIComponent(e.urlData):this.getLoginUrlData();    
         },
         methods: {
            getLoginUrlData(){
              /**
             * @description: 登录接口
             * @param {*} app_id    店铺appid
             * @param {*} xe_user_id   用户id
             * @param {*} redirect_uri   需要跳转的店铺链接
             * @param {*} login_type   登录类型：1:pc 2:h5 3:App 4:小程序
             */
                loginApi({
                   app_id: globalData.grayId,
                   xe_user_id: globalData.xe_user_id,
                   redirect_uri:`${globalData.BASE_URL}?app_env_type=mini_program_wechat_sdk`,
                }).then((dataApi)=>{
                    const {data, code} = dataApi
                    if(code === 0){ 
                        this.url = `${data.login_url}&app_env_type=mini_program_wechat_sdk`;
                    }
                }).catch(()=>{})
            }
         }   
    }
</script>

3、 分享能力接入

小程序如需要接入微信分享功能,可以在web-view页面添加'onShareAppMessage'方法,通过入参'options'的’webViewUrl‘参数，可以获取到当前小程序页面webView的url,将获取到的url给到分享路径中。

<template>
    <view class="">
        <web-view :src="url"> </web-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            //商家自己设置跳转的店铺链接
            url: 'https://XXX.XXX.com?app_env_type=mini_program_wechat_sdk'
        };
    },
    onLoad(e) {
        if (e.urlData) {
            this.url = decodeURIComponent(e.urlData);
        }
    },
    //点击分享触发的方法
    onShareAppMessage(options) {
        const shareUrl = this.addAppEnvTypeParam(options.webViewUrl);
        return {
            //分享标题，商家可自定义
            title: '自定义分享标题',
            //分享路径，`pages/webViewIndex/index`为当前页面路径，商家可根据自己的当前页面路径自行修改
            path: `pages/webViewIndex/index?urlData=${shareUrl}`,
            //分享封面图的url，商家可自定义
            imageUrl: ''
        };
    },
    methods: {
        /**
         * @description: 给链接添加app_env_type参数
         * @param {*} url 分享链接
         * @return {*} 添加了分享app_env_type参数的链接
         */
        addAppEnvTypeParam(url) {
            // 如果链接包含app_env_type=mini_program_wechat_sdk，则直接返回
            const regex = /[?&]app_env_type=mini_program_wechat_sdk/;
            if (regex.test(url)) {
                return encodeURIComponent(url);
            }
            // 如果不包含，则返回添加app_env_type=mini_program_wechat_sdk的链接
            const separator = url.includes('?') ? '&' : '?';
            const newUrl = `${url}${separator}app_env_type=mini_program_wechat_sdk`;
            // 调用`encodeURIComponent`方法是为了防止丢参
            return encodeURIComponent(newUrl);
        }
    }
};
</script>

4、 登录页兼容开发

目前小鹅通h5的登录态有效期为24小时，当用户登录态失效时，小鹅通服务器会将用户请求拦截，并跳转至接入方配置的小程序原生登录页，因此需要接入方在登录页做好兼容逻辑。

登录态失效时，小鹅通会通过以下方法跳转小程序原生页，并携带redirect_uri参数以及app_env_type=mini_program_wechat_sdk 的标识

wx.miniProgram.redirectTo({
    url: "/pages/login_path?redirect_uri=encodeURIComponent(target_url)"
});

//代码如下：
<template>
    <view class="content">
        <view>
            <text class="title"></text>
        </view>
    </view>
</template>

<script>
import { loginApi} from "../../utils/api/mainApi";
import { globalData } from "../../utils/config";

    export default {
        data() {
            return {
                title: '登录空白页跳转',
                redirect_uri: `${globalData.BASE_URL}?app_env_type=mini_program_wechat_sdk`
            }
        },
        onLoad(opt) {
          if (opt.redirect_uri) {
            this.redirect_uri = decodeURIComponent(opt.redirect_uri)
          }
           this.getLoginUrlData()
        },
        methods: {
            getLoginUrlData(){
                /**
             * @description: 登录接口
             * @param {*} app_id    店铺appid
             * @param {*} xe_user_id   用户id
             * @param {*} redirect_uri   需要跳转的店铺链 接
             */
                loginApi({
                   app_id: globalData.grayId,
                   xe_user_id: globalData.xe_user_id,
                   redirect_uri: this.redirect_uri
               }).then((dataApi)=>{
                    const {data, code} = dataApi
                    if(code === 0){ 
                        let url = `/pages/webViewIndex/index?urlData=${encodeURIComponent(data.login_url)}`
                        wx.redirectTo({
                            url: url
                        })
                    }
                }).catch(()=>{})
            }
        }
    }
</script>

参考代码demowx_miniprogram_sdk-master.zip

5、 退出登录

小程序如有支持用户切换登录的场景，需要实现退出登录的场景，可以调用下方接口实现退出登录

退出登录

●请求方式: POST

●请求url: https://api.xiaoe-tech.com/xe.websdk.account.logout/1.0.0

●频率限制：10秒3000次

请求参数

参数 必选 类型 说明 备注
access_token 是 string 专属token xxxxxxxx
user_id 是 string 用户id ...

响应参数

参数 类型 描述
code int 状态码，0表示成功，其他错误码见全局返回码 · 小鹅云
msg string 错误信息提示
data array 数据

示例

请求示例

{
    "access_token":"xxxxxxxxxx",
    "user_id":"xxxxxxxxxx"
}

响应示例

{
    "code": 0,
    "msg": "",
    "data": [
        "sdk logout success"
    ]
}

results matching ""

    No results matching ""