uni-app 新手入门到精通1_uni-app菜鸟教程

uni-app 新手入门到精通2 https://blog.csdn.net/renxiaoxing55/article/details/109079171

uni-app 新手入门到精通3 https://blog.csdn.net/renxiaoxing55/article/details/109103310

uni-app 新手入门到精通完结篇 https://blog.csdn.net/renxiaoxing55/article/details/109117750

uni-app的开发必须要通过HBuilderX可视化页面

HBuilderX的下载地址 https://www.dcloud.io/hbuilderx.html

HBuilderX的使用教程在uni-app也有,我这里就不详细说了
https://uniapp.dcloud.io/quickstart?id=_1-%e9%80%9a%e8%bf%87-hbuilderx-%e5%8f%af%e8%a7%86%e5%8c%96%e7%95%8c%e9%9d%a2

1，大概目录介绍，运行方式可以直接阅读工具的中文菜单栏或看文档。

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                存放本地网页的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents          存放小程序组件的目录，详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2，globalStyle全局的外观配置 pages.json （官方文档位置->框架 ->配置）
根据你项目的要求进行配置 更多详细内容参考文档

"globalStyle": {
		"navigationBarTextStyle": "black",   //导航栏标题颜色及状态栏前景颜色
		"navigationBarTitleText": "uni-app11",  //导航栏标题文字内容
		"navigationBarBackgroundColor": "#F8F8F8",  //导航栏背景颜色
		"backgroundColor": "#F0AD4E",    //窗口的背景色
		"backgroundTextStyle":"dark"   //下拉 loading 的样式，仅支持 dark/light
	}
1
2
3
4
5
6
7

3, 创建页面和页面的配置 pages.json

  谨记 所有新建页面,都要这里进行配置
1

"pages": [     //pages数组中第一项表示应用启动页,所以项目启动的显示的就是我自己新建的详情页了
		{
			"path": "pages/details/details",
			"style": { //页面的样式根据你自己项目的要求进行配置(如果没有配置的话是跟着全局配置走的)
				"navigationBarTitleText": "详情页",
				"navigationBarBackgroundColor":"red"
			}
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app11"
			}
		}
	],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3, 配置基本的tabBar (效果类似于导航) => pages.json

"tabBar": {
		"color": "#A0522D", //字体的颜色
		"selectedColor": "#B3EE3A",  //选中的颜色
		"backgroundColor": "#fff",
		"list": [
			{
				"text": "首页",
				"pagePath":"pages/index/index",
				"iconPath":"static/tabs/home.png",
				"selectedIconPath":"static/tabs/home-active.png"
			},
			{
				"text": "商品",
				"pagePath":"pages/product/product",
				"iconPath":"static/tabs/message.png",
				"selectedIconPath":"static/tabs/message-active.png"
			},
			{
				"text": "我们",
				"pagePath":"pages/contact/contact",
				"iconPath":"static/tabs/contact.png",  //原有显示的icon图标
				"selectedIconPath":"static/tabs/contact-active.png" //选中的icon图标
			}
		]
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在配置完tabBar 谨记 所有新建页面,都要在pages进行配置
1

4, 组件的基本使用

    组件这里的话就不多说,去官网看看,需要用啥组件 直接用就行了, 需要啥功能了,可以根据组件的属性进行配置
    <view></view> 就相当于 <div></div>了
1
2

5, uni 中样式的学习以及如何使用scss
样式官方文档位置(介绍->框架简介->页面样式与布局)

<style lang="scss">
    @import "../common/uni.css";
    .uni-card {
        width: 100rpx;
		height: 100rpx;
		background-color: red;
		.text{
		   font-size:20rpx
		}
    }
</style>
1
2
3
4
5
6
7
8
9
10
11

安装node-sass插件
在HBuilderX中，使用scss/sass是需要安装node-sass编译插件的。
点击菜单【工具】【插件安装】

尺寸单位rpx和px的区别

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx 。
1

---

其他内容接下篇文章了

---