uni-app

uni-app的介绍

uni-app 是一个基于 Vue.js 开发的跨平台应用框架，它可以让开发者使用 Vue.js 开发一次代码，然后通过编译，将应用发布到多个平台，包括但不限于微信小程序、H5、Android 和 iOS。uni-app 的目标是实现一套代码，多端运行，从而大大提高开发效率。

以下是 uni-app 的一些特点和优势：

1. 跨平台开发：uni-app 支持一套代码编译到多个平台，包括但不限于微信小程序、H5、Android 和 iOS，开发者无需针对不同平台编写不同的代码。

2. 基于 Vue.js：uni-app 使用 Vue.js 作为主要的开发框架，开发者可以充分利用 Vue.js 的生态和语法来进行开发。

3. 高性能：uni-app 使用了优秀的跨端渲染引擎，能够保证在各个平台上的性能表现。

4. 丰富的组件库：uni-app 提供了丰富的 UI 组件库，开发者可以直接使用这些组件来构建应用界面，减少开发时间和成本。

5. 灵活的扩展性：uni-app 支持插件和原生扩展，开发者可以根据需要自由扩展应用的功能和能力。

6. 开放生态：uni-app 拥有一个活跃的社区和丰富的资源，开发者可以在社区中获取到各种技术支持和资源分享。

 uni-app的项目了解

• 默认创建的index，作为主页，启动显示blogs列表

• profile页，用于显示个人信息

• charts页，用于显示个人数据的统计图表

• 在static中添加静态资源，将静态资源放置在该目录下，然后在代码中通过相对路径引用这些静态资源，主要是一些icons。

• 在pages.json中修改全局外观配置，主要是标题栏文本和颜色

• 设置tabBar，在页面底部添加3个标签 

• 在pages.json中添加tabBar节点

• 设置color和selectedColor属性，设置图标及文本的不同状态颜色

• 设置list属性，tab页面数组，元素包括页面路由、文本、不同状态的图标路径

• 在manifest.json 文件，用于配置项目的基本信息，如应用名称、图标、页面路径等。开发者可以在此文件中配置项目的基本信息和全局样式。

根目录 

 

 

 

 

 

 

 

 

 

 

 

注意事项：

  目录结构规范

  命名规范

  代码规范

  代码规范

  注释规范

 项目必知

    绝对路径,需提供完整的 URL 地址，包括协议、域名和资源路径。

<image src="https://example.com/images/image.jpg">

   相对路径，需提供相对于当前文件的路径

<image src="../../static/images/image.jpg">

   js文件引入

 import common from '@/utils/common.js'

import common from '../../utils/common.js'

   css文件引入

@import "../../styles/common.css"

@import "@/styles/common.css"

   常用组件和描述

  路由操作 

   定义路由表

   在 src/router 目录下创建一个 index.js 文件，定义应用的路由表，示例：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/pages/Home.vue';
import About from '@/pages/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
    // 其他路由配置
  ]
});

    在 App.vue 中使用路由

    在 App.vue 中，使用 <router-view> 标签来渲染当前路由对应的组件：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

<style>
/* 样式 */
</style>

   跳转页面

   使用 vue-router 的 router-link 组件或编程式导航方法来实现页面跳转。

   使用 router-link 组件：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

  编程式导航：

// 在方法中跳转
this.$router.push('/about');

// 或者使用命名路由
this.$router.push({ name: 'About' });

// 返回上一页
this.$router.go(-1);

   路由参数传递

   可以通过路由路径中的参数来传递数据，例如：

{
  path: '/user/:id',
  name: 'User',
  component: User
}

 路由守卫

  可以使用路由守卫来控制页面的访问权限和实现一些特定的逻辑，如 beforeEach、  beforeResolve、afterEach 等。

router.beforeEach((to, from, next) => {
  // 检查用户是否登录等逻辑
  next();
});

  路由懒加载

  为了提高应用的性能，可以使用路由懒加载，只在需要时才加载对应的组件。

{
  path: '/about',
  name: 'About',
  component: () => import('@/pages/About.vue')
}

数据缓存

 设置缓存：

uni.setStorage({
  key: 'key',
  data: 'value',
  success: function () {
    console.log('数据缓存成功');
  }
});

 获取缓存：

uni.getStorage({
  key: 'key',
  success: function (res) {
    console.log('缓存数据为：', res.data);
  }
});

 网络请求

   发起请求：

uni.request({
  url: 'http://example.com/api',
  data: {
    key: 'value'
  },
  method: 'GET', // 或 'POST'
  header: {
    'content-type': 'application/json' // 默认值
  },
  success: function (res) {
    console.log('请求成功', res.data);
  },
  fail: function (err) {
    console.error('请求失败', err);
  }
});

 发送表单数据：

uni.request({
  url: 'http://example.com/api',
  data: {
    key: 'value'
  },
  method: 'POST',
  header: {
    'content-type': 'application/x-www-form-urlencoded' // 表单数据格式
  },
  success: function (res) {
    console.log('请求成功', res.data);
  },
  fail: function (err) {
    console.error('请求失败', err);
  }
});

 上传文件：

uni.uploadFile({
  url: 'http://example.com/upload',
  filePath: 'filePath',
  name: 'file',
  formData: {
    key: 'value'
  },
  success: function (res) {
    console.log('上传成功', res.data);
  },
  fail: function (err) {
    console.error('上传失败', err);
  }
});

 下载文件：

uni.downloadFile({
  url: 'http://example.com/file',
  success: function (res) {
    console.log('下载成功', res.tempFilePath);
  },
  fail: function (err) {
    console.error('下载失败', err);
  }
});