uni-app核心基础（新手快速入门）

uni-app介绍

uni-app是一个基于Vue.js开发的跨平台应用开发框架，可以使用一套代码同时构建iOS、Android、H5、小程序等多个平台的应用。uni-app的特点是开发效率高、开发成本低、开发周期短，同时还具有良好的性能和用户体验。

可前往uni-app官网查看更多细则
https://uniapp.dcloud.net.cn/

uni-app特点

跨平台开发：uni-app可以使用一套代码同时构建iOS、Android、H5、小程序等多个平台的应用，大大降低了开发成本和开发周期。
开发效率高：uni-app采用Vue.js作为开发框架，开发者可以使用Vue.js的组件化开发方式，大大提高了开发效率。
良好的性能和用户体验：uni-app采用了优化的渲染机制和缓存机制，可以提高应用的性能和用户体验。
支持原生能力：uni-app支持调用原生能力，如调用摄像头、地理位置等，可以满足更多的应用场景需求。

uni-app使用方法

安装uni-app

可以使用npm安装uni-app，也可以直接下载uni-app的源代码。

如果想要安装uni-app，可以按照以下步骤操作：

首先您需要安装Node.js，您可以在官方网站上下载Node.js的安装包进行安装：https://nodejs.org/en/download/
接着您需要使用npm工具进行安装uni-app，打开命令行终端，输入以下命令进行安装：

npm install -g @vue/cli
npm install -g @vue/cli-service-global
npm install -g uni-cli

安装完成后，您可以使用以下命令创建一个新的uni-app项目：

uni init my-project

其中my-project是您的项目名称。

进入项目目录，使用以下命令启动开发服务器：

cd my-project
npm run dev:mp-weixin

其中mp-weixin是您要开发的目标平台，支持的平台有mp-alipay、mp-baidu、mp-toutiao等。

到这里，您已经成功安装并创建了一个uni-app项目。如果您需要使用其他平台的话，只需要更改启动命令里的目标平台即可。

创建uni-app项目

可以使用HBuilderX等IDE工具创建uni-app项目，也可以手动创建uni-app项目。
HBuilderX官网：https://www.dcloud.io/hbuilderx.html

要创建uni-app项目，您需要按照以下步骤：

安装HBuilderX开发工具，它是一个基于Eclipse的集成开发环境（IDE），专门为uni-app开发而设计。
打开HBuilderX，点击“新建项目”按钮，选择“uni-app”模板，然后选择您需要的项目类型（如无框架、Vue、React等）。如果您还没有安装相关框架和插件，可以根据提示进行安装。
在新建项目页面中，您可以设置项目名称、存储路径、AppID等信息。
点击“创建项目”按钮，HBuilderX会自动为您生成初始项目结构，并且自动配置好相应的依赖项和运行环境。
开始编写您的代码，并使用HBuilderX提供的调试功能进行测试。

发布uni-app应用

可以将编译后的uni-app应用发布到App Store、Google Play、微信小程序等平台。

在HBuilderX中，打开需要发布的uni-app项目
在“菜单栏”中选择“运行-》发行”
选择需要发布的平台，例如Android或iOS
根据提示，填写相关配置信息，如应用名称、应用图标、应用版本等
点击“发行”按钮，等待打包和编译过程完成

打包完成后，在相应的平台上上传应用的安装包，例如Android应用可以上传到Google Play商店，iOS应用可以上传到App Store

uniapp

应用发布后，可以在相应的平台下载、应用。

uni-app基础语法

访问官网查看：http://zh.uniapp.dcloud.io/tutorial/

模板语法

uni-app的模板语法和Vue.js的模板语法基本一致，支持插值表达式、指令、事件等。

<template>
  <view>
    <text>{{ message }}</text>
    <button @click="onClick">点击我</button>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello uni-app!'
    }
  },
  methods: {
    onClick() {
      uni.showToast({
        title: 'Hello uni-app!'
      })
    }
  }
}
</script>

条件渲染

uni-app的条件渲染和Vue.js的条件渲染基本一致，支持v-if、v-else、v-show等指令。

<template>
  <view>
    <text v-if="showMessage">{{ message }}</text>
    <text v-else>暂无消息</text>
    <button @click="toggleMessage">{{ showMessage ? '隐藏消息' : '显示消息' }}</button>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello uni-app!',
      showMessage: true
    }
  },
  methods: {
    toggleMessage() {
      this.showMessage = !this.showMessage
    }
  }
}
</script>

列表渲染

uni-app的列表渲染和Vue.js的列表渲染基本一致，支持v-for指令。

<template>
  <view>
    <text v-for="(item, index) in list" :key="index">{{ item }}</text>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      list: ['苹果', '香蕉', '橘子']
    }
  }
}
</script>

表单输入绑定

uni-app的表单输入绑定和Vue.js的表单输入绑定基本一致，支持v-model指令。

<template>
  <view>
    <input v-model="message" />
    <button @click="onClick">点击我</button>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    onClick() {
      uni.showToast({
        title: this.message
      })
    }
  }
}
</script>

uni-app组件

访问官网查看：http://zh.uniapp.dcloud.io/component/
uni-app提供了丰富的组件库，包括基础组件和扩展组件，可以满足大部分应用的需求。

基础组件

uni-app的基础组件包括view、text、button、image、input等，可以用来构建应用的基本界面。

<template>
  <view>
    <text>Hello uni-app!</text>
    <button @click="onClick">点击我</button>
    <image src="/static/logo.png" />
    <input v-model="message" />
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    onClick() {
      uni.showToast({
        title: 'Hello uni-app!'
      })
    }
  }
}
</script>

扩展组件

uni-app的扩展组件包括swiper、scroll-view、picker、calendar等，可以用来实现更复杂的界面效果。

<template>
  <view>
    <swiper>
      <swiper-item v-for="(item, index) in list" :key="index">
        <image :src="item.image" />
      </swiper-item>
    </swiper>
    <scroll-view style="height: 200rpx;">
      <view v-for="(item, index) in list" :key="index">{{ item.title }}</view>
    </scroll-view>
    <picker :value="value" @change="onChange">
      <picker-item v-for="(item, index) in list" :key="index" :value="index">{{ item.title }}</picker-item>
    </picker>
    <calendar :selected-date="selectedDate" @select="onSelect" />
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      list: [
        { title: '苹果', image: '/static/apple.png' },
        { title: '香蕉', image: '/static/banana.png' },
        { title: '橘子', image: '/static/orange.png' }
      ],
      value: 0,
      selectedDate: ''
    }
  },
  methods: {
    onChange(event) {
      this.value = event.detail.value
    },
    onSelect(event) {
      this.selectedDate = event.detail.value
    }
  }
}
</script>

uni-app API

访问官网查看：http://zh.uniapp.dcloud.io/api/

uni-app提供了丰富的API，包括路由、网络、媒体、位置等，可以满足大部分应用的需求。

// 路由API
uni.navigateTo({
  url: '/pages/detail/detail?id=1'
})
 
// 网络API
uni.request({
  url: 'https://api.example.com',
  success: function(res) {
    console.log(res.data)
  }
})
 
// 媒体API
uni.chooseImage({
  success: function(res) {
    console.log(res.tempFilePaths)
  }
})
 
// 位置API
uni.getLocation({
  success: function(res) {
    console.log(res.latitude, res.longitude)
  }
})

本文共 1105 个字数,平均阅读时长 ≈ 3分钟