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: ‘./’,// 把应用部署在一个域名的根路径上

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值