uniapp+vue3+云开发全栈开发同城配送鲜花小程序任意商城

okkaandw · · 85 次点击 · 开始浏览    置顶

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

有疑问加站长微信联系(非本文作者)

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

85 次点击  
加入收藏 微博
1 回复  |  直到 2024-11-25 14:22:10
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传