微信小程序开发.Day06
>> 本节开始主要为案例DEMO的开发
01. 黑马线上文件: https://www.escook.cn/docs-uni-shop
02. uni-app 官网地址: https://uniapp.dcloud.net.cn
uni-app 是一个使用 Vue.js 开发所有前端应用的框架, 一套代码,可编译到10个平台:
>> 官方推荐:使用 HBuilderX 来开发 uni-app 类型的项目;
> 模板丰富; > 完善的智能提示; > 一键运行;
>> HVuilderX 下载地址: https://www.dcloud.io/hbuilderx.html
> 安装: App 开发版;
>> 安装 scss/sass 编译插件
> https://ext.dcloud.net.cn/plugin?name=compile-node-sass
03. 开发环境配置
>> 快捷键方案: 工具>预设快捷键方案切换>选择要用的方案 ;
>> 主题色的设置:工具〉主题
>> 字体等配置项: 工具〉设置, 打开 Settings.json 进行配置;
> 可以直接打开配置项进行编译,非界面化
> 常用配置:
1 { 2 // 皮肤样式 3 "editor.colorScheme": "Default", 4 // 编辑器字体大小,单位像素。 5 "editor.fontSize": 12, 6 // 编辑器字体。值域为英文,微软雅黑字体英文:Microsoft YaHei UI Light 7 "editor.fontFamily": "Consolas", 8 // 编辑器字体。值域为中文,微软雅黑字体中文:'微软雅黑' 9 "editor.fontFmyCHS": "微软雅黑 Light", 10 // 按 'Tab' 时插入空格。值为true时,按下Tab键插入制表符宽度editor.tabSize值对应个数的空格。 11 "editor.insertSpaces": true, 12 // 编辑器行高比例 13 "editor.lineHeight": "1.5", 14 // 是否显示迷你地图 15 "editor.minimap.enabled": false, 16 // 使用Ctrl+鼠标滚轮缩放编辑器 17 "editor.mouseWheelZoom": true, 18 "editor.onlyHighlightWord": false, 19 // editor.tabSize,一个制表符(tab)等于的空格数 20 "editor.tabSize": 2, 21 // 是否自动换行。当值为true时,启用自动换行。 22 "editor.wordWrap": true, 23 // 项目管理器图标主题 24 "explorer.iconTheme": "vs-seti", 25 // 启用px转rem提示 26 "editor.codeassist.px2rem.enabel": false, 27 // 启用px转upx提示, uni-app项目生效 28 "editor.codeassist.px2upx.enabel": false 29 30 31 }
04. 项目结构及作用
05. 在HBuildX中,将项目运行到 微信开发者工具
>> 配置 AppID (manifest.json中进行配置)
>> 配置 微信开发者工具 的安装路径 (工具>设置>运行配置>微信开发者工具路径)
>> 微信小程序开发者工具:设置>安全设置 打开服务端口
>> HBuilderX中,将项目运行到微信小程序开发者工具中 (需要提前打开微信小程序开发者工具)
运行>运行到小程序模拟器>微信开发者工具;
微信开发者工具加载的项目位于:HBuilderX工程中, unpackage>disk>dev>mp-weixin
>> 微信小程序开发者工具中 project.config.json 中的配置项,在 HBuilderX中的配置
HBuilderX中:manifest.json > 最下面:源码视图:
06. 配置git管理
>> 项目根目录文件夹上,右键:新建自定义文件 .gitignore, 并配置好要忽略的内容项
>> 因dist 目录为 unpackage 仅有的文件,为确保git 对 unpackage 目录的跟踪,需要提交在此目录中添加一个其它的文件,名称随意,这个文件只是占位使用;
一般命名为: .gitkeep
>> 本地仓库的配置
> a. 打开项目所在目录; (cmd 模式)
>b. 创建本地仓库: git init
>c. 添加全部文件: git add .
>d. 提交全部文件: git commit -m '初始化项目'
至此,本地仓库及初始化状态的文件就已经处理好了
>> 项目托管到码云(gitee)
> 注册或登陆 gitee;
> 生成并获取ssh公钥
> 将 id_rsa.pub 文件中的公钥内容复制,并在 gitee 中登记: 头像》设置> 安全设置:SSH公钥: 添加公钥并保存
> 检测 ssh 配置是否成功: ssh -t git@gitee.com
当询问是否继续时,输入 yes
看上面提示,表示配置已经成功了;
> 在码云上创建空白仓库 (右上角头像边上的+号,新建仓库,配置仓库名称,保存即可)
> 将本地仓库,关联到码云仓库
*> 在本地仓库根目录: uni-shop-2 目录下:通过 GitBash 运行如下指令
git remote add origin git@gitee.com:wufeng1205/uni-shop2.git
![](https://img2023.cnblogs.com/blog/440660/202304/440660-20230423120244715-518648205.png)
*> 将本地仓库的内容,推送到码云仓库
git push -u origin "master"
![](https://img2023.cnblogs.com/blog/440660/202304/440660-20230423120430083-1679840049.png)
至此,已经将项目推到码云;
07. 开发小程序tabBar页面
>> page节点右键:新建页面,输入页面名称,并选择 scss 语法;
需要注意:钩选: 在 pages.json 中注册;
08. NavigationBar 属性配置
> 导航栏相关属性的配置,在: window 节点;
> 每个不同页面的标题,可在 pages 中每项中配置 navigationBarTitleText;
09. 配置网络请求
>> 由于平台限制,小程序项目中不支持使用 axios , 而原生的 wx.request() API的功能又比较简单,不支持拦截器等全局定制的功能;
>> uni-app 项目中推荐使用 @escook/request-miniprogram 第三方包发起网络数据请求;
官方文档:https://www.npmjs.com/package/@escook/request-miniprogram
> 本地构建 npm 管理配置: npm init -y
> 安装插件:npm install @escook/request-miniprogram
> 引用并配置拦截器:
10。分包的处理
>> 与 pages 同级新建子包目录 ,如: subpkg
>> 在配置文件 pages.json 中,与 pages 同级,新建子包节点: subPackages:[ ] ;
>> 新建子包时,钩选 在 pages.json 中注册, 并选择分包: subpkg
>> 轮播图组件: swiper 通过swp 可选择 swiper ,自动完成相关属性,手动添加: :circular="true" 自动循环
跳转组件: navigator 配::url
图片组件:image > 配 :src
>> 楼层数据处理:
本质上也就是View组件间的套用及 Flex布局,注意对 v-if 条件的使用;