lzping_719的专栏

条件编译支持: 支持 .vue, .ts, .js, .scss, .css, pages.json 等文件。Q：按照 uni-app 规范开发可保证多平台兼容，但每个平台有自己的一些特性，该如何处理？把当前 uni-app 项目打包成网页(H5)端，并配置路由基础路径。把当前 uni-app 项目打包成微信小程序端，并发布上线。根路径，部分网站并不是部署到根路径，需要按运维要求调整。项目打包上线需要使用到多个工具，注意工具之间的职责。的打包，预览、测试、发行，使用。，让代码按条件编译到指定平台。

订单模块页面较多，建议用新的分包文件夹独立管理订单模块页面：填写订单页，支付订单页，订单详情页，订单列表页。填写订单页小兔鲜儿项目有三种方式可以生成订单信息，分别是：购物车结算、立即购买、再次购买。静态结构<script setup lang="ts">import { computed, ref } from 'vue'// 获取屏幕边界到安全区域距离const { safeAreaInsets } = uni.getSystemInfoSync()// 订单备注cons

完成加入购物车，购物车列表交互，计算结算金额等业务。在商品详情页把 选中规格后的商品(SKU) 加入购物车。接口详情接口地址：/member/cart请求方式：POST登录权限: 是请求参数：Body接口封装参考代码通过 组件提供的 事件，获取加入购物车时所需的参数。购物车列表购物车列表需要访问后才能登录。登录状态已登录显示购物车列表，否则应引导用户去登录。列表渲染调用接口获取当前登录用户购物车中的商品列表。接口信息接口地址：/member/cart请求方式：GET登录权限: 是请求参数

学会使用，下载并使用SKU组件，实现规格展示和交互。

地址模块共两个页面：地址管理页，地址表单页 ，划分到会员分包中。地址表单页动态设置标题新建地址 和 修改地址 复用同一个地址表单页，需要根据页面参数 动态设置页面标题。新建地址页新用户没有收货地址，先完成新建地址，新建成功返回地址管理页。主要功能：前端收集表单的数据，提交表单给后端。接口调用接口地址：/member/address请求方式：POST登录权限: 是请求参数：Body接口封装类型声明参考代码地址表单页， 组件通过 获取数据，其他表单组件结合 事件获取。地址管理页为了能

在用户登录/注册成功后，展示会员信息，更新会员信息。主要实现两部分业务：会员中心页，替换掉原本的练习代码。参考代码封装猜你喜欢组合式函数会员中心页(我的)：渲染用户头像，昵称，完善猜你喜欢分页加载。会员设置页会员模块的二级页面，按模块处理成分包页面，有以下好处：::: tip 温馨提示通过 VS Code 插件 uni-create-view 可以快速新建分包页面，自动配置分包路由。:::当用户进入【我的】页面时，由框架自动预下载【会员模块】的分包，提升进入后续分包页面时的启动速度。静态结构设

涉及知识点：微信授权登录，文件上传，Store 状态管理等。微信小程序的开放能力，允许开发者获取微信用户的基本信息（昵称、性别、手机号码等），开发者常用来实现注册/登录的功能。常见登录/注册方式：实际开发过程中常常需要实现以上的一种或多种方式，我们的项目主要实现授权登录。微信授权登录用户在使用小程序时，其实已登录微信，其本质上就是：微信授权给小程序读取微信用户信息。传统登录方式传统登录方式，一般是通过输入密码或者手机验证码实现登录。温馨提示：接口文档中提供练习使用的登录接口，大家可在课后自行完成。登录页获

商品详情页分为两部分讲解：参考效果用户点击商品列表，跳转到对应的商品详情页。静态结构新建商品详情页。获取数据获取页面参数根据商品的 id 查询到某个商品的详细信息，如图片、价格、型号等展示给用户。接口调用接口信息如下：接口地址：/goods请求方式：GET请求参数：Query请求封装类型声明接下来，将获取到的数据结合模板语法渲染到页面中。参考效果当轮播图滑动切换的时候更新自定义下标，当图片被点击的时候大图预览。商品详情页轮播图交互弹出层交互参考效果 弹出层组件：uni-popup静态结构提供

用户点击左菜单的一级分类，切换右侧对应的二级分类和商品。

主要实现 Tabs 交互、多 Tabs 列表分页加载数据。

新鲜 · 亲民 · 快捷-- 搜索条 -->搜索商品

如果没有统一代码风格，团队协作不便于查看代码提交时所做的修改。实现持久化，小程序端不兼容，需要替换持久化 API。项目模板包含：目录结构，项目素材，代码风格。::: warning 注意事项。::: tip 注意事项。::: tip 实现需求。::: tip 实现需求。::: tip 温馨提示。::: tip 温馨提示。微信小程序端，需登录。

通过 HBuilderX 创建（需安装 HBuilderX 编辑器）通过命令行创建（需安装 NodeJS 环境）