预览
体验地址：bytemall
话不多说，先上效果图，支持商品-->购物车-->支付-->售后，支持整个交易流程
前言
该文章主要讲述一下，该微信小程序商城中使用到的技术栈，Vant Weapp、BeautyWe、miniprogram-api-promise、交易组件等。基于这些知识，可以快速搭建一个商城小程序。
Vant Weapp
介绍
Vant 是有赞前端团队开源的移动端组件库，该项目使用到的是微信小程序版本。该组件库提供了商城开发中常用的几个业务组件，例如，商品卡片、提交订单栏、商品导航等，有需要的朋友可以自行查看。
使用
// 1. 安装
npm i @vant/weapp -S --production
// 2. 修改 app.json
将 app.json 中的 "style": "v2" 去除
// 3. 修改 project.config.json
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
}
}
// 4. 构建构建 npm 包
打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。
具体见官方文档：快速上手
miniprogram-api-promise
介绍
微信官方推荐的扩展微信小程序api的工具，主要用于API的Promise化。
示例: 代码
// 拓展前
wx.login({
success (res) {
// do something
}
})
// 拓展后
getApp().wxp.login().then(res => {
// do something
})
使用
// 1. 安装
npm install --save miniprogram-api-promise
// 2. 构建构建 npm 包
打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。
BeautyWe
介绍
BeautyWe 是一套专注于微信小程序的企业级开发范式，使用它可以让你的代码更加简洁，漂亮**。** 该项目目前使用到的主要是状态机插件，详细说明请看我的另一篇文章微信小程序app.onLaunch与page.onLoad异步问题。
使用
// 1. 安装
npm install --save beautywe
// 2. 构建构建 npm 包
打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。
交易组件
标准版交易组件
交易组件分为标准版和自定义版，本项目使用到的是标准版。此处不做详细说明，感兴趣的朋友可以前往官方文档，自行了解。
在小程序中调用该组件后，即可实现商品展示、下单购买、订单管理等完整交易能力。同时，商家也可在配套的管理后台进行商品、订单、营销活动等模块的管理。微信官方将持续升级以上功能。
交易组件功能
- 可在视频号、公众号等场景实现商品展示和带货等功能
- 小程序直接具备完整交易能力和，并获官方配套管理后台持续升级
- 订单自动同步至“小程序订单”功能中展示
标准版交易组件目前包含两个部分：
- 购物组件：包括商品详情页、购物袋、商品结算到购买完成的完整链路页面及功能。
- 订单组件：包括全部订单、待付款、待收货、退款/售后、订单详情页、售后详情页及功能。
正是基于交易组件强大的特性，本项目的购物流程才得以那么迅速的搭建起来。
使用
// 1. 申请使用组件
在小程序后台， 功能 -> 交易组件，申请开通
// 2. 在项目app.json中加入插件
"plugins": {
"mini-shop-plugin": {
"version": "latest",
"provider": "wx34345ae5855f892d"
}
},
// 3. app.js内初始化交易组件
const miniShopPlugin = requirePlugin('mini-shop-plugin');
App({
onLaunch() {
miniShopPlugin.initApp(this, wx);
},
});
感想
自从微信对企业、个体、个人三种开店类型全量开放微信小商店后，一键生成一个属于自己的微信小商店就已经变成了现实。不过这种一键生成的小商店存在模版单一，缺乏个性化的问题，所以微信又推出了交易组件，以满足一些商家需要定制化和个性化的需求。基于此，势必会对当下整体微信小程序商城开发的市场造成冲击。
