UniApp-day1:创建uni-app 项目、项目程序里各个文件所代表的含义、pages.json和tabBar案例、用VS Code开发uni-app项目、拉取小兔鲜项目代码、基础架构、组件库

技术架构

课程安排 

适合人群 

创建uni-app 项目

安装HBuilderX

点击新建项目：

        填写项目名称，修改项目路径，可以选择模板（初学者直接选默认模板），选择vue的版本2或3，最后创建即可

想开发程序的代码需要安装插件：工具->插件安装->uni-appvue3

开启微信开发者工具的服务器端口 ：设置->安全设置->将服务端口打开

选择刚创建的项目文件，点击导航栏的运行，选择运行到小程序模拟器，选择微信小程序

避免频繁切换窗口小技巧：点击分离窗口  

置顶窗口 ；然后将模拟微信开发者工具最小化（关闭开发者工具，模拟器也会关闭）

找到pages文件夹下的文件开始编写代码 

项目程序里各个文件所代表的含义

 static文件：图标等静态资源 

pages.json和tabBar案例

pages.json是页面配置：点击属性，会有属性解释 

增加页面 

选中文件夹点击新建 

填写文件名，存放位置，注意要勾选在pages.json中注册（类似于路由）

可在里面navigationBarTitleText属性中改标题

通过在pages.json里添加tabBar切换页面；而tabBar至少包含两项才可成功运行

注：修改完代码一定要进行保存才会生效 

新增图标 

将素材里面的图标图片放到static文件夹里面

通过iconpath属性配置图标路径

通过selectedIconPath配置选中时高亮显示的图片

通过 selectedColor属性配置选中时文字的高亮显示颜色，注意位置为list上方

添加appid 

在manifest.json中，选择微信小程序配置 

填写完以后点击预览按钮就可以推送到手机进行预览了 

小结 

uni-app和原生小程序的区别 

如何快速查文档： 鼠标点击标签，在弹出的标签中点击reference链接进行跳转

对事件绑定，v-for，大图预览，自动轮播图，动态属性绑定，设置图片的大小都进行了练习 

<template>
	<!-- 轮播图中出现几个点可以切换、关闭自动轮播 -->
	<swiper class="banner" indicator-dots circular :autoplay="false">
		<swiper-item v-for="item in pictures" :key="item.id">
			<!-- 绑定事件 -->
			<image @tap="onPreviewImage(item.url)" :src="item.url"></image>
		</swiper-item>
	</swiper>
	<view class="box">
		111
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				// 轮播图数据
				pictures: [
					{ id: '1', url: "https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_1.jpg" },
					{ id: '2', url: "https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_2.jpg" },
					{ id: '3', url: "https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_3.jpg" },
					{ id: '4', url: "https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_4.jpg" },
					{ id: '5', url: "https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_5.jpg" },
				]
			}
		},
		onLoad() {

		},
		methods: {
			/* 对应绑定的方法 */
			onPreviewImage(url){
				// console.log(url)
				/* 大图展示 ，两个必填属性值，图片字符串数组，current大图预览*/
				/* 写uni前缀会在打包时，自动替换为想做的小程序对应的前缀 */
				uni.previewImage({
					urls: this.pictures.map(v=>v.url),
					current: url
				})
			}
		}
	}
</script>

<style>
	.banner,
	.banner image {
		/* 刚好占满屏幕 */
		width: 750rpx;
		height: 750rpx;
	}
	
	.box {
		background-image: url('@/static/logo.png');
	}
</style>

使用命令行创建uni-app项目:

        可以在其他编译器进行开发（vscode等）

使用builderX将创建好的文件打开，将微信的appid填写好，点击右下方的终端，进行终端下载，在终端通过命令pnpm i (或者npm i ,   ynpm i)下载依赖包 

packge.json中

dev开头的包：更适合开发环境使用，修改一下就会更新

build开头的文件：更适合上线，代码会进行压缩，文件体积更小，不会监听文件的变化

dev或build后所跟的是平台的名称：找到需要开发的小程序的名称以后，后面所跟的就是运行代码的命令

程序在在hbuilder里面还没有办法跑起来，需要在微信开发者工具中导入开发项目 ：

需要选择项目中的dist->dev->mp-weixin文件

用VS Code开发uni-app项目 

安装uni-app插件并进行配置 

创建项目：点击需要创建的文件夹，右键新建uni-app文件；将div标签改成小程序端的view标签

Ts类型校验 

在终端中使用命令安装类型申明文件：

npm i -D @types/wechat-miniprogram @uni-helper/uni-app-types 

json注释问题：只有两个json文件可以写注释

拉取小兔鲜项目代码 

克隆代码 

vscode打开文件夹并添加appid 

安装依赖：pnpm install 或者 npm install等 

从packge.json中找到并运行编译成小程序端的命令 

代码改成下面这种了：npm run 

 npm run dev:mp-alipay # run the "dev:mp-alipay" package script
    npm run dev:mp-baidu # run the "dev:mp-baidu" package script
    npm run dev:mp-weixin # run the "dev:mp-weixin" package script

构建完成后，会在出现一个dist的目录 ，里面的dev代表我们的开发环境，mp-weixin里面就是微信小程序的源代码了，源代码想要效果需要使用微信开发者工具导入mp-weixin文件并查看

在page.json文件里面添加路由，使用tabbar 

在配套的笔记中有搭建eslint+prettier的教程（此处已经搭配好了）

基础架构-使用 uni-ui组件库 

安装组件uni-ui

npm i @dcloudio/uni-ui   或   yarn add @dcloudio/uni-ui

配置文件，实现自动导入；配置文件后需要重启服务，即先关闭原来的服务，在终端中运行npm run dev:mp-weixin

配置TS类型检查

状态管理

请求工具

拦截器

请求函数 

请求成功的业务处理 

请求失败的业务处理 

首页自定义导航栏