基于vue的uni-app生态——学习笔记001

Posted 『love』归零

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于vue的uni-app生态——学习笔记001相关的知识，希望对你有一定的参考价值。

目录

vue的简介

什么是vue.js

vue相比传统的js开发优势有哪些

vue的优势

与传统的开发文件相比的类型变换

与传统的开发相比开发文件内部架构的变化

uni-app生态（编辑器的使用）

编辑器的下载

编辑器的使用

基于vue开发的uni-app生态的文件结构

创建完一个新的目录后，文件结构如下

​编辑

各个文件夹的作用及使用方式

关联服务空间文件夹

关联云服务空间说明

创建项目中页面文件夹

 静态资源文件夹

引用或下载的网络组件文件夹

 App.vue文件

入口文件

vue项目的入口文件

uni-app生态的基础配置文件

页面路由配置文件

控制应用的风格文件

 

vue的简介

什么是vue.js

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。

Vue.js 使用了基于 html 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，只关注视图层，易于上手。所有东西都是响应式的。

vue相比传统的js开发优势有哪些

在传统开发中，用原生的 javascript DOM 操作函数对 DOM 进行频繁操作的时候，浏览器要不停的渲染新的 DOM 树，导致页面看起来非常卡顿。

vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和 DOM ，这样大大加快了访问速度和提升用户体验。

vue的优势

  • 轻量级渐进式框架
  • 视图、数据和结构的分离
  • 响应式双向数据绑定
  • 组件化
  • 虚拟DOM
  • 运行速度快，易于上手
  • 便于与第三方库或既有项目整合

与传统的开发文件相比的类型变换

  • 以前是.html文件，开发也是html，运行也是html。
  • 现在是.vue文件，开发是vue，经过编译后，运行时已经变成了js文件。
  • 现代前端开发，很少直接使用HTML，基本都是开发、编译、运行。所以 uni-app 有编译器、运行时的概念。

与传统的开发相比开发文件内部架构的变化

以前一个 html 大节点，里面有 script 和 style 节点

	<!DOCTYPE html>  
	<html>  
		<head>  
			<meta charset="utf-8" />  
			<title></title>  
			<script type="text/javascript">  
			</script>  
			<style type="text/css">  
			</style>  
		</head>  
		<body>  
		</body>  
	</html>

现在 template 是一级节点，用于写tag组件， script 和 style 是并列的一级节点，也就是有3个一级节点。这个叫vue单文件组件规范sfchttps://cn.vuejs.org/v2/guide/single-file-components.html

	<template>  
		<view>  
		注意必须有一个view，且只能有一个根view。所有内容写在这个view下面。  
		</view>  
	</template>  
	<script>  
		export default   
		  
	</script>  
	<style>  
	</style>

uni-app生态（编辑器的使用）

编辑器的下载

1.编辑器：HBuilder X

2.编辑器下载地址：HBuilderX-高效极客技巧 (dcloud.io)

3.编辑器的图标：

 

编辑器的使用

1.选择”文件“、”新建“、”项目“

 然后显示的时一下的界面：

界面左边：

项目栏中：”uni-app“、"Wap2App"、”5+App“、”IDE插件“

界面右边：

1.输入”项目名称“

2.选择项目文件存储的本地位置

3.选择模板

4.选择vue版本，这里有vue2和vue3的版本供我们选择

5.如果开发者没有服务器的话，可选择unicloud云开发（阿里云/腾讯云）

6.我们也可以选择将我们的代码上传到Gitcode平台

 7.最后我们点击创建，就可以创建完成一个空的项目了（当我们创建完项目后，控制台里面会弹出”***创建成功“，就表明我们的项目创建成功了）

 

基于vue开发的uni-app生态的文件结构

创建完一个新的目录后，文件结构如下

各个文件夹的作用及使用方式

关联服务空间文件夹

关联云服务空间说明

说明：当我们创建项目文件时，选择”启用unicloud“云开发时，我们进入项目后就会显示一个”关联服务空间“的一个文件名提示。

1.右键选择”关联云服务空间或项目“

2.选择后，如果我们还没有服务空间，就得新创建一个服务空间

 3.我们选择我们的服务套餐

 4.创建好之后，我们就可以进入我们创建的云服务空间了

 5.返回到我们的HBuilder X编辑器，选择我们已经创键好的云服务空间

 6.选择后，我们会发现，我们创建的项目目录里面已经匹配上我们的云服务空间了

创建项目中页面文件夹

1.我们右键”pages“，选择”新建页面“

2.我们输入我们要创建页面的名字以及选择开发的模板，最终会创建一个vue的文件。

注意：红色圆圈里面的一定要勾选上，否则，我们需要手动去配置，不然我们后期写跳转或者页面联动的时候，就会出bug！

3.创建完成

4.查看pages.json文件里面的页面路径配置

 静态资源文件夹

静态资源文件夹里面存储的都是我们开发时候用到的图片或者视频等一些资源，比如：

新的项目创建后会自动给我们一个logo图标：

 

引用或下载的网络组件文件夹

此文件夹里存放的都是，比如：我们开发时候所用到的一些网络下载的组件（ui组件等）

 App.vue文件

为此项目文件的全局文件，开发时可借用此文件创建全局变量或全局样式等。

举例（全局样式）：

 

入口文件

对于vue来说index.html是一个总的入口文件，vue是单页面应用，挂在id为app的div下，然后动态渲染路由模板。

 

 vue项目的入口文件

 

main.js是项目的入口文件，项目中所有的页面都会加载main.js,所以main.js,主要有三个作用：

1.实例化Vue。
2.放置项目中经常会用到的插件和CSS样式。例如： 网络请求插件:axios和vue-resource、图片懒加载插件：vue-lazyload
3.存储全局变量。例如（用于的基本信息）

import App from './App'

// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'

try 
  function isPromise(obj) 
    return (
      !!obj &&
      (typeof obj === "object" || typeof obj === "function") &&
      typeof obj.then === "function"
    );
  

  // 统一 vue2 API Promise 化返回格式与 vue3 保持一致
  uni.addInterceptor(
    returnValue(res) 
      if (!isPromise(res)) 
        return res;
      
      return new Promise((resolve, reject) => 
        res.then((res) => 
          if (res[0]) 
            reject(res[0]);
           else 
            resolve(res[1]);
          
        );
      );
    ,
  );
 catch (error)  

const app = new Vue(
  ...App
)
app.$mount()
// #endif

// #ifdef VUE3
import  createSSRApp  from 'vue'
export function createApp() 
  const app = createSSRApp(App)
  return 
    app
  

// #endif

 uni-app生态的基础配置文件

 此文件可在项目打包发布或配置时使用

具体的详情可见：uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/

 页面路由配置文件

此文件就是我们上面创建pages页面的时候我们勾选自动配置pages.json的文件

作用：配置我们项目中创建页面的路由、移动端可创建tabBar、创建每个页面的标题等

详情可查看:uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/collocation/pages.html#%E9%85%8D%E7%BD%AE%E9%A1%B9%E5%88%97%E8%A1%A8

 控制应用的风格文件

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

uni.scss是一个特殊文件，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的编译器在webpack配置中特殊处理了这个uni.scss，使得每个scss文件都被注入这个uni.scss，达到全局可用的效果。如果开发者想要less、stylus的全局使用，需要在vue.config.js中自行配置webpack策略。

注意：

  1. 如要使用这些常用变量，需要在 HBuilderX 里面安装 scss 插件；
  2. 使用时需要在 style 节点上加上 lang="scss"。
  3. pages.json不支持scss，原生导航栏和tabbar的动态修改只能使用js api
<style lang="scss">
</style>

相关变量

/* 颜色变量 */

/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;

/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色

/* 边框颜色 */
$uni-border-color:#c8c7cc;

/* 尺寸变量 */

/* 文字尺寸 */
$uni-font-size-sm:24rpx;
$uni-font-size-base:28rpx;
$uni-font-size-lg:32rpx;

/* 图片尺寸 */
$uni-img-size-sm:40rpx;
$uni-img-size-base:52rpx;
$uni-img-size-lg:80rpx;

/* Border Radius */
$uni-border-radius-sm: 4rpx;
$uni-border-radius-base: 6rpx;
$uni-border-radius-lg: 12rpx;
$uni-border-radius-circle: 50%;

/* 水平间距 */
$uni-spacing-row-sm: 10px;
$uni-spacing-row-base: 20rpx;
$uni-spacing-row-lg: 30rpx;

/* 垂直间距 */
$uni-spacing-col-sm: 8rpx;
$uni-spacing-col-base: 16rpx;
$uni-spacing-col-lg: 24rpx;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:40rpx;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:36rpx;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:30rpx;

 详情可查看:uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/collocation/pages.html#%E9%85%8D%E7%BD%AE%E9%A1%B9%E5%88%97%E8%A1%A8

持续更新uni-app学习笔记

2022.5.19 updated 

优先级

1）官方手册优先

uni-app官网uni-app：一个使用 Vue.js 开发跨平台应用的前端框架https://uniapp.dcloud.io/README2）面向效果找组件

内置组件 扩展组件https://hellouniapp.dcloud.net.cn/pages/component/view/view3）v-for等指令手册（vue手册，因为uni-app基于vue）

指令 | Vue.jsVue.js - The 渐进式 JavaScript 框架https://v3.cn.vuejs.org/api/directives.html

烂笔头

...乱序笔记...