uni-app学习总结1.什么是uni-app Uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编

1.什么是uni-app

Uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

2.怎么创建一个uni-app项目

a.使用hbuilderx ，官网推荐，因为：可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。

` 第一步：下载hbuilder

第二步：注册账号转存失败，建议直接上传图片文件。只有注册账号登录后，mainfest.json配置中才会分配一个uni-app应用标识

第三步：新建项目。

b.cli的方式。起新项目可以用这种方式

3.uni-app项目目录

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。

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

App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素，也就是没有<template>。

这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData

应用生命周期仅可在`App.vue`中监听，在页面监听无效。

[应用生命周期] [globalData] [全局样式]

应用生命周期

main.js是 uni-app 的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex。

首先引入了`Vue`库和`App.vue`，创建了一个`vue`实例，并且挂载`vue`实例。

4.怎么学习（官网，视频）

5.学习uni-app需要学习什么？

5.1 全局文件的配置，比如pages.json中配置tabbar(底部导航栏），app.vue ，main.js (参照上面的项目目录）

5.2 移动端适配 rem ,rpx

5.3 vue (基本语法：template,class,style,props,事件，组件->推荐使用easycom的方式，vuex)

5.4 uni-app的生命周期：应用的生命周期和页面的生命周期

5.5 uni-app的内置组件

视图容器

view scroll-view swiper cover-view

基础内容

icon text rich-text

表单组件

input label textarea checkbox radio slider switch edior picker

路由与页面跳转

navigator <view class=""> <navigator url="/pages/component/view/view">跳转到新页面-视图容器view页面</navigator> <navigator url="redirect/redirect?title=redirect" open-type='redirect'>在当前页打开</navigator> <navigator url="/pages/index/index" open-type='switchTab'>跳转tab页面-首页</navigator> </view>

...内容很多，此处省略，详见官网uniapp.dcloud.net.cn/component/n…

uni-app的扩展组件（uni-ui)

5.6 uni-app的api

      数据请求
      数据存储localStorage
      获取dom节点

5.7 uni-app的插件

  怎么安装和使用插件？

5.8 环境变量配置

在package.json中增加如下配置

  "uni-app": {
        "scripts": {
            "dev-h5": { 
                "title":"开发版xxx", 
                "browser":"chrome", 
                "env": {
                    "UNI_PLATFORM": "h5",  
                    "UNI_BASE_URL": "/api/api/risk-theory/factor"
                 },
                "define": { 
                    "DEV-H5": true 
                }
            },
            "test-h5": {
                "title": "测试版xxx",
                "browser": "chrome",
                "env": {
                    "UNI_PLATFORM": "h5",
                    "UNI_BASE_URL": "http://xxx/api/risk-theory/factor"
                },
                "define": {
                    "TEST-H5": true
                }
            },
            "prod-h5": {
                "title": "正式版xxx",
                "browser": "chrome",
                "env": {
                    "UNI_PLATFORM": "h5",
                    "UNI_BASE_URL": "https://xxx/api/risk-theory/factor"
                },
                "define": {
                    "PROD-H5": true
                }
            }
        }    
    }

在HBuilderX中运行时和发行时则分别选择不同的环境

下面可以查看目前运行的哪个环境

控制台打印process.env时，没有UNI_BASE_URL这一属性。但是打印process.env.UNI_BASE_URL是有值的。另外需要注意，在HBuilderX中预览该项目时，即使本地已开启了别的服务，可能也会使用同一个端口号，即2个项目公用一个端口号的情况，但是js代码不会执行，调用接口时响应内容为下面的情况

实际查看代码是因为没有执行js脚本

noscript标签的主要作用是在用户的浏览器不支持或禁用了JavaScript的情况下提供备用内容或功能。

6.性能优化 ask.dcloud.net.cn/article/396…

update 2024.06.28

官网已更新了uni-app-x ，支持跨平台开发，和原生应用一致

doc.dcloud.net.cn/uni-app-x/s…

uni-app学习总结