混合框架uni-app之环境搭建

一，简介

1.1 前两节主流混合框架ReactNative，Flutter已经讲过了，这节看下uni-app的环境搭建和使用。uni虽然在国际上没ReactNative，Flutter使用广泛，但由于简单，快速的特性，在国内使用者还是非常多的。

1.2 uni-app是使用Vue.js框架为支撑的跨平台混合框架，Vue也广泛用于web前端，小程序，H5的开发，其响应式编程特性深受前端web的喜爱，也是目前继AngularJS之后最流程的js框架。

二，开发工具

2.1 vue和uni主要开发工具是HbuilderX，也是目前开发js前端的最流行工具之一。

2.2 HbuilderX官网：https://www.dcloud.io/hbuilderx.html

2.3 创建uni项目

填写项目名，选择默认模板，vue版本选择3

项目结构

├─pages			    // 页面存放文件夹，等同于 微信小程序中的 pages
│  └─index			// 默认生成的页面
├─static			// 静态资源存放文件夹
└─uni_modules		// uni-app组件目录
│  └─uni-xxx		// uni-app 所提供的业务组件，等同于 微信小程序中的组件
├─App.vue			// 应用配置文件，用来配置全局样式、生命周期函数等，等同于 微信小程序中的app.js
└─main.js			// 项目入口文件
├─mainfest.json		 // 配置应用名称、appid、logo、版本等打包信息，
└─pages.json		// 配置页面路径、窗口样式、tabBar 等页面类信息，等同于 微信小程序中的app.json
└─uni.scss			// uni-app内置的常用样式变量

2.4 运行到浏览器

编译过程

可以看到运行成功

三项目配置

3.1 入口文件

3.2 vue也是支持热加载的，修改内容会立马更新内容

修改Hello为Hello World

会看到内容会同步更新

3.3 项目打包和运行配置 manifest.json

3.4 也可以一套代码发行和打包原生和小程序app

四，其它介绍

4.1 vue能和js，css相互调用

js引入

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js';
// 相对路径
import add from '../../common/add.js';

css引入

<style>
@import "../../common/uni.css";

.uni-card {
box-shadow: none;
}
</style>

静态资源引入

<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>

<image class="logo" src="../../static/logo.png"></image>

原生插件引入

const dcRichAlert = uni.requireNativePlugin('DCloud-RichAlert')

4.2 本节介绍结束，uni毕竟国内团队开发，中文文档丰富，更多了解可以浏览官方网址学习

https://uniapp.dcloud.net.cn/

混合框架uni-app之 环境搭建

猜你喜欢

混合框架uni-app之环境搭建