uniapp 知识点 总结 （2023 持续更新....）

一、uniapp 和 微信小程序 ？

  小程序是一种不需要下载安装即可使用的应用，微信小程序又称为 原生小程序，是因为最先是由微信提出的，在之前App应用无论是开发还是推广方面，成本都居高不下，微信团队在微信上做了个入口，用户只需点击它，即可进入一个类似于“应用商城”的平台，并在此完成在一个APP里所要做的事情。而在这个平台中，大多数的程序都是基于H5相关技术进行开发的，“小程序”中的H5页面应用则尽可能地将这两项成本降低，改变互联网市场中的应用规则，用户既可基于成本较低的H5技术来开发应用，也可依附于微信的入口进行推广；同时，H5轻巧灵便的特质也会使得“小程序”里的应用更为流畅，用户可以拥有更好的使用体验，可是微信小程序只能在微信里使用，而uniapp一套代码可以生成多端，突破了系统对H5调用原生能力的限制

二、uni.scss pages.json manifest.json

• uni.scss 存放公共样式
• pages.json 用来对 uni-app 进行全局配置 ，路径配置，应用的状态栏，导航条，标题，窗口背景色设置等
• manifest.json 应用配置，用于指定应用的名称，图标，权限等，设置appid、版本等打包信息，HBuilderX创建的工程此文件在根目录，CLI创建的工程此文件在src目录里

三、B/S 和 C/S

• b/s 浏览器/客户机 比如在线音乐播放器，它是一种三层结构，数据库服务器 —— web应用服务器 —— 浏览器
  客户无需安装专用软件，只要浏览器就 ok 了，也正是如此，b/s 建立在WAN上，其安全控制能力比较弱，并且是个不可知的用户组
• c/s 服务器/客户机 比如QQ音乐播放器，它是一种二层结构，数据库服务器 —— 客户端
  客户需要安装专用软件，运行效率高，服务器通常使用高性能pc,工作站或小型计算机，并使用大型数据库系统
  c/s 一般建立在专用网络，小范围的网络环境中，然后通过专用LAN服务器提供连接和数据交换服务
  c/s 程序可以更加注重进程，可以检查多级权限，并可以较少考虑系统的运行速度。

四、uniapp 和 h5 的区别

• 网络模型的不同

    以前网页大多采用 b/s ，服务端代码混在页面里，
    现在是 c/s , 前后端分离，通过 js api 获取 json 数据，再进行界面渲染

• 文件类型的不同

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

• 外部文件引用方式不同

     以前通过script src、link href引入外部的js和css；
    现在是es6的写法，import引入外部的js模块或css （模块不是文件，是对象）

• 组件/标签的变化

    div 改成 view
    span、font 改成 text
    a 改成 navigator
    img 改成 image
    form、button、label、textarea、canvas、video 这些还在。
    select 改成 picker
    iframe 改成 web-view
    ul、li没有了，都用view替代。做列表一般使用uList组件
    audio 不再推荐使用，改成api方式，

     除了改动外，新增了一批手机端常用的新组件

    scroll-view 可区域滚动视图容器
    swiper 可滑动区域视图容器
    icon 图标
    rich-text 富文本（不可执行js，但可渲染各种文字格式和图片）
    progress 进度条
    slider 滑块指示器
    switch 开关选择器
    camera 相机
    live-player 直播
    map 地图
    cover-view 可覆盖原生组件的视图容器
    cover-view需要多强调几句，uni-app的非h5端的video、map、canvas、textarea是原生组件，层级高于其他组件。如需覆盖原生组件，则需要使用cover-view组件。详见层级介绍
    除了内置组件，还有很多开源的扩展组件，把常用操作都进行封装，DCloud建立了插件市场收录这些扩展组件，详见插件市场

• 组件/标签的变化

    运行环境从浏览器变成v8引擎
    以前的dom操作，改成vue的MVVM模式
    因为uni-app的api是参考小程序的，所以和浏览器的js api有很多不同

• css的变化

    选择器有2个变化：*选择器不支持；元素选择器里没有body，改为了page。微信小程序即是如此。

五、uniapp生命周期

  详见 ：uniapp 生命周期 来源于夏夏好好哒

六、新建、删除、启动页面

  每次新建页面，均需在pages.json中配置pages列表；
  同理，删除.vue文件的同时，也要在 pages.json 的 pages 列表项中删除配置
  uni-app会将pages.json -> pages配置项中的第一个页面，作为当前工程的首页（启动页）

七、页面调用接口

八、组件之间传值

九、路由跳转

  开发者需要在pages.json里配置每个路由页面的路径及页面样式，也可以使用插件像vue使用vue-router一样管理路由
  uni-app 有两种页面路由跳转方式：使用 navigator组件 跳转、 调用API 跳转。

十、px rpx rem vh vw

  px 固定单位，像素
  rpx 相对单位，会跟随屏幕改变大小 屏幕默认750rpx
  rem 相对单位，会跟随父盒子改变大小
  vh 相对于屏幕高度 1%
  vw 相对于屏幕宽度 1%

十一、解决跨域

  在vue.config.js 配置文件里配置desServer.proxy 将请求过来的baseUrl 替换为target
  vue.config.js 他是配置文件 自动编译
  desServer 配置开发环境，用于本机的开发和调试
  publicPath: ‘./’,// 把应用部署在一个域名的根路径上