# 小程序接入 ### 一、 需要提供的平台信息 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 ``` 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 // 下方为商家店铺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 // 下方为商家店铺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 // 下方为商家店铺appId域名 https://{{appId}}.h5.xiaoeknow.com ``` ###### 2、操作步骤： 1、 登录微信公众平台 2、 找到左侧导航栏的开发->开发管理->开发设置  3、 找到下图业务域名->点击修改，配置准备好的四个域名，添加保存  4、 找到服务器域名->点击修改，在request合法域名、uploadFile合法域名、downloadFile合法域名中添加提供的域名配置  ### 三、 小程序开发  #### 1、 登录&&获取用户id 获取登录态链接时，需要传入小鹅通用户的用户id，接入方可以通过查询用户信息接口查询现有用户id。对于新用户，可以调用注册新用户接口获取用户id。 相关接口： [查询单个用户信息 · 小鹅云](https://api-doc.xiaoe-tech.com/api_list/user/get_user_info.html) [注册新用户 · 小鹅云](https://api-doc.xiaoe-tech.com/api_list/user/register.html) #### 2、 web-view组件开发 web-view 是小程序内承载小鹅通内容的容器，为了保障用户使用时的体验，建议小程序接入时，将访问的目标页传给后端服务器，后端服务器通过小鹅3API获取登录链接，小程序web-view直接打开登录链接，该链接会给当前传入的用户种上登录态，并重定向至访问的目标页。 此处需要后端封装登录链接接口： 获取登录鉴权链接 ●请求方式: POST ●请求url: [https://api.xiaoe-tech.com/xe.login.url/1.0.0](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">{{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> ~~~ 参考代码demo[wx\_miniprogram\_sdk-master.zip](https://drive.weixin.qq.com/s?k=ALQAnAdhAAYDBId3ixAb0A_gbBAEI) #### 5、 退出登录 小程序如有支持用户切换登录的场景，需要实现退出登录的场景，可以调用下方接口实现退出登录 退出登录 ●请求方式: POST ●请求url: [https://api.xiaoe-tech.com/xe.websdk.account.logout/1.0.0](https://api.xiaoe-tech.com/xe.websdk.account.logout/1.0.0) ●频率限制：10秒3000次 请求参数 |参数|必选|类型|说明|备注| |:---- |:---|:----- |:----- |----| |access_token |是 |string |[专属token](https://api-doc.xiaoe-tech.com/api_list/get_access_token.html) |`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" ] } ~~~