今天开始使用 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、包名很重要，不能随便改的，一开始就要起好名字
