uni-app快速入门

嫣嫣细语

于 2024-05-24 15:43:07 发布

阅读量957

点赞数 27

分类专栏： uni-app 前端 javascript 文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/aaa123aaasqw/article/details/139175656

版权

javascript 同时被 3 个专栏收录

63 篇文章 1 订阅

订阅专栏

前端

53 篇文章 0 订阅

订阅专栏

uni-app

9 篇文章 0 订阅

订阅专栏

1.uni-app介绍

2.uni-app特点

3.uni-app使用方法

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

3.2创建uni-app项目：可以使用HBuilderX等IDE工具创建uni-app项目，也可以手动创建uni-app项目。

3.3发布uni-app应用：可以将编译后的uni-app应用发布到App Store、Google Play、微信小程序等平台。 4. uni-app基础语法

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

uni-app官网

2.uni-app特点

跨平台开发：uni-app可以使用一套代码同时构建iOS、Android、H5、小程序等多个平台的应用，大大降低了开发成本和开发周期。

开发效率高：uni-app采用Vue.js作为开发框架，开发者可以使用Vue.js的组件化开发方式，大大提高了开发效率。

良好的性能和用户体验：uni-app采用了优化的渲染机制和缓存机制，可以提高应用的性能和用户体验。

支持原生能力：uni-app支持调用原生能力，如调用摄像头、地理位置等，可以满足更多的应用场景需求。

3.uni-app使用方法

3.1安装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项目。如果您需要使用其他平台的话，只需要更改启动命令里的目标平台即可。

3.2创建uni-app项目：可以使用HBuilderX等IDE工具创建uni-app项目，也可以手动创建uni-app项目。

HBuilderx官网

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

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

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

在HBuilderX中，打开需要发布的uni-app项目

在“菜单栏”中选择“运行-》发行”

选择需要发布的平台，例如Android或iOS

根据提示，填写相关配置信息，如应用名称、应用图标、应用版本等

点击“发行”按钮，等待打包和编译过程完成

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

应用发布成功后，可以通过相应的应用商店进行下载和安装

4. uni-app基础语法

uni-app官网教程

4.1 模板语法

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>

4.2 条件渲染

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>

4.3 列表渲染

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>

4.4 表单输入绑定

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>

5. uni-app组件

uni-app官网组件

uni-app提供了丰富的组件库，包括基础组件和扩展组件，可以满足大部分应用的需求。

5.1 基础组件

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>

5.2 扩展组件

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>

6. uni-app API

uni-app官网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)
  }
})

7. 总结

uni-app是一个非常优秀的跨平台应用开发框架，具有上手简单、开发效率高、性能优秀等优点。通过学习uni-app的基础语法、组件、API，可以快速掌握uni-app的开发技能，为开发跨平台应用打下坚实的基础。

嫣嫣细语

关注

27
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
uni-app快速入门

uni-app是一个非常优秀的跨平台应用开发框架，具有上手简单、开发效率高、性能优秀等优点。通过学习uni-app的基础语法、组件、API，可以快速掌握uni-app的开发技能，为开发跨平台应用打下坚实的基础。uni-app官网。
复制链接

扫一扫