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 配置页面路由、导航条、选项卡等页面类信息，详见
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
样式官方文档位置(介绍->框架简介->页面样式与布局)
<style lang="scss">
@import "../common/uni.css";
.uni-card {
width: 100rpx;
height: 100rpx;
background-color: red;
.text{
font-size:20rpx
}
}
</style>
安装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 。