uni-app官方解释是一款用vuejs开发前端应用的跨端框架,从官方解释的第一句话,其实就可以看出,uni-app集成了vuejs所有特性,然后具有跨端的特性,什么是跨端,通俗理解就是使用uni-app一套代码开发h5,App,微信小程序,快应用,支付宝小程序QQ小程序等等。

看到上面uni-app可以开发多个平台应用,是不是内心很兴奋,what,androidios程序员是不是要失业了,千万不要让我老板看到这种技术,我只会原生ios,android开发,什么?一套代码代码多端运行?我只是一个切图的,我还要做小程序?APP?快应用?

除了吃惊,更多的是uni-app简直是万能钥匙啊,面对复杂的多端兼容性需求,程序员掉头发肯定少不了,特别是小程序那主包不得超过1.5M,总包不得超过2M的要求,你能想像所有的微信小程序都是2M以内的,而我一张高清图都有6M了,除了优化再优化,没有更好的选择。

本文是一篇uni-app入门的笔记,uni-app这个系列大概会写十来篇,主要会从uni-app云开发,会以实际例子由浅入深认识uni-app云开发,同时也是记录开发中遇到的一些坑。

正文开始...

在开始本文之前,本文主要以下几个方面认识uni-app

  • uni-app初始化基础项目有哪些关键目录

  • pages.jsonmainifest.json文件,探究对应配置项

  • eazycom全局注册组件,条件编译多端代码

  • uni-appweb开发的区别

HbuildērX

使用用uni-app开发跨端项目,必不可少的一个开发工具就是使用HbuilderXopen in new window,官方提供了两种方式创建uni-app

  • 可视化界面,这种方式是官方推荐的首选,使用官方插件时非常方便
  • 命令行vue-cli,对于喜欢命令行的,可以用这个,但个人认为使用可视化界面要高效得多

开始一个基础项目

打开HBuilderX文件>新建>项目选择一个uni-app最简单的默认模版

新建一个02-uni-demo大概结构就下下面这样

我们可以看到初始化的目录结构与我们普通项目没什么太大的区别,但还是有些区别,因为我们看到项目里有uniCloud

uni-Cloud下主要有两个目录,一个是database,另一个是cloudfunctions,这两个目录是云开发的关键,在开始云开发前,你必须关联一个服务空间open in new window。注意在使用之前,我们必须用邮箱注册登陆HbuilderX,然后用账号登陆uni-Cloud创建一个空间,不过此空间是免费,你只能创建一个免费空间,且云函数读取次数只有500次/天,这量太不够用了,相信我你一定会花钱的,但是不得不说也非常便宜。

  • database这个目录是xx.scheme.json文件,当我们在该目录下新建db schema时,我们在前端页面可以直接使用云函数连接对应的表

  • cloudfunctions这个目录是存放云函数云对象

关于云函数,云对象,还有db schema我会在后续的云开发中陆续揭开

当我们使用HBuilderX创建一个基础项目后,我们是怎么运行的呢?

当我们运行到浏览器时,我们就可以打开页面了

这个默认的页面路由就是pages/index/index.vue,同时也是在pages.json中注册的第一个页面

pages.json

我们在普通的web开发中,我们的路由是会自己去手动注册,然后必须挂载在根实例上。但是uni-app你创建的每一个页面会注册在pages.jsonpages

  • pages.json
{
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}
  • router跳转

pages中,我们主要看到有path,这个path就是我们的路由地址,但是pages的第一个就是我们程序默认启动的首页,关于pagesopen in new window的配置我们会在后续中逐一讲解,我们也可以去官网看到更多的配置信息

我们尝试在pages中新建一个页面,我们在pages右键点击新建页面

此时我们在新建的页面中尝试加点自己的写的内容

pages/about/about.vue

<template>
	<view>
	    我是关于页面
	</view>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {}
	}
</script>
<style>
</style>

看到这个文件我们是不是非常的熟悉,是不是vue的味道?

是的,除了模版根标签是view,在script上所有的钩子函数都是与vue没有任何区别

开头我们就知道uni-app就是使用了vuejs开发跨端应用的,同时又新增了小程序API条件编译,所以你会看到在使用uni-app开发小程序时,你会看到小程序的API

当我们在浏览器输入地址http://localhost:8080/#/pages/about/about时就可以打开刚才你新建的一个页面了

关于uni-app中的路由跳转主要有以下三种

  • uni.navigateTo({url: 'xxx?id=123'}); 保留当前页面,前往另一个非tabBar页面,可以携带参数,当前页面不会被销毁,使用这个api跳转另一个页面时,使用uni.navigateBack返回上一个页面,只能打开非tabBar页面
<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view @click="goToAbout">前往关于页面</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',

			}
		},
		onLoad() {
		},
		methods: {
			goToAbout() {
					uni.navigateTo({
						url:"/pages/about/about"
					})
			}
		}
	}
</script>

<style>
</style>
  • uni.redirectTo关闭当前页面,前往另一个页面,与navigateTo的区别是,跳转的新页面不会有返回操作,只能打开非tabBar页面

  • uni.reLaunch关闭所有页面,前往指定页面,可以打开任意页面

  • uni.switchTab切换tabBar,只能打开tabBar的路由页面

关于这几个路由跳转的api触发页面钩子也会有所不同

当我们使用uni.navigateTo跳转about页面时,此时about页面的两个钩子会被触发onLoad,onShow。因为navigateTo不会销毁当前页面,所以在about页面返回上一个页面时会直接从页面栈中获取,此时只会触发onShow不会触发onLoad钩子

所以此时你会遇到一个场景,A页面onLoad钩子请求数据,在A页面列表也编辑进入详情页保存然后返回,你会发现此时页面不会更新,因为此时A页面不会触发onLoad钩子,所以此时请求放在onLoad钩子估计不太合适,所以要么你把请求放在onShow中,要么就想办法重新触发onLoad而重新触发onLoad你可以使用uni.reLaunch

关于路由跳转钩子在不同场景都会有不同的选择,更多细节参考官方文档routeropen in new window

  • globalStyle

我们看到基础配置就有这个,主要是全局设置默认页面窗口的基本公用样式,比如title导航、不同平台的默认首页样式,一般是pages的第一项为默认页

  • tabBar

这是我们切换底部tabBar的页面切换,最关键的就是list项的配置,当我们配置底部tabBar后,我们的页面底部就会出现三个切换项,这里的配置是同小程序是一样的

	{
   ...
      "tabBar": {
      "color": "#7A7E83",
      "selectedColor": "#3cc51f",
      "list": [{
          "pagePath": "pages/index/index",
          "text": "Web技术",
          "value": "1"
        },
        {
          "pagePath": "pages/engineer/engineer",
          "text": "工程化",
          "value": "0"
        },
        {
          "pagePath": "pages/my/my",
          "text": "我的",
          "value": "2"
        }
      ]
	}
  }
  • subPackages 这个选项能减少小程序主包的大小,算是优化小程序体积的一种有效手段,因为小程序主包限制1.5M,总体积不能超过2M,所以我们非常有必要将非tabBar页面尽可能的分包出去,从而会减少主包的大小

  • easycom

在官方文档上,HBuilderX 2.5.5支持eazycom自动引入组件模式,本质上就是按照官方规范,组件就可以自动注册,并全局使用,在打包后eazycom会剔除未使用的组件

关于规范引入官方一段原话

只要组件安装在项目根目录或uni_modules的components目录下,并符合components/组件名称/组件名称.vue或uni_modules/插件ID/components/组件名称/组件名称.vue目录结构,就可以不用引用、注册,直接在页面中使用

这段话翻译的简版就是在根目录,假设我创建一个全局组件,在components目录下创建一个custEditor的组件

components/custEditor/custEditor.vue这个组件就只要符合这种文件结构,那么我们就可以在其他页面上不用局部注册,就可以使用

<template>
	<view class="container">
		  <custEditor></custEditor>
	</view>
</template>
<script>
	// 这里不用import引入,也不需要在components内注册custEditor组件。template里就可以直接用
	export default {
		data() {
			return {

			}
		}
	}
</script>

另外一个就是在uni_modules中的符合这样的文件目录也会自动被注册

uni_modules/uni-badge/components/uni-badge/uni-badge.vue我们注意到所有官方插件都是这种目录结构,如果你想安装插件,就直接去官方插件市场搜索导入就可

直接导入你的HBuilderX即可

正常情况如果使用官方插件市场导入,那么会默认支持eazycom自动导入组件全局注册,而且eazycom是自动开启的,官方提供了可支持自定义配置

"easycom": {
  "autoscan": true,
  "custom": {
    "^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
    "^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件
  }
}

mainifest.json

这是一个配置文件,如果是小程序,那么需要配置对应的appid以及对应其他跨端的相关配置,目前只配置了小程序web配置,没有太多复杂东西,小程序只需要将微信公众号新注册的小程序appid填入即可

uni-app与web

如果没有开发过小程序,貌似这东西很高大上,但其实并没有太多新颖,微信小程序开发是有微信自己的一套语法API,有自己的标签,页面生命周期钩子,非常贴近vue语法。

掌握了vueJS与最基础的web开发,完全是很容易的上手小程序,而uni-app就是用vuejs语法开发小程序与跨端应用的。

uni-app页面布局就是用view标签,在uni-app中,这是一个内置组件,类似web中的div,是一个视图容器,在uni-app中根组件必须使用view标签包裹。

当然uni-app也提供了其他标签,比如scroll-viewswiper等,这些都是uni-app内置的组件,在web开发中,我们会使用div,span,img等标签,但是uni-app最基础的组件就是view,这个相当div,我们使用的uni-app内置组件非常有限,一般都是viewtext,而在布局样式上基本没有什么太大的区别

uni-app中提供了uni这样的api访问内置的一些方法,比如设置缓存,获取设备信息以及蓝牙等设备信息,与普通不同的web不同的是,uni-app在其他小程序是无法访问window对象,当只有运行h5时,才是运行在浏览器环境里,此时才可以访问window,document对象,否则在其他平台会报错,所以此时你可以使用条件编译来区分不同的端。

条件编译

在同一个工程项目里使用条件编译有选择的编译需要的代码

下面这块代码使用条件编译,我们发现是以单行注释的方式定义编译条件的,这块代码只会在H5端有作用

// #ifdef H5
window.location.href = 'xxx';
// #endif 

模版中的条件编译

<!--  #ifdef  H5 -->
  <view>只会在H5显示的内容</view>
<!--  #endif -->

css中的条件编译

/* #ifdef  H5 */
.h5box {
  width: 100%;
  height: 100rpx;
}
/* #endif */

我们只需要// #ifdef %PLATFORM% 开始,以// #endif结尾就可以标注这块代码块的条件编译

%PLATFORM%的取值参考官方文档PLATFORMopen in new window

条件编译真的是维护多端差异的一种必要手段,因为多端差异在同一个工程中,我使用该技术就可区别化不同端。

最后,最近写了一个个人小程序,前端就是使用uni-app开发的,后端使用uni-Cloud,有使用官方的插件uni-ui也有uView,登陆注册使用的就是官方的uni-id-pages,小程序后台使用的是uni-admin开发,基本实现了首页所有模块的增删查改。

总结

  • 主要使用认识一个最简单的uni-app项目,了解项目基本结构,以及对HBuilderX创建uni-app的初步认识

  • uni-app关键的pages.jsonmainifest.json相关配置项,当你新建页面时,会在pages.jsonpages注册路由,在tabBar中配置底部切换,mainifest主要是小程序端appid,其他也没什么太多的配置

  • eazycom自动注册全局组件,这种方式主要是遵循官方规范即可,全局组件主要有uni_moudlescomponents两种方式,也可在pages.json中自定义设置eazycom规则,默认是自动启动eazycom

  • 认识uni-app与普通web开发的一些不同,知道条件编译可以区分不同端,使用uni-app几本内置组件布局。小程序开发并没那么高大上,门槛也没有想象那么大,所以有小程序需求,如果是跨端项目,那么uni-app是一种比较可靠的技术方案

  • 本文示例code exampleopen in new window

扫二维码,关注公众号
专注前端技术,分享web技术
加作者微信
扫二维码 备注 【加群】
教你聊天恋爱,助力脱单
微信扫小程序二维码,助你寻他/她
专注前端技术,分享Web技术
微信扫小程序二维码,一起学习,一起进步
前端面试大全
海量前端面试经典题,助力前端面试