面向初学者的物联网全栈开发指南 - 6 - uni-app起步

最后，我们要构建一个uni-app，并调用云函数建立起属于自己的全平台客户端，这里只对uni-app做一个简单的介绍，Html，CSS，JS上手比较快，而uni-app在Vue.js的基础上封装了大量的函数，用起来非常方便。

1. 准备工具

• HBuilderX (HBuilderX-高效极客技巧 (dcloud.io))
• uni-app官方文档：什么是 uni-app - uni-app官网 (dcloud.io)

2. 项目结构

还是在上一章建立的uni-app中，直接在顶部选择运行，运行到浏览器即可看到当前的项目。uni-app为跨平台项目，运行到浏览器，项目将被编译为H5；运行到小程序模拟器，项目将被编译为对应的小程序；运行到手机或模拟器，项目将被编译为对应的应用程序。

更细致的项目结构请参照文档，在这里只说常用的：

• pages：在这里右键可以新建页面，页面为.vue格式，一般放置在与页面名相同的文件夹下，index.vue默认为我们的主页（启动页）。

• pages.json：可以配置启动页、页面样式、导航栏等。pages.json - uni-app官网 (dcloud.io)

• static：这里存放所有的静态文件，如示例中的图片。

• manifest.json：项目配置页面。

3. 页面结构

我们打开index.vue，这是这个项目的启动页，他由HTML(<template>)、JavaScript(<script>)和CSS(<style>)构成。

3.1 大体介绍

• HTML

HTML部分非常简单，注意<template>下只能有一个容器<view>存在，里面再包裹页面的所有元素，可以看到里面有一个图片元素<image>和<view>包裹的文字元素<text>。HTML 教程 | 菜鸟教程 (runoob.com)

• JS

uni-app基于Vue，因此这一部分与Vue一致，

<script>
	export default {
   
   
		data() {
   
   
			return {
   
   
                // 此处存放页面声明的变量
				title: 'Hello'
			}
		},
		onLoad() {
   
   
			// 页面在加载时需要执行的函数和任务 
		},
		methods: {
   
   
			// 页面声明的函数
		}
	}
</script>

JavaScript 教程 | 菜鸟教程 (runoob.com)

介绍 — Vue