微信小程序开发.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
*> 将本地仓库的内容，推送到码云仓库
git push -u origin "master"
至此，已经将项目推到码云；
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 条件的使用；
浙公网安备 33010602011771号