# Decoration and Marketing Services Plug-in Debugging Documentation
# Summary
WeChat Mini Store decoration marketing services are achieved through the way of plug-ins. The vendor should follow these guidelines to create the plug-in and complete the debugging.
# Product level requirements:
Open parts of the renovation: Home Page: The entire page Category Page: The entire page Coupon Renovation: Coupon coupon interface, you can pass the coupon interface coupons, and then the front page does not control the official, can be any decoration.
# User level:
After the user configures the decoration content in the third party background, the service provider's front end is exposed “Enable/Deactivate "ability, the Mini Store administrator will receive a template message in the" Mini Store assistant, "and the Mini Store administrator will clickConfirm Enable/to stop usingAfter that, the corresponding Mini Store will take effect in 5-10 minutes.
(The decoration service background must have the ability to disable the decoration)
The effect is as follows:
# Request a Plugin
Service providers need to apply for a plug-in and selectMini Store Plugin
(The Mini Store plug-in option is only visible to platform service providers that have already entered the service platform)
# Related Documents
[[Plugin Access Guide]](https://developers.weixin.qq.com/miniprogram/introduction/plugin.html#% E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91%E6%8E%A5%E5%85%A5%E6%B5%81%E7%A8%8B) [Service Platform Entry Guidelines] Third party platform platform application and online process
# Development Environment Configuration
The basic plug-in development documentation is available at: [Plugin Development Documentation] **Development Mode:**Plug-in development mode **Base Library Version:**2.12.2 And above
# Development Specifications:
**Introduction of Small Shop Plugin: The decoration plugin must be in the apagejson of the miniprogram, introduction of mini-shop-plugin,**To achieve the Mini Store page jump and use.
// app.json
"plugins": {
"hello-plugin": {
"version": "dev",
"provider": "wxAPPID"
},
"mini-shop-plugin": {
"version": "1.0.74",
"provider": "wx1234567890abcd",
}
}
Component names for fit-out plugins: includeHome, Category PageTwo parts, here must be in the pluginpluginThe profile of theplugin.jsonDo the following configuration: the home page and category page decoration components exposed for small shops to use.
// plugin.json
"publicComponents": {
"home-decoration": "pages/home/index",
"category-decoration":"pages/category/index"
}
# Note:
Here home page, category page decoration components must be named in accordance with the above rules, otherwise it can not be used normally. Namelyhome page:home-decoration,Category Page:category-decoration。
If there is no need to develop two kinds of decoration components: home page and classification page, the above configuration must also be carried out. The decoration component that is not used can develop an empty component (that is, the wxml of the component is set to empty) as space occupying.
Note: System Default Enabled Home + Category Page Two pages, If you only want to enable home page/Category Page One of these pages, Required in the renovation plug-in project plugin/index.js The following configuration is made in
module.exports = {
// Whether the configuration is enabled home page/Category Page Renovation
decorationPage: {
home:false, // Set false to not enable
category:true,
}
}
# Plugin Jump to Mini Store Page:
For example, due to the base library restrictions, the plug-in can not jump to other plug-ins through the js method, so the method is invalid, can also be used in the wxml The navigator component is used for the jump. For detailed documentation see: [Component Interface]
// JS Jumper Detail Page (Note: This method is temporarily unavailable.)
const productId = [Product ID] // Fill in the specific product id
wx.navigateTo({
url: 'plugin-private://wx34345ae5855f892d/pages/productDetail/productDetail?productId=${productId}',
})
// Wxml Jumper Details
<navigator url="'plugin-private://wx34345ae5855f892d/pages/productDetail/productDetail?productId=${productId}'" >
<view class='poster'>
<image class='poster-img' src="{{imgSrc}}" mode="aspectFill"></image>
</view>
</navigator>
Note: In plug-in development, there are appid restrictions on loading data when jumping to a small store page, and the real page data cannot be obtained at the time of development, so the following effect is shown when jumping to the page to prove that it can be accessed properly.
# Style related issues:
(1) Height of fitting components: Recommended to use scroll-view, Set the height: height: calc(100vh - px - 60px) Where navbarHeight distinguishes between Android and ios, The method is as follows:
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 format image background transparent display: Set manually in the css of this type of image background-color:transparent
# Decorating Plugin Preview
After the development of the home page and category page components of the decoration plug-in, if you need to preview the display effect of the decoration plug-in in the Mini Store, the following configuration is required:
In the miniprogram directory, create a new comp package folder, and create home page(home) and Category Page(category) Two Mini Program components. With the front page(home)For example, on the page. JSON file and use it in WXML.
// index.json
{
"component": true,
"usingComponents": {
"home-decoration":"plugin://hello-plugin/home-decoration"
}
}
// index.wxml
<home-decoration></home-decoration>
In apagejs of the miniprogram: Introduce the Mini Store plug-in and execute the initPluginDevMode method and isDecorationPlugin method.
//app.js
const miniShopPlugin = requirePlugin(初始值)
miniShopPlugin.initPluginDevMode(true)
miniShopPlugin.isDecorationPlugin(true)
App({
onLaunch: function () {}
})
In the miniprogram'sapp.jsonAdd a configuration item to the Mini Store plugingenericsImplementationAnd configure the address in the host Mini Program for the home page and category page decoration plug-in (that is, the new component address in the above miniprogram directory).
// app.json
"mini-shop-plugin": {
"version": "1.0.74",
"provider": "wx34345ae5855f892d",
"genericsImplementation": {
"home": {
"home-decoration": "comp/home/index",
"category-decoration": "comp/category/index"
}
}
}
After completing the above configuration, you can use the navigator component to jump to the homepage of the Mini Store in the pages of the miniprogram (plugin://mini-shop-plugin/Mini-shop) to preview the effect of the decoration plug-in in the Mini Store. The overall example effect can be referred to the code snippet:
// index.wxml
<navigator id="nav" url="plugin://mini-shop-plugin/mini-shop">Preview the effect of the plugin in the Mini Store</navigator>
# Related Application Notes:
Get appid: To get the appId of the current Mini Store using the plug-in at runtime, you can do this: [Access account information interface]
const accountInfo = wx.getAccountInfoSync()
const {miniProgram} = accountInfo
const {appId,envVersion,version} = miniProgram
Jump to Live Studio List
Jump Address:
plugin-private://wx34345ae5855f892d/pages/liveRooms/liveRooms
[Coupon API] [Product API] Interface Call Dxplaination http Request Method: POST https://api.weixin.qq.com/product/decoration/decoration_service Example of Request Parameters
{
"switch_status:
}
Return Package Example
json
{
"errcode": 0
}
Request Parameter Dxplaination
parameter | type | Is required | Introductions |
---|---|---|---|
switch_status | number | yes | 1 is on, 2 is off. |
# Decoration Experience API
Deployment Experience Interface Call Dxplaination Request Method: POST https://api.weixin.qq.com/product/decoration/decoration_service_experience
json
{
" service_id":123
}
[Get the experience version of the two-dimensional code]
Path Leave Blank Determine if the current environment is an experience version Note
All relevant personnel can open the experience version of the Mini Store.
Developers can use the JSAPI in the plug-in to determine the current running environment and provide a preview for buyers.
The demo version has no cache and will not affect the online version.