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

概述

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

产品层面要求:

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

用户操作层面:

用户在第三方后台配置装修内容后,服务商前端暴露“启用/停用”的能力,小商店管理员将会在“小商店助手”中收到一条模板消息,小商店管理员点击确认启用/停用后,对应的小商店将会在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判断当前运行环境,来为买家提供预览。

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