uni-app大家好，我是小逗号，今天给大家带来一期uni-app的基础教学。uni-app是一个使用Vue.js 开发

大家好，我是小逗号，今天给大家带来一期uni-app的基础教学

前言

在uni-app 的官网中这么说:"uni-app是一个使用Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。"详情请看官网（uniapp.dcloud.io/）

优势

使用这个框架的人在不断增多。
一套代码可以生成多端。
学习成本比较低，开发成本低。
有丰富的api。
环境在不断完善。
性能优秀。

温馨提示：有vue与微信小程序的底子的话学习起来uni-app更轻松哦

听了这么多有没有立即上手的准备呢

下载 HBuilderX

官网地址（www.dcloud.io/hbuilderx.h…

创建项目起服务

1.我们打开之后HBuilderX是这个样子

我们可以通过左上角新建来创建我们的目录文件

A.文件。

B.新建。

C.项目。

（我们还可以创建其它功能模块，这里就不一一演示了）

A. 目录名称。

B. 位置。

C. 创建。

3. 这时候我们开始启动项目

A. 运行。

B. 运行浏览器。

C. Chrome。

（我们还可以运行其它地方，这里就不一一演示了）

启来服务的样子

目录解析

图片1.jpg

1. 页面

2. 静态资源

3. 打包文件

4. 项目根组件

5. 项目入口文件

6. 配置应用

7. 设置整个项目存放路径，外观

8. 全局样式的配置

关于开发规范

1. 页面要遵循vue

2. 组件要遵循微信小程序

3. 接口靠近微信小程序规范

4. 事件处理靠近vue

5. 为兼容多端运行，建议使用flex布局

结构基本语法

首先我们来看，这个结构和vue是一样的，三段式布局，上面是结构，中间是逻辑，下面是样式。

<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
</view>
</template>

<script>
export default {
data() {
return {
title: 'Hello'
}
},
methods: {

}
}
</script>

<style>
.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 {
font-size: 36rpx;
color: #8f8f94;
}
</style>

基本写法

v-bind

<image class="logo" :src="/static/logo.png"></image>
<image class="logo" v-bind:src="/static/logo.png"></image>

插值

<text class="title">{{title}}</text>


<script>
export default {
data() {
return {
title: 'Hello'
}
},
}
</script>

v-for

<view class="" v-for="item in list" :key="index">
{{item}}
</view>

v-on

<button  @click="f1(123)">按钮</button>
<button  v-on:click="f1(123)">按钮</button>


methods :{
f1:function(num){
console.log(num);				
},			
}

v-html

<template>
<view>
<view v-html="rawHtml"></view>
</view>
</template>
<script>
export default {
data() {
return {
rawHtml: '<div>我是内容</div><img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png"/></div>'
}
}
}
</script>

v-if和v-else，v-else-if

<template>
<view>
<view v-if="name === '刘备'">
刘备
</view>
<view v-else-if="name === 'B'">
关羽
</view>
<view v-else-if="name === '张飞'">
张飞
</view>
<view v-else>
Not 刘备/关羽/张飞
</view>
</view>
</template>
<script>
export default {
data() {
return {
name:'张飞'
}
}
}
</script>

v-show

<view v-show="true">你好，世界！</view>

uni-app