已和后端人员亲测,但最后需求未出,暂停了
亲测过程拿出来,希望给大家带来方便。
Taro 商家券与微信券包打通
———————————————————放入主包写法—————————————————————
1.租户添加微信支付券插件
请先登录对应的小程序公众后台,并添加插件链接:https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wxf3f436ba9bd4be7b&token=&lang=zh_CN
获取添加的AppId: wxf3f436ba9bd4be7b
2.在每个项目中的app.config.json中plugins下添加
wxf3f436ba9bd4be7b为插件id
"sendCoupon": {
"version": "1.3.2",
"provider": "wxf3f436ba9bd4be7b"
}
3.在package.json下都要添加上plugins
"build:weapp": "taro build --type weapp plugins",
"dev:weapp": "npm run build:weapp plugins -- --watch",
4.在需要引入插件的页面config中添加
usingComponents: {
'send-coupon': 'plugin://sendCoupon/send-coupon'
}
5.对应业务页面标签引用
getCoupon = (params: any) => {
console.log('_____-', params);
};
render(){
//以下模拟数据是我们后端的提供的,请找对应后端😄
const sendCouponParams = [
{
stock_id: '1298440000000022',
coupon_code: '2803249713000022',
out_request_no: '2803249713000022'
},
{
stock_id: '1298440000000022',
coupon_code: '2803249713000023',
out_request_no: '2803249713000023'
}
];
const sign =
'7DA1449513B8A8A1433F2B795F2C683C8CE3B72FEFB0B0B7324C6B089CFF693B';
const sendCouponMerchant = '10139844';
return (
<send-coupon
onSendcoupon={this.getCoupon}
onCustomevent={this.getCoupon}
onUserconfirm={this.getCoupon}
send_coupon_params={sendCouponParams}
sign={sign}
send_coupon_merchant={sendCouponMerchant}
suggest_immediate_use
>
<View>领券</View>
</send-coupon>
)
}
———————————————————放入子包写法—————————————————————
为什么放入子包?
答:当放入主包存在超包限制
解决过程中的其他问题?
答:只有一个分包使用插件的话,可以在分包使用,多个分包不能引用同一个插件。
注意点?
答:用到该组件的所有页面,都要放到引入这个插件的子包下
1.首先封装一个添加依赖.js
const path = require('path');
const { NODE_DEPLOY_ENV, NODE_TENANT_KEY, TARO_ENV } = process.env;
function splicingTenantEnvironment() {
return `tenant/${NODE_TENANT_KEY}/environment/${TARO_ENV}.${NODE_DEPLOY_ENV}.json`;
}
function getOutputRoot() {
return `dist/${NODE_TENANT_KEY}/${NODE_DEPLOY_ENV}/${TARO_ENV}`;
}
const pluginConfigMap = {
'live-player-plugin': {
version: '1.3.5',
provider: 'wx2b03c6e691cd7370'
},
'sendCoupon': {
version: '1.4.13',
provider: 'wxf3f436ba9bd4be7b'
}
};
/**
* 分包中增加依赖
* @param {*} config 小程序配置
* @param {string} packageRootPath 分包路径
* @param {string} pluginName 插件名
*/
function subPackagesAddPlugin(
config = {
pages: [],
subPackages: []
},
packageRootPath,
pluginName
) {
const { subPackages } = config;
const targetSubPage = subPackages.find(function (packageCof) {
return packageCof.root === packageRootPath;
});
if (!pluginConfigMap[pluginName]) {
throw Error(`未找到插件:${pluginName} 的配置`);
}
if (!targetSubPage) {
throw Error(`未找到分包:${packageRootPath}`);
}
if (!targetSubPage.plugins) {
targetSubPage.plugins = {};
}
targetSubPage.plugins[pluginName] = pluginConfigMap[pluginName];
}
/**
* 分包中移除依赖
* @param {*} config 小程序配置
* @param {string} packageRootPath 分包路径
* @param {string} pluginName 插件名
*/
function subPackagesRemovePlugin(
config = {
pages: [],
subPackages: []
},
packageRootPath,
pluginName
) {
const { subPackages } = config;
const targetSubPage = subPackages.find(function (packageCof) {
return packageCof.root === packageRootPath;
});
if (!pluginConfigMap[pluginName]) {
throw Error(`未找到插件:${pluginName} 的配置`);
}
if (!targetSubPage) {
throw Error(`未找到分包:${packageRootPath}`);
}
if (targetSubPage.plugins[pluginName] && targetSubPage.plugins) {
delete targetSubPage.plugins[pluginName];
}
}
module.exports = {
splicingTenantEnvironment,
copyPatterns,
getOutputRoot,
subPackagesAddPlugin,
subPackagesRemovePlugin
};
2.在config.js中添加
const { subPackagesAddPlugin } = require(‘./utils’);
subPackagesAddPlugin(config, ‘subpackages/send-coupon’, ‘sendCoupon’);
3.接下来的用法和放入主包的一致