uni-app介绍
Uni-app是一个使用Vue.js开发所有前端应用的框架。开发者编写一套代码,就可以发布到iOS、Android、Web(响应式)、以及各种小程序(如微信、支付宝、百度、头条、QQ等)、快应用等多个平台。
Uni-app的主要特点包括:
- 跨平台开发:一次编码,同时生成多个应用程序,大大降低了应用程序的开发难度和复杂度。
- 丰富的原生API和插件:提供了众多API和插件,可以满足不同场景下开发者的需求,如uni.request API可以方便地进行网络请求,地图插件、支付插件等可以帮助开发者快速实现特定的功能。
- 基于条件编译的代码生成技术:能够根据应用程序平台的不同,编译出特定的应用程序代码。
- 开发工具:提供了一套完整的开发工具,如Uni-app Cli、HBuilder X等,使得开发者可以在同一个环境下进行开发、调试和打包。
uni-app使用
- 安装 HBuilderX:
- 访问 DCloud 官网下载 HBuilderX,它是
uni-app
的官方开发工具。 - 安装并打开 HBuilderX。
- 访问 DCloud 官网下载 HBuilderX,它是
- 创建 uni-app 项目:
- 在 HBuilderX 中选择 "文件" -> "新建" -> "项目"。
- 选择 "uni-app" 项目类型,并输入项目名称和路径。
- 点击 "创建",生成项目目录和文件。
- 编写代码:
- 在生成的项目目录中,你会看到
pages
、components
、static
、main.js
、App.vue
等文件。 - 在
pages
目录下编写你的页面,每个页面通常由.vue
文件组成。 - 在
components
目录下编写可复用的组件。 - 在
main.js
中配置你的应用。
- 在生成的项目目录中,你会看到
- 预览和调试:
- 在 HBuilderX 中,你可以使用真机运行或模拟器来预览你的应用。
- 通过 "运行" 菜单选择目标平台(如微信小程序、H5等)进行预览和调试。
- 生成代码或应用包:
- 在 HBuilderX 中,你可以通过 "发行" 菜单选择目标平台并生成代码或应用包。
- 对于小程序,会生成对应平台的代码目录,你可以直接上传到小程序管理后台。
- 对于 App,会生成打包需要的文件,你可以使用 DCloud 提供的云打包服务或自己配置环境进行本地打包。
- 自定义配置:
- 你可以通过
manifest.json
文件来配置应用的基本信息、图标、启动页等。 - 通过
pages.json
文件来配置页面路由、导航条、底部导航栏等。
- 你可以通过
- 测试和发布:
- 在生成代码或应用包后,确保在目标平台上进行充分的测试。
- 根据平台的要求,上传代码或应用包,并进行审核和发布。
-
设置应用首页
pages.json -> pages
配置项中的第一个页面,作为当前工程的首页(启动页)
{
"pages": [
{
"path": "pages/index/index", //名字叫不叫index无所谓,位置在第一个,就是首页
"style": {
"navigationBarTitleText": "首页" //页面标题
}
},
{
"path": "pages/my",
"style": {
"navigationBarTitleText": "我的"
}
},
]
}
页面内容构成
uni-app 页面基于 vue 规范。一个页面内,有3个根节点标签:
- 模板组件区
<template>
- 脚本区
<script>
- 样式区
<style>
<template>
<view class="content">
<button @click="buttonClick">{{title}}</button>
</view>
</template>
<script>
export default {
data() {
return {
title: "Hello world", // 定义绑定在页面上的data数据
}
},
onLoad() {
// 页面启动的生命周期,这里编写页面加载时的逻辑
},
methods: {
buttonClick: function () {
console.log("按钮被点了")
},
}
}
</script>
<style>
.content {
width: 750rpx;
background-color: white;
}
</style>
export default 里的代码
export default {}
里的内容,是页面的主要逻辑代码。包括几部分:
如下页面代码的逻辑是:
- 在data中定义了
title
,初始值是"点我" - 在页面中放置了一个button组件,按钮文字区使用
{{}}
模板写法,里面写title
,把data里的title
绑定到按钮的文字区,即按钮的初始文字是"点我" - 按钮的点击事件
@click
,指向了methods里的一个方法buttonClick
,点击按钮即触发这个方法的执行 - buttonClick方法里通过
this.title
的方式,访问data数据,并重新赋值为"被点了"。由于vue中data和界面是双向绑定,修改data中的title
后,因为按钮文字绑定了title
,会自动更新按钮的文字。
整体效果就是,刚开始按钮文字是"点我",点一下后按钮文字变成了"被点了"
<template>
<view>
<button @click="buttonClick">{{title}}</button>
</view>
</template>
<script>
export default {
data() {
return {
title: "点我", // 定义绑定在页面上的data数据
// 多个data在这里继续定义。逗号分隔
}
},
onLoad() {
// 页面启动的生命周期,这里编写页面加载时的逻辑
},
// 多个页面生命周期监听,在这里继续写。逗号分隔
methods: {
buttonClick: function () {
this.title = "被点了"
},
// 多个方法,在这里继续写。逗号分隔
}
}
</script>