混合框架uni-app之环境搭建_uniapp混合开发-CSDN博客

本文链接：https://blog.csdn.net/qq_29848853/article/details/130188388

一，简介

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

3.5 新建项目结构介绍

uni_modules                                项目根目录下
└── [plugin_id] // 插件 ID
    ├── uniCloud                           插件内的uniCloud内容会被虚拟合并到项目根目录的uniCloud中（注意：插件内的uniCloud目录，没有-aliyun,-tcb后缀）
    ├── components                         符合vue组件规范的uni-app组件目录，支持easycom规范
    ├── utssdk                             存放uts插件
    ├── hybrid                             存放本地网页的目录，详见
    ├── pages                              业务页面文件存放的目录 
    ├── static                             存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
    ├── wxcomponents                       存放小程序组件的目录，详见
    ├── license.md                         插件使用协议说明
    ├── package.json                       插件配置，必选(除此之外均`可选`)                          
    ├── readme.md                          插件文档
    ├── changelog.md                       插件更新日志
    ├── menu.json                          如果是uniCloud admin插件，可以通过menu.json注册动态菜单，详见 menu.json 配置

四，其它介绍

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>

原生插件引入