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

概述

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

产品层面要求：

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

用户操作层面：

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

申请一个插件

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

相关文档

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

开发环境配置

基本的插件开发文档详见： 【插件开发文档】 **开发模式：**插件开发模式 **基础库版本：**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 的限制，开发时无法获取到真实的页面数据，因此跳转到页面时显示如下效果，就证明能够正常访问。 

样式相关问题:

(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 中使用该组件。 

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

}

请求参数说明

装修体验版API

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

json

{

"service_id":123

}

【获取体验版二维码】

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

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

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

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