开放平台
取消
中文
中文
EN
取消
  • 服务商平台

    • # 装修与营销服务插件调试文档

    # 概述

    微信小商店装修营销服务是通过通过插件的方式实现。服务商需按照一下指引创建插件并完成调试。

    # 产品层面要求：

    装修开放部分： 首页： 整个页面 分类页： 整个页面 优惠券装修： 优惠券制券接口，可以通过制券接口制券，然后前端页面官方不控制，可任意装修。

    # 用户操作层面：

    用户在第三方后台配置装修内容后，服务商前端暴露“启用/停用”的能力，小商店管理员将会在“小商店助手”中收到一条模板消息，小商店管理员点击确认启用/停用后，对应的小商店将会在5-10分钟内生效。 （装修服务后台必须具备停用装修的能力） 效果如下： img

    # 申请一个插件

    服务商需先申请一个插件并选择小商店插件 （小商店插件选项只对已经入驻了服务平台的平台型服务商可见） img

    # 相关文档

    【插件接入指南】 【服务平台入驻指引】 【第三方平台平台型的申请和上线流程】

    # 开发环境配置

    基本的插件开发文档详见： 【插件开发文档】 **开发模式：**插件开发模式 **基础库版本：**2.12.2 及以上

    # 开发规范：

    **引入小商店插件：装修插件必须在miniprogram的app.json中，引入小商店插件mini-shop-plugin，**以实现对小商店页面的跳转和使用。

    // app.json

"plugins": {

"hello-plugin": {

"version": "dev",

"provider": "wxAPPID"

},

"mini-shop-plugin": {

"version": "1.0.74",

"provider": "wx1234567890abcd",

}

}

    装修插件的组件命名：包括首页、分类页两部分，这里必须在插件plugin的配置文件plugin.json中做如下配置：将首页和分类页装修组件暴露出来供小商店使用。

    // plugin.json

"publicComponents": {

"home-decoration": "pages/home/index",

"category-decoration":"pages/category/index"

}

    # 注意：

    这里首页、分类页装修组件的命名必须按照上述规则，否则无法正常使用。即首页：home-decoration，分类页：category-decoration。

    如果并不需要开发首页、分类页两种装修组件，也必须进行上述配置，不使用的装修组件可以开发一个空组件（即组件的wxml设为空）作为占位。

    注意: 系统默认启用 首页+分类页 两个装修页面, 如果只想启用 首页/分类页 其中一个页面, 需在装修插件项目的 plugin/index.js 中进行如下配置：

    module.exports = {

// 配置是否启用 首页/分类页 装修

decorationPage: {

home:false, // 设为false为不启用

category:true,

}

}

    # 插件跳转到小商店页面：

    以小商店商详页为例，由于基础库限制,插件不能通过js方法跳转到其他插件,所以该方法无效，也可以在 wxml 中利用navigator组件进行跳转。详细说明文档见： 【组件接口】

    // js跳转商详页 (注意: 该方法暂时无效!)

const productId = [商品id] // 填写具体的商品Id

wx.navigateTo({

url: 'plugin-private://wx34345ae5855f892d/pages/productDetail/productDetail?productId=${productId}',

});

// wxml跳转商详页

<navigator url="'plugin-private://wx34345ae5855f892d/pages/productDetail/productDetail?productId=${productId}'" >

<view class='poster'>

<image class='poster-img' src="{{imgSrc}}" mode="aspectFill"></image>

</view>

</navigator>

    注意： 在插件开发时，跳转到小商店页面时加载数据有appid的限制，开发时无法获取到真实的页面数据，因此跳转到页面时显示如下效果，就证明能够正常访问。 img

    # 样式相关问题:

    (1) 装修组件高度: 推荐使用scroll-view, 设置高度: height: calc(100vh - px - 60px） 其中navbarHeight区分安卓和 ios, 具体获取方法如下:

    const _this = this;
wx.getSystemInfo({
        success(res) {
          const ios = !!(res.system.toLowerCase().search('ios') + 1);
          _this.setData({
            navbarHeight: res.statusBarHeight + (ios ? 44 : 48),
          });
        },
      });

    (2) png格式图片背景透明显示: 在该类图片的css中手动设置 background-color:transparent

    # 装修插件预览

    开发完成装修插件的首页、分类页组件后，如果需要预览装修插件在小商店中的显示效果，需要进行如下配置： 在miniprogram目录下，新建一个comp文件夹，在其中新建 首页(home) 和 分类页(category) 两个小程序组件。以首页(home)为例，在页面的 json文件中引入对应的装修插件组件，并在wxml中使用该组件。 img

    // index.json

{

"component": true,

"usingComponents": {

"home-decoration":"plugin://hello-plugin/home-decoration"

}

}

// index.wxml

<home-decoration></home-decoration>

    在miniprogram的app.js中：引入小商店插件，并执行initPluginDevMode方法和isDecorationPlugin方法。

    
//app.js

const miniShopPlugin = requirePlugin('mini-shop-plugin');

miniShopPlugin.initPluginDevMode(true);

miniShopPlugin.isDecorationPlugin(true);

App({

onLaunch: function () {}

})

    在miniprogram的app.json中：对小商店插件新增配置项genericsImplementation，并分别为首页、分类页装修插件配置宿主小程序中的地址（即上述miniprogram目录下新建的组件地址）。

    // app.json

"mini-shop-plugin": {

"version": "1.0.74",

"provider": "wx34345ae5855f892d",

"genericsImplementation": {

"home": {

"home-decoration": "comp/home/index",

"category-decoration": "comp/category/index"

}

}

}

    完成上述配置后，可以在miniprogram的pages中，利用navigator组件跳转到小商店的首页（plugin://mini-shop-plugin/mini-shop），以预览装修插件在小商店中的效果。整体的示例效果可以参考代码片段：

    // index.wxml

<navigator id="nav" url="plugin://mini-shop-plugin/mini-shop">预览插件在小商店的效果</navigator>

    # 相关应用说明：

    获取appid:想要在运行时，获取使用插件的当前小商店的appId，可以使用如下方法： 【获取账号信息接口】

    const accountInfo = wx.getAccountInfoSync();

const {miniProgram} = accountInfo;

const {appId,envVersion,version} = miniProgram;

    跳转到直播间列表

    跳转地址：

plugin-private://wx34345ae5855f892d/pages/liveRooms/liveRooms

    【优惠券API】 【商品API】 接口调用说明 http 请求方式：POST https://api.weixin.qq.com/product/decoration/decoration_service 请求参数示例

    {

"switch_status":1

}

    回包示例

    json

{

"errcode":0

}

    请求参数说明

    参数 类型 是否必填 说明
    switch_status number 是 1代表启用，2代表停用

    # 装修体验版API

    部署体验版 接口调用说明 http请求方式：POST https://api.weixin.qq.com/product/decoration/decoration_service_experience

    json

{

"service_id":123

}

    【获取体验版二维码】

    • path留空 【判断当前环境是否为体验版】 注意事项

    • 默认小商店所有相关人员均可打开体验版小商店。

    • 开发者可以在插件里通过jsapi判断当前运行环境，来为买家提供预览。

    • 体验版没有缓存，不会影响线上版本。