微信小程序接入視頻號能力可以通過標準版交易組件和自定義版交易組件來實現。其中標準版交易組件是微信官方開發的組件,小程序制作開發人員可以在自己的小程序中調用標準交易組件,使自己的小程序擁有商品購買及訂單展示的功能。同時標準版交易組件的管理后臺具備基礎的經營能力,如商品、訂單、物流、店鋪等的管理,開發者接入組件后便可直接使用。
微信小程序標準版交易組件接入視頻號教程
1、符合標準版交易組件類目準入要求的小程序(沒有小程序需先申請微信小程序)可以登錄微信公眾平臺官網,在左側菜單欄選擇標準版交易組件,點擊開通功能;
2、審核通過后,在微信公眾平臺左邊菜單欄點擊標準版交易組件,選擇去管理,進入到小商店后臺;
3、跳轉到小商店開店任務頁面后,填寫相關資料及上傳相關證件提交審核,完成開店任務;
4、需要在項目中引入【標準版交易組件】,編輯項目根目錄的app.json文件,示例代碼如下:
“plugins”: {
“mini-shop-plugin”: {
“version”: “1.1.0”, // 必須是標準版交易組件最新版本號,微信開發者工具調試時可獲取最新版本號(復制時請去掉注釋)
“provider”: “wx34345ae5855f892d” // 必須填標準版交易組件appid,不要修改(復制時請去掉注釋)
}
}
使用標準版交易組件的功能,需要進行組件初始化。編輯項目根目錄的app.js文件,調用組件提供的initApp方法,傳入指定參數。實例代碼如下:
const miniShopPlugin = requirePlugin(‘mini-shop-plugin’);
App({
onLaunch() {
miniShopPlugin.initApp(this, wx);
},
});
5、標準版交易組件代碼包配置引入后,即可直接通過鏈接地址跳轉到標準版交易組件頁面(即為店鋪內的頁面)。
示例如何跳轉到特定的商品詳情頁,代碼如下:
(1) 使用 navigator 組件跳轉進入商品詳情頁
index.js
const productId = [商品id] // 填寫具體的商品Id
index.wxml
<navigator url=”plugin-private://wx34345ae5855f892d/pages/productDetail/productDetail?productId={{productId}}”></navigator>
// 其中wx34345ae5855f892d是標準版交易組件appid不能修改
(2)使用 navigateTo 方法跳轉進入商品詳情頁
index.js
const productId = [商品id] // 填寫具體的商品Id
wx.navigateTo({
url: `plugin-private://wx34345ae5855f892d/pages/productDetail/productDetail?productId=${productId}`,
});
// 其中wx34345ae5855f892d是標準版交易組件appid不能修改`
示例效果如下:
6、完成開發后,提交代碼至微信團隊審核,審核通過后即可發布。