uniapp 博客

uni-app介绍

Uni-app是一个使用Vue.js开发所有前端应用的框架。开发者编写一套代码，就可以发布到iOS、Android、Web（响应式）、以及各种小程序（如微信、支付宝、百度、头条、QQ等）、快应用等多个平台。

Uni-app的主要特点包括：

1. 跨平台开发：一次编码，同时生成多个应用程序，大大降低了应用程序的开发难度和复杂度。
2. 丰富的原生API和插件：提供了众多API和插件，可以满足不同场景下开发者的需求，如uni.request API可以方便地进行网络请求，地图插件、支付插件等可以帮助开发者快速实现特定的功能。
3. 基于条件编译的代码生成技术：能够根据应用程序平台的不同，编译出特定的应用程序代码。
4. 开发工具：提供了一套完整的开发工具，如Uni-app Cli、HBuilder X等，使得开发者可以在同一个环境下进行开发、调试和打包。

uni-app使用

1. 安装 HBuilderX：
   • 访问 DCloud 官网下载 HBuilderX，它是 uni-app 的官方开发工具。
   • 安装并打开 HBuilderX。
2. 创建 uni-app 项目：
   • 在 HBuilderX 中选择 "文件" -> "新建" -> "项目"。
   • 选择 "uni-app" 项目类型，并输入项目名称和路径。
   • 点击 "创建"，生成项目目录和文件。
3. 编写代码：
   • 在生成的项目目录中，你会看到 pages、components、static、main.js、App.vue 等文件。
   • 在 pages 目录下编写你的页面，每个页面通常由 .vue 文件组成。
   • 在 components 目录下编写可复用的组件。
   • 在 main.js 中配置你的应用。
4. 预览和调试：
   • 在 HBuilderX 中，你可以使用真机运行或模拟器来预览你的应用。
   • 通过 "运行" 菜单选择目标平台（如微信小程序、H5等）进行预览和调试。
5. 生成代码或应用包：
   • 在 HBuilderX 中，你可以通过 "发行" 菜单选择目标平台并生成代码或应用包。
   • 对于小程序，会生成对应平台的代码目录，你可以直接上传到小程序管理后台。
   • 对于 App，会生成打包需要的文件，你可以使用 DCloud 提供的云打包服务或自己配置环境进行本地打包。
6. 自定义配置：
   • 你可以通过 manifest.json 文件来配置应用的基本信息、图标、启动页等。
   • 通过 pages.json 文件来配置页面路由、导航条、底部导航栏等。
7. 测试和发布：
   • 在生成代码或应用包后，确保在目标平台上进行充分的测试。
   • 根据平台的要求，上传代码或应用包，并进行审核和发布。

8. 设置应用首页

   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 {} 里的内容，是页面的主要逻辑代码。包括几部分：

1. data：template模板中需要使用的数据。具体 另见
2. 页面生命周期：如页面加载、隐藏、关闭，具体 见下
3. methods方法，如按钮点击、屏幕滚动

如下页面代码的逻辑是：

1. 在data中定义了title，初始值是"点我"
2. 在页面中放置了一个button组件，按钮文字区使用{{}}模板写法，里面写title，把data里的title绑定到按钮的文字区，即按钮的初始文字是"点我"
3. 按钮的点击事件@click，指向了methods里的一个方法buttonClick，点击按钮即触发这个方法的执行
4. 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>