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

概述

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

申请一个插件

服务商需先申请一个插件并选择小商店插件

(小商店插件选项只对已经入驻了服务平台的平台型服务商可见)

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": "wx34345ae5855f892d",

}

}

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


// plugin.json

"publicComponents": {

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

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

}

注意:

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

  2. 如果并不需要开发首页、分类页两种装修组件,也必须进行上述配置,不使用的装修组件可以开发一个空组件(即组件的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) 首页底部tabbar高度:

a. 安卓: 装修首页组件高度设为 height: calc(100vh - 88px)

b. iOS: 由于iOS有底部安全区, 需要在设置height: calc(100vh - 88px) 的基础上, 兼容安全区高度:

padding-bottom: constant(safe-area-inset-bottom);

padding-bottom: env(safe-area-inset-bottom);

(2) png格式图片背景透明显示:

在该类图片的css中手动设置 background-color:transparent

4. 装修插件预览

开发完成装修插件的首页、分类页组件后,如果需要预览装修插件在小商店中的显示效果,需要进行如下配置:

在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】

【装修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判断当前运行环境,来为买家提供预览。

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

产品层面要求:

装修开放部分:

首页:整个页面

分类页:整个页面

优惠券装修:优惠券制券接口,可以通过制券接口制券,然后前端页面官方不控制,可任意装修。

用户操作层面

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

img