uni-app学习笔记
1.uni-app的框架简介
创建uni-app项目之后,会一般都会包含以下文件
┌─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 配置页面路由、导航条、选项卡等页面类信息,
在index.vue文件中编辑页面内容,
在pages.json中编辑页面属性,标题,连接等
1.介绍一些命令
//文件内的不同范围内的注释符号不一样,分别为<--! -->,//和/* */
index1.vue文件
<template>
<view class="content">
<view class="title">{{title}}</view>
<!-- 此处存储信息的方法是定义变量,然后用两个{{}}输出 -->
<view class="rpx">rpx 红色</view>
<!-- 运用style中的class来指定该框内的颜色等信息 -->
<view class="vw" >vw 橙色</view>
<view class="sass">sass黄色</view>
</view>
</template>
<script>
export default{
data(){
// 定义变量,存储准备输出
//包括但不限于数据,数字,bool类型,还有对象
return{
//字符串
title:"小青",
}
}
}
</script>
<style lang="scss">
.rpx{
/*小程序的单位:750rpx=屏幕的宽度*/
width: 750rpx;
height: 100rpx;
background-color: #ff0000;
}
.vw{
/*vw h5单位100vw =屏幕高度 100vh=屏幕宽度 */
width: 100vw;
height: 10vh;
background-color: #ffaa00;
}
.content{
.sass{
width: 750rpx;
height: 100rpx;
background-color: #ffff00;
//一般来说,这里的颜色选择需要ALT+左键点击自行选择
color: $uni-color-primary;
//字体颜色,可以在uni.scss中寻找,挑选自己喜欢的就行
}
}
/* .content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}*/
.title {
width: 750rpx;
height: 100rpx;
font-size: 50rpx;
color: #00ff00;
值得一说的是,这里的距离单位和一般的不一样,虽然可以容纳很多的单位,但最常用还是rpx,默认手机宽750rpx,高1000rpx,
}
</style>
这是第二个文件,pages.json,主要说明的是作为主业的vue文件位置,每增加一个页面,都要增加一个开始结束范围内的代码,并且更改页面路径和页面标题
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
//开始
{
"path": "pages/index/index",//页面路径
"style": {
"navigationBarTitleText": "uni-app" //页面标题
}
}//结束
],
"globalStyle": {
//全局设置文件
"navigationBarTextStyle": "black",
//导航栏标题颜色,仅支持黑白色
"navigationBarTitleText": "uni-app",
//标签名字
"navigationBarBackgroundColor": "#aaaaff",
//导航栏背景颜色
"backgroundColor": "#ffffff"
//背景颜色-——我也没搞懂在哪有用,我添加删除,更改颜色,对页面没有任何影响。
}
}