第15章 项目实战-【千锋教育】微信小程序开发与实战（微课版）

第15章 项目实战 项目介绍 项目创建 项目结构 安装依赖 项目演示 项目发布 目 录 CATALOUGUE 初心至善 匠心育人 项目介绍 初心至善 匠心育人 项目介绍 本项目是一款美妆商城类的微信小程序，包含了商品展示、查看商品详情、提交订单、编辑收货人信息、订单介绍等功能模块，小程序使用了Vant Weapp组件库。小程序是由六个页面组成，分别是商城首页、商品列表页、商品详情页、订单信息页、收货地址页、订单结果页等。 初心至善 匠心育人 项目创建 初心至善 匠心育人 项目创建 初心至善 匠心育人 项目结构 初心至善 匠心育人 项目文件结构 初心至善 匠心育人 安装依赖 初心至善 匠心育人 安装依赖 本项目采用的Vant Weapp组件库实现小程序的UI页面开发。Vant Weapp可以使用npm安装，打开小程序的项目根目录，在终端执行下面的命令： # 初始化npm npm init -y # 安装lin-ui组件库 npm i @vant/weapp -S --production 初心至善 匠心育人 安装依赖 在使用Vant Weapp组件库之前，需要将 app.json 中的 "style": "v2" 配置项去除，并手动在 project.config.json 内添加如下配置 { ... "setting": { ... "packNpmManually": true, "packNpmRelationList": [ { "packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./" } ] } } 初心至善 匠心育人 安装依赖 在菜单栏选择【工具】--【构建npm】： 初心至善 匠心育人 安装依赖 等待构建完成，即完成了组件库的安装。 初心至善 匠心育人 项目演示 初心至善 匠心育人 项目演示 初心至善 匠心育人 项目演示 初心至善 匠心育人 项目演示 初心至善 匠心育人 项目演示 初心至善 匠心育人 项目演示 初心至善 匠心育人 项目演示 初心至善 匠心育人 项目发布 初心至善 匠心育人 项目发布 在微信开发者工具中点击右上角的“上传”按钮，项小程序提交到微信小程序管理后台： 初心至善 匠心育人 项目发布 在微信小程序管理后台中提交代码，等待审核： 初心至善 匠心育人 项目发布 版本审核通过后，当前小程序的版本会变成线上版本，并且通过微信信息通知发布者审核结果： 初心至善 匠心育人 THANK YOU FOR YOUR WATCHING $