uni-app 新手入门到精通1

红太狼 2021-09-02 08:51 341阅读 0赞

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

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

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

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

HBuilderX的下载地址 [https://www.dcloud.io/hbuilderx.html][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][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            配置页面路由、导航条、选项卡等页面类信息，详见

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

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

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

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

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

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图标
    			}
    		]
    	}

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

4, 组件的基本使用

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JlbnhpYW94aW5nNTU_size_16_color_FFFFFF_t_70_pic_center]  
尺寸单位rpx和px的区别

> rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。  
> ![在这里插入图片描述][20201014165709833.png_pic_center]

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

--------------------

## 其他内容接下篇文章了 ##

--------------------

[https_blog.csdn.net_renxiaoxing55_article_details_109079171]: https://blog.csdn.net/renxiaoxing55/article/details/109079171
[https_blog.csdn.net_renxiaoxing55_article_details_109103310]: https://blog.csdn.net/renxiaoxing55/article/details/109103310
[https_blog.csdn.net_renxiaoxing55_article_details_109117750]: https://blog.csdn.net/renxiaoxing55/article/details/109117750
[https_www.dcloud.io_hbuilderx.html]: https://www.dcloud.io/hbuilderx.html
[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]: 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
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JlbnhpYW94aW5nNTU_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/42b972d47e694107b6abe9c8990efa66.png
[20201014165709833.png_pic_center]: /images/20210724/653193fccd1a4df18eec3996c476fbe9.png