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 无参数要求
* 返回数据结构
* HOME页的代码如下：
<template>
<view>
<!-- 轮播图区域 -->
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
<swiper-item v-for="(item,idx) in swiperList" :key="idx">
<view class="swiper-item">
<image :src="item.image_src"></image>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
//轮播图数据列表
swiperList:[]
};
},
//加载模块时自动加载数据
onl oad() {
//调用方法，获取轮播图数据
this.getSwiperList()
},
methods:{
async getSwiperList(){
const {data:res} = await uni.$http.get('/api/public/v1/home/swiperdata')
if(res.meta.status !== 200){
return uni.showToast({
title:'数据请求失败',
duration:1500,
icon:'fail'
})
}
this.swiperList=res.message
}
}
}
</script>
<style lang="scss">
swiper{
height: 330rpx;
.swiper-item,image{
width: 100%;
height: 100%;
}
}
</style>
13. 分包的配置处理
>> 根目录新建分包目录，名称无限制，如：subpkg
>> 配置 pages.json
> 在 pages 节点同级，新建节点： subPackages, 数组； 一个对象为一个分包；
> 在分包中配置二项内容： root 表示 根目录，标识为前面新建的分包目录;
pages: 数组，内部为分包的子页面配置，配置数据与 pages 中配置的页面数据一致；
>> 在新建分包的目录上右键，新建页面，配置相应参数保存即可自动在 分配项下面的 pages 中添加页面信息；
14. 详情页
>> 点击轮播图，跳转到详情页
> 轮播图下的 view 改成 navigator; 并为其配置 url 数据
> 详情页API ：* https://请求域名/subpkg/goods_detail/goods_detail?goods_id=商品ID
15. 为 uni 封装自定义方法
>> 在 main.js 中，为 uni 封装自定义方法
16. 分类导航
> API : * https://请求域名/api/public/v1/home/catitems GET 无参数要求
> 返回数据：（switchTab方式，只能调用 uni.switchTab 方法进行跳转）
17. 楼层数据
> API : * https://请求域名/api/public/v1/home/floordata GET 无参数要求
> 返回数据：
标签：uniapp,01,微信,配置,git,editor,https,uni,黑马 From： https://www.cnblogs.com/jieling/p/17461855.html