uni-app基础自用-CSDN博客

本文链接：https://blog.csdn.net/weixin_50643050/article/details/139013355

一、什么是uniapp?

老办法，我先去看官网（uni-app官网）

从以上这段话我们可以了解到：

首先，uniapp是一款基于vue的一款框架，而且可以发布到多个平台，所以我们就不再需要去写许多页面以供不同平台使用。

而以上内容，让我们了解到uniapp的使用面有多广泛，并且很多大厂都使用了这款框架，侧面反映了这款框架的优秀。

接下来让我们一起开始我们的uniapp的旅程吧

二、所需软件

在开始之前，我们需先下载安装如下工具

下载地址：HBuilderX-高效极客技巧

如果你是windows系统，点击这里进行下载；（下图）

如果你是mac系统，请点击（下图）

下载完成后直接傻瓜式安装就可以啦。

HBuilderX介绍：这款软件可视化的方式比较简单，其内置相关环境，开箱即用，无需配置nodejs。

三、创建项目

我们也可以之间查看官网中进行创建项目uni-app官网

1.打开我们解压好的文件，双击HBuilderX.exe应用程序

2.打开后右上角

3.创建项目

也可以ctrl+N快捷键创建

4.选择模板

5.创建好之后，按照惯例，我们先跑一下

运行的话我们有很多方法，我这里只演示谷歌浏览器怎么运行

点击运行后 > 运行到浏览器 > Chrome

点击后下面控制台会显示

出现一下代码就代表成功了

其中 test 是自定义的项目名

接下来打开弹出的谷歌浏览器

6.页面也跑完了，我们再看目录

pages ：所有的页面存放目录

pages.json 文件：用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生 tabbar 等

manifest.json 文件：是应用的配置文件，用于指定应用的名称、图标、权限等。

App.vue ：是我们的根组件，所有页面都是在`App.vue`下进行切换的，是页面入口文件，可以调用应用的生命周期函数。

main.js ：是我们的项目入口文件，主要作用是初始化`vue`实例并使用需要的插件。

uni.scss 文件：用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，`uni.scss`文件里预置了一批 scss 变量预置。
unpackage ：就是打包目录，在这里有各个平台的打包文件

static 静态资源目录，例如图片等

components 组件存放目录

配置项还有很多，如图：

接下来我们点击pages.json文件，查看默认配置

在globalStyle中

这些都有抽象，不好理解，但是我们用多了，就会理解了

四、创建页面

1.创建页面

右键 pages 新建 message （可以自定义）目录，在 message 目录下右键新建.vue 文件,并选择基本模板，一般.vue文件名和外层自定义名要一致

如图：

我这里创建的是login

2.配置页面

我们回到刚刚的pages.json 文件

其中，pages数组内，第一个对象是我们创建项目自带的index首页，所以pages数组内的每一个对象都是我们的一个页面，我们可以在这里进行配置

其中

path后面的字符串是我们页面的路径

style对象中放的是globalStyle中相同的“页面表现”

这里通过 style 修改页面的标题和导航栏背景色，并且设置 h5 下拉刷新的特有样式

3.配置tabbar（导航栏）

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

-注：

当设置 position 为 top 时，将不会显示 icon，样式将变为顶部导航栏

tabBar 中的 list 是一个数组，只能配置最少 2 个、最多 5 个 tab， tab 按数组的顺序排序。

tabbar属性有以下：

其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

案例：

4. condition启动模式配置

启动模式配置，仅开发期间生效，用于模拟直达页面的场景，

如：小程序转发后，用户点击所打开的页面

属性说明：

list属性说明：

五、组件的基本使用

uni-app提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼接称自己的应用，uni-app中的组件，就像 HTML中的 div、p、span等标签的作用一样，用于搭建页面的基础结构

1.text文本组件的用法

属性：

text组件相当于行内标签、在同一行显示

除了文本节点以外的其他节点都无法长按选中

案例：

2. view视图容器组件的用法

属性：

view在uniapp中就相当于html中的div标签

3. button按钮组件的用法

属性：

button组件默认独占一行，设置 size为 mini时可以在一行显示多个

案例：

4. image组件的使用

属性：

<image>组件默认宽度 300px、高度 225px；

src仅支持相对路径、绝对路径，支持 base64码；

-注：当页面结构复杂、css样式太多时，使用 image可能导致样式生效较慢，出现“闪一下”的情况，此时设置 image{will-change:transform} ,可优化此问题。

六、uni-app中的样式

1.rpx即响应式 px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会等比放大。

2.使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束

3.支持基本常用的选择器 class、id、element等

4.在uni-app中不能使用*选择器。

5.page相当于body节点

6.定义在 App.vue中的样式为全局样式，作用于每一个页面。在 pages目录下的 vue文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue中相同的选择器。

7.uni-app支持使用字体图标，使用方式与普通web项目相同，需要注意以下几点：

字体文件小于 40kb，uni-app会自动将其转化为base64格式；

字体文件大于等于 40kb，需开发者自己转换，否则使用将不生效；

字体文件的引用路径推荐使用以 ~@开头的绝对路径。

七、数据绑定

在页面中需要定义数据，和我们之前的 vue一摸一样，直接在data中定义数据即可

1.插值表达式的使用

利用插值表达式渲染基本数据

<view>{{ msg }}</view>

2. v-bind动态绑定属性

在 data中定义了一张图片，我们希望把这张图片渲染到页面上

export default{
   data(){
        return{
            img:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
        }
    }
}

利用 v-bind进行渲染:

<image v-bind:src="img"></image>

3. v-for的使用

data中定以一个数组，最终将数组渲染到页面上

data(){
    return{
        arr:[
            { name : '刘能' , age:29 },
            { name : '赵四' , age:39 },
            { name : '宋小宝' , age:49},
            { name : '小沈阳' , age:59},
        ]
    }
}

利用 v-for进行循环

<view v-for="(item,i) in arr" :key="i">
    姓名：{{item.name}}---年龄：{{item.age}}
</view>

八、uni中的事件

1.事件绑定

在 uni中事件绑定和 vue中是一样的，通过 v-on进行事件的绑定，也可以简写为@

<button @click="fun">点我</button>

事件函数定义在 methods中

export default{
    methods:{
        fun(){
            console.log('你还真点啊？')
        }
    }
}

2.事件传参

（1）如果默认没有参数，事件函数内第一个形参为事件对象

//template
<button @click="test">点我<button>
//script
methods:{
    test(e){
        console.log(e)
    }
}

（2）如果给事件函数传递参数了，则对应的事件函数形参接收的则是传递过来的数据

（3）如果既想获取事件对象，又想传递参数

//template
<button @click="test(2,$event)">点我<button>
//script
methods:{
    test(num,e){
        console.log(num,e)
    }
}