{"id":80,"type":"Article","title":"X-SDK uniapp集成","slug":"x-sdk-uniapp","content":"# App中集成X-SDK\r\n\r\n目前浩客提供了[uts的插件](https://ext.dcloud.net.cn/plugin?name=howxm-xsdk)，用于在android 和 ios两个的嵌入使用。\r\n\r\n* **uniapp 2024-12-31之后将不再更新，后续会逐步下线**\r\n\r\n## **Step 1: 引入uts插件**\r\n\r\n``` js\r\nimport * as Howxm from \"@/uni_modules/howxm-xsdk\";\r\n```\r\n\r\n## **Step 2:初始化sdk**\r\n\r\n**注意： 由于uts插件在android和ios引入是一套代码，但在浩客平台上的应用是按系统分开的，所以需要在浩客后台创建两个应用，在代码中根据运行时不同平台来设置不同的appId和campaignId，** 参考下面代码：\r\n\r\n``` vue\r\ndata() {\r\n\t\treturn {\t\r\n\t\t\tappId: '',\r\n\t\t\tcampaignId: ''\r\n\t\t}\r\n\t},\r\nonReady() {\r\n\tconst platform = uni.getDeviceInfo().platform\r\n\t//需要在howxm.com后台分别创建两个应用，一个ios，一个android的，然后获取appId和campaignId\r\n\tif(platform === 'ios'){\r\n\t\tthis.appId = '自行获取'\r\n\t\tthis.campaignId = '自行获取'\r\n\t}else if(platform === 'android'){\r\n\t\tthis.appId = '自行获取'\r\n\t\tthis.campaignId = '自行获取'\r\n\t}\r\n\t\r\n\tHowxm.initializeSDK(this.appId, {\r\n\t\tsuccess: function() {\r\n\t\t},\r\n\t\tfail: function() {\r\n\t\t},\r\n\t})\r\n},\r\n\r\n```\r\n\r\n## **接口能力**\r\n\r\n## **1. identify 用户身份信息传递**\r\n\r\n```js\r\nHowxm.identify({\r\n\t\tuid: \"test_u002\", //用户uid，必填项\r\n\t\tname: \"haha\", //用户姓名，选填\r\n\t\temail: \"\",//邮箱，选填\r\n\t\tmobile: \"\",//手机号，选填\r\n\t\tattrs:{ //客户其他属性，选填\r\n\t\t\tu_vip: 10,\r\n\t\t\tu_login_at: new Date().toISOString()\r\n\t\t}\r\n\t})\r\n```\r\n\r\n## **2. checkOpen 弹出策略检查接口**\r\n```js\r\nHowxm.checkOpen(this.campaignId, \"当前用户的uid\", {\r\n\t\t\tsuccess: function() {\r\n\t\t\t},\r\n\t\t\tfail: function() {\r\n\t\t\t},\r\n\t\t})\r\n```\r\n\r\n## **3. open 弹出问卷接口**\r\n```js\r\nHowxm.open(this.campaignId, {\r\n\t\t\t\t\tuid: 'uid',\r\n\t\t\t\t\t//..其他属性\r\n\t\t\t\t\tattrs:{\r\n\t\t\t\t\t\tu_vip: 11,\r\n\t\t\t\t\t\tu_tag: '666'\r\n\t\t\t\t\t}\r\n\t\t\t\t}, { //open问卷的时候，还可以设置额外的参数\r\n\t\t\t\t\tvalue:{\r\n\t\t\t\t\t\t'c1':'001'\r\n\t\t\t\t\t}\r\n\t\t\t\t})\r\n```\r\n\r\n## **4. event 抛出事件接口**\r\n```js\r\nHowxm.event(\"eventCode\",{\r\n\t\t\t\t\tvalue:{ //触发事件时候的额外属性\r\n\t\t\t\t\t\t\"attr_1\":\"aaa\"\r\n\t\t\t\t\t}\r\n\t\t\t\t})\r\n```\r\n\r\n# 小程序中集成X-SDK\r\n\r\n参考文档：https://uniapp.dcloud.net.cn/tutorial/mp-weixin-plugin.html#import-mp-plugin\r\n浩客官方示例源码：https://github.com/howxm/howxm-uniapp-wechat-miniprogram-demo\r\n\r\n## **Step 1： 在 uniapp工程的manifest.json中，找到\"mp-weixin\"节点，新增：**\r\n\r\n```\r\n\"plugins\":{\r\n    \"howxm-plugin\": {\r\n        \"version\": \"2.0.1\",// 版本号建议使用 https://howxm.com/help/articles/x-sdk-miniapp 中最新版本\r\n         \"provider\": \"wx37a782d0c8107a02\"\r\n      }\r\n }  \r\n\r\n```\r\n## **Step 2：在项目中引用浩客小程序插件**\r\n\r\n**1. 在App.vue中，onShow的时候进行sdk的**[初始化](https://howxm.com/help/articles/x-sdk-miniapp#part-91cd03e08b757251)：\r\n\r\n``` javascript\r\nonShow: function() {\r\n\tconsole.log('App Show')\r\n\tconst howxm = requirePlugin('howxm-plugin') //引入浩客sdk\r\n\thowxm.debug(true) //开启debug模式\r\n\thowxm.init( //进行初始化\r\n\t  'your app id',\r\n\t  {},\r\n\t  function (data) {\r\n\t\tconsole.log(\"init success:\",data)\r\n\t  },\r\n\t  function (err) {\r\n\t\t// 失败回调\r\n\t  }\r\n\t)\r\n},\r\n```\r\n\r\n**！注意： 这里强烈建议放在 onShow 方法中，以保证SDK正常工作！**\r\n\r\n**2. 在需要使用到浩客插件的页面进行引入(以页面 `pages/index/index` 为例)：**\r\n\r\n- **2.1 在pages.json中新增：**\r\n\r\n```\r\n{\r\n  \"pages\": [\r\n    {\r\n      \"path\": \"pages/index/index\",\r\n      \"style\": {\r\n        \"mp-weixin\": {\r\n          \"usingComponents\": {\r\n            \"howxm-widget\": \"plugin://howxm-plugin/howxm-widget\"\r\n          }\r\n        }\r\n      }\r\n    }\r\n  ]\r\n}\r\n```\r\n\r\n- **2.2 在 `pages/index/index`页面中还需要手动添加如下代码：**\r\n```\r\n\u003chowxm-widget path=\"/pages/index/index\" /\u003e\r\n```\r\n\r\n放在最外层`\u003cview\u003e`下面即可，示例代码如下:\r\n\r\n```\r\n\u003ctemplate\u003e\r\n   \u003cview\u003e\r\n      \u003cview\u003e......\u003c/view\u003e\r\n      \u003chowxm-widget path=\"/pages/index/index\" /\u003e\r\n   \u003cview\u003e\r\n\u003c/template\u003e\r\n```\r\n\r\n**3. 其他api的调用参考[官方文档](https://howxm.com/help/articles/x-sdk-miniapp#part-baf4c9844982d544)即可**","featured":false,"category_id":null,"created_at":"2023-06-20T06:19:00.524Z","updated_at":"2025-06-16T08:17:22.093Z"}