今天开始使用 vue3 + uni-app 搭建一个电商购物的小程序（/s/1MfZFjdxvuY-OAzen_0qFGQ 提取码：resp ），因为文章会将项目的每一个地方代码的书写都会讲解到，所以本项目会分成好几篇文章进行讲解，我会在最后一篇文章中会将项目代码开源到我的GitHub上，大家可以自行去进行下载运行，希望本文章对有帮助的朋友们能多多关注本专栏，学习更多前端uni-app知识。然后开篇先简单介绍一下本项目用到的技术栈都有哪几个方面（阅读此次项目实践文章能够学习到的技术）：
uni-app：跨平台的应用开发框架，基于vue.js可以一套代码同时构建运行在多个平台。
pnpm：高性能、轻量级npm替代品，帮助开发人员更加高效地处理应用程序的依赖关系。
vue3：vue.js最新版本的用于构建用户界面的渐进式JavaScript框架。
typescript：JavaScript的超集，提供了静态类型检查，使得代码更加健壮。
pinia：vue3构建的Vuex替代品，具有响应式能力，提供非常简单的 API，进行状态管理。
uni-ui：基于vue.js和uni-app的前端UI组件库，开发人员可以快速地构建跨平台应用程序。
export
在创建 JavaScript 模块时，**export** 语句用于从模块中导出实时绑定的函数、对象或原始值，以便其他程序可以通过 import 语句使用它们。被导出的绑定值依然可以在本地进行修改。在使用 import 进行导入时，这些绑定值只能被导入模块所读取，但在 export 导出模块中对这些绑定值进行修改，所修改的值也会实时地更新。
无论您是否声明，导出的模块都处于严格模式。 export 语句不能用在嵌入式脚本中。
语法存在两种 exports 导出方式：
命名导出（每个模块包含任意数量）
默认导出（每个模块包含一个）
// 导出单个特性
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}
// 导出列表
export { name1, name2, …, nameN };
// 重命名导出
export { variable1 as name1, variable2 as name2, …, nameN };
// 解构导出并重命名
export const { name1, name2: bar } = o;
// 默认导出
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };
// 导出模块合集
export * from …; // does not set the default export
export * as name1 from …; // Draft ECMAScript® 2O21
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;
为什么选择uniapp？
经过考量，有以下几点原因
目前个人的技术栈偏向vue3，且uniapp很好的支持了vue3，学习成本低
方便为以后拓展其他平台小程序，甚至打造一个app做准备
有丰富的插件市场，无需重复造轮子
此前对uniapp接触的少，想借此机会深入了解一番uniapp
配置easycom
使用 npm 安装好 uni-ui 之后，需要配置 easycom 规则，让 npm 安装的组件支持 easycom
打开项目根目录下的 pages.json 并添加 easycom 节点：
// pages.json
{
"easycom": {
"autoscan": true,
"custom": {
// uni-ui 规则如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
// 其他内容
pages:[
// ...
]
}
配置appid等基础信息，在manifest.json中配置
首先是id跟包名这些
然后是app的图标，准备一个1024x1024的图标，hbuilder会自动帮转分辨率
app模块配置，作者只用过推送功能，要额外看uniapp文档，很容易踩坑。但是uniapp也提供技术支持，不过人家是收费的。个人开发者也可以在上面回答问题赚点外快，嘿嘿嘿
然后就是权限，一般就是定位功能、摄像头功能。怎么知道配置项是哪个呢？其实命名很清楚了，camera(相机)、capture_audio_output(捕获音频输出)，然后再到uniapp官网上搜索确认一下会保险一点
最后一步：
打包
原生打包太麻烦了，直接使用云打包
然后把证书填一填，证书生成教程
注意：
1、快速安心打包可能有问题，用传统打包
2、注意保存好证书跟密码，最好上传到git
3、ios的还得申请ios的开发账号，教程
4、其实打包面板上就有“如何生成证书”的按钮，教程就在里面
5、包名很重要，不能随便改的，一开始就要起好名字
有疑问加站长微信联系（非本文作者）
