uniapp本质其实就是用vue来开发app，用的编辑器是Hbuilder，这个编辑器通常用于app端的开发，Hbuilder非常强大，只要是个前端工程师，就可以用它实现多端开发，以前可能需要单独一个安卓开发，单独一个ios开发，如今只要会vue，你就都可以实现，也就是开发一次，多端覆盖

当你熟悉了uniapp的开发后，很多东西和vue相似，但又不是完全一致，这就是因为uniapp需要兼顾多端的开发

当我们创建好一个uniapp的项目时，你会发现里面的目录结构和vue的目录结构非常相似，pages用于存放各种页面，static用于存放各种静态资源，比如图片，manifest.json是多端的配置信息，pages.json用于配置路由等导航信息，底部导航栏也在这里面进行配置，uni.scssuniapp官方内置scss写css，里面还有很多全局的样式变量

插件

推荐如下插件，有些是官方的，有些是第三方的，第三方插件安装需要让你看会儿广告

配置

折叠代码，在设置中勾选代码折叠时显示最后一行

运行到谷歌浏览器

需放上谷歌浏览器的exe文件地址

想要运行到手机端，需用数据线手机与电脑相连，这个方法不支持IOS端，IOS申请开发认证十分困难

运行到小程序

前提需要安装好微信开发者工具

同样需要填入路径

里面还有许多平台，都是同样的道理

uniapp的view标签就是div标签，关于uniapp的标签使用我们可以来到官网下进行查看其内置组件组件使用的入门教程 | uni-app官网 (dcloud.net.cn)

每个组件的兼容性都不同

---

并且uniapp里面也内置了一些icon图标，当然我们也可以使用第三方的icon。基础内容中的rich-text就是富文本，也就是v-html，uniapp的图片用的image标签。uniapp的App.vue不可做为一个页面去展示

并且uniapp适用于最新版本的vue语法，可以使用组合式API

生命周期

uniapp是为开发应用而生，对于vue自带的生命周期显然是不够用的，因此uniapp自带了许多生命周期，比如用户分享触发的钩子，页面加载的钩子，页面显示的钩子……

vue自带的生命周期

vue 自带的生命周期在uniapp中都能使用，vue的生命周期只是用来作页面的，uniapp需要应用端

页面生命周期

uniapp 提供了 页面生命周期，比如上拉加载，下拉刷新，页面渲染完成……

应用生命周期

整个app应用的状态变化，只在App.vue中使用。比如下面的钩子

1. onLaunch: 应用打开时触发的
2. onShow: 后台进入前台触发
3. onHide: 前台进入后台
4. onThemeChange: 主题色变化，比如晚上颜色变暗黑主题

全局变量

main.js中有两种语法

被#ifndef 和#endif包裹，n就是no的意思，表示除了这个对象，其余内容都可兼容，比如写的vue3，那么除了vue3的代码都可以兼容

被#ifdef 和#endif包裹，表示这个代码只能兼容这个对象，比如写的vue3，那么只能兼容vue3，如果可以被包裹多个，用||连接

所以当我们写vue2的语法的时候就会启用上面的代码，写vue3的时候就会启用下面的代码

包裹的部分用于写全局内容，比如你可以在里面定义全局变量

1. Vue.prototype.name = '测试名称' optionsAPI才可以这样用
2. 在App.vue中设置

globalData: {
	name: '全局'
}

1. Vuex

路由

当我们新建页面的时候，pages.json路由配置文件中会帮我们自动引入页面路由，navigationBarTitleText就是路由守卫的标题，enablePullDownRefresh是下拉刷新。

另外，当我们在某个页面跳转路由时，不需要进行引入，比如你直接在点击事件的函数中写入uni.navigateTo即可

const goAbout = () => {
	uni.navigateTo({
		url: '/pages/about/about'
	})
}

当然，你也可以用标签跳路由，标签名为navigator

<navigator url="/pages/about/about">去关于页面</navigator>

接口请求

vue里面接口请求官方推荐我们使用axios，这里我们直接在生命周期中写uni.request即可

onMounted(() => {
	uni.request({
		url: '接口地址',
		method: '', // get，post等
         // success: (res => {……}) 老版本回调写法
	}).then(res => {  // 新版本引入了promise，可写.then
		// ……	
	})
})

另外，有时候可能网络等原因，接口请求假设需要花上个3s的样子，用户在等待的过程中，可能会退出页面，那么这个接口请求是可以废弃掉的，写法如下，用abort方法，这是个优化策略。

onMounted(() => {
	const reqTask = uni.request({
		url: '接口地址',
		method: '', // get，post等
         // success: (res => {……}) 老版本回调写法
	}).then(res => {  // 新版本引入了promise，可写.then
		// ……
	})
})

onUnmounted(() => {
	reqTask.abort() // 写在页面卸载的钩子中
})

说到接口请求，有时候项目可能你一个人完成，后端的话你可以在easymock网站中自己弄一个假接口，里面可以生成很多数据

同样的网站还有fastmock

本地存储

接上，拿到数据后，我们可以存入本地。写法用uni.setStorage

onMounted(() => {
	// 发请求
	const reqTask = uni.request({
		url: '',
		method: 'GET',
		success: (res) => {
			uni.setStorage({  // 存入本地
				key: 'movieName',
				data: res.data.movieList[0].nm,
				success() {  // 存成功走此回调
					uni.showToast({  // uniapp自带的弹出框
						title: '保存成功',
						duration: 2000, // 也可以用隐藏弹出框终止掉
						icon: 'success'
					});
				}
			});
		}
	});
	// reqTask.abort()  // 断接请求
});

存入成功，我们可以用一个uniapp自带的弹出框uni.showToast(OBJECT) | uni-app官网 (dcloud.net.cn)

setStorage不仅适用于网页端，还适用于app端，app端也是有本地存储的。

scss

uniapp官方默认让你用scss写css。scss定义变量用的是$符号

在uniapp，默认的单位是rpx，和小程序一致。rpx是response响应式的px，可以根据屏幕宽度自适应，规定以750(iphone6的两倍)rpx为

所以rpx你可以理解为物理像素，iphone6是两倍屏，宽度为375但是有750个物理像素

2 rpx === 1 px px是css的标准单位

一般设计师给你的设计稿就是750px，我们量到一个容器是多少px就写多少rpx，uniapp的设置中，有个rpx和px的转换选项，那么比例就是1

如果设计师给你设计稿是375px的，那么就需要提前将这个比例调成0.5。640就是640/750，自己算下即可

图标

在uniapp中找不到图标，可以去下载iconfont阿里巴巴，放到目录common中，并且需要在App.vue的style中引入iconfont.css

不建议使用在线链接，因为有时候用户是离线使用应用的

比如我在某个uniapp页面中使用某个阿里图标

<view class="iconfont">&#xe600</view>

在线使用得话，写法与vue一致，引入在线链接放在App.vue，用法如下

<view class="iconfont icon-yinle"></view>

最后

如果有vue开发的基础，那么uniapp上手将会非常快，其文档也写的非常详细

另外有不懂之处欢迎在评论区留言，如果觉得文章对你学习有所帮助，还请”点赞+评论+收藏“一键三连，感谢支持！