Taro实现商家券与微信券包打通

已和后端人员亲测,但最后需求未出,暂停了
亲测过程拿出来,希望给大家带来方便。

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.接下来的用法和放入主包的一致

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值