uniapp-黑马优选学习01

Posted 2023-06-10 耗喜天涯

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了uniapp-黑马优选学习01相关的知识，希望对你有一定的参考价值。

01. IDE使用 HBuilderX

02. scss/sass 插件安装：为了方便样式的编写

地址： https://ext.dcloud.net.cn/plugin?name=compile-node-sass

03. 快捷键方案的设置、IDE主题色的设置、基本设置（ctlr 加 alt 加逗号 : ctrl + alt + , ）

　　>> 其它基本配置：常用默认配置如下 (Settings.json )　　

    // 皮肤样式
    "editor.colorScheme" : "Default",
    // 编辑器字体大小，单位像素。
    "editor.fontSize" : 12,
    // 编辑器字体。值域为英文，微软雅黑字体英文：Microsoft YaHei UI Light
    "editor.fontFamily" : "Consolas",
    // 编辑器字体。值域为中文，微软雅黑字体中文：\'微软雅黑\'
    "editor.fontFmyCHS" : "微软雅黑 Light",
    // 按 \'Tab\' 时插入空格。值为true时，按下Tab键插入制表符宽度editor.tabSize值对应个数的空格。
    "editor.insertSpaces" : true,
    // 编辑器行高比例
    "editor.lineHeight" : "1.5",
    // 是否显示迷你地图
    "editor.minimap.enabled" : false,
    // 使用Ctrl+鼠标滚轮缩放编辑器
    "editor.mouseWheelZoom" : true,
    "editor.onlyHighlightWord" : false,
    // editor.tabSize，一个制表符（tab）等于的空格数
    "editor.tabSize" : 2,
    // 是否自动换行。当值为true时，启用自动换行。
    "editor.wordWrap" : true,
    // 项目管理器图标主题
    "explorer.iconTheme" : "vs-seti",
    // 启用px转rem提示
    "editor.codeassist.px2rem.enabel" : false,
    // 启用px转upx提示, uni-app项目生效
    "editor.codeassist.px2upx.enabel" : false,
    "weApp.devTools.path" : "C:\\\\Program Files (x86)\\\\Tencent\\\\wxDevTool",
	"terminal.type" : "外部终端"

04. 创建 uni-app 项目

05. 关于HBuilderX 中，自定义组件的描述 (新版IDE中已经没有 components 了)

06. 将项目运行到微信开发者工具

　　第一步：配置微信小程序 appid

　　第二步：配置 “微信开发者工具” 的安装路径 >> 作用：以后可以直接将项目运行到微信开发者工具上看效果

　　第三步：打开微信开发者工具中的服务端口

　　第四步：将项目运行到开发者工具 (微信开发者工具，要求是已经登陆的状态，要不然会提示出来，要求登陆)

　　　　>> 若没有打开微信小程序工具

　　　　>> 打开了微信小程序开发者工具，但没有登陆

　　　　>> 打开了微信小程序开发者工具并且登陆了

07. UniApp 中如何配置微信小程序开发工具中的 project.config.json 中的 setting 项

08. 对 uniapp项目的git 管理

　　a. 项目根目录新建 .gitignore 忽略文件，并配置如下：　　　　

# 忽略 node_modules 目录
/node_modules
/unpackage/dist

　　b. 为确保git对 unpackage 目录的跟踪，在 unpackage 目录下，新建文件 .gitkeep 占位文件，

　　c. 初始化项目(三步)：

　　　　> git init : 初始化本地仓库

　　　　> git add . : 添加所有文件;

　　　　> git commit -m \'项目初始化\'

　　d. 将本地仓库，提交到远程仓库上去：

　　　　> git remote add origin --远程仓库的git地址--　　　　

　　　　> git push -u origin master

09. 新建页面

　　pages 文件夹上右键：新建页面

　　>> 在新建对话框中配置好相关参数(scss语法)并创建

10. 配置页面底部导航

　　>> 配置选中时的文本颜色 (与list 同级，新增 "selectedColor")

11. 微信小程序中的网络请求配置

　　>> 小程序中不支持 axios ，同时 wx.request() API的功能比较简单

　　>> 引入 @escook/request-miniprogram 发起网络请求;

　　官方文档： https://www.npmjs.com/package/@escook/request-miniprogram

　　** 处理方式:

　　　　> 在根目录下构建 npm 包管理配置文件： npm init -y --> 初始化生成 package.json 配置文件

　　　　> 安装插件 npm install @escook/request-miniprogram

　　　　> 代码中配置网络请求对象及相应的拦截器 (在 main.js 文件中配置)　　

//导入网络请求包
import $http from \'@escook/request-miniprogram\'
//挂载到顶级对象
uni.$http = $http;
//配置请求拦截器
$http.beforeRequest = function(options)
  //展示loading效果
  uni.showLoading(
    title:\'数据加载中...\'
  )  

//配置响应拦截器
$http.afterRequest = function()
  uni.hideLoading()

12. 案例API根路径 (小程序只支持 https 协议，并且要求是已经备案了的域名 )

　　>> 基址： $http.baseurl = https://api-hmugo-web.itheima.net

　　>> 首页轮播图API

　　　　* https://请求域名/api/public/v1/home/swiperdata GET 无参数要求

　　　　* 返回数据结构