当前位置:   article > 正文

uni-app简单入门_uni app菜鸟教程

uni app菜鸟教程

一. uni-app的简单介绍

  1. 什么是uni-app?
    uni-app 是使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。

  2. uni-app的优点?

    跨平台发行,运行体验更好

    • 与小程序的组件、API一致;
    • 兼容weex原生渲染,增加了开发效率高,但是由于weex坑比较多,建议还是使用局部渲染优化;

    通用前端技术栈,学习成本更低

    • 支持vue语法,微信小程序API
    • 内嵌mpvue

    开发生态,组件更丰富

    • 支持通过npm安装第三方包
    • 支持微信小程序自定义组件及JS SDK
    • 兼容mpvue组件及项目(内嵌mpvue开源框架)
    • App端支持和原生混合编码
    • 插件丰富,DCloud将发布插件到市场
  3. uni-app和vue的区别?

    这篇文章关于这问题讲的很详细,分享给大家,希望我们对uni-app有一个更深的理解

    uni-app和vue的区别

二. 功能框架浏览图
在这里插入图片描述
三 . 接下来的很重要,就是怎么去创建一个uni-app项目

  • 首先就是安装HBuilderX

    可视化的方式比较简单,HBuilderX内置相关环境,开箱即用,无需配置nodejs。

    开始之前,当然先要下载HBuilderX:官方IDE下载地址

    • 小提示:ctril+N可以快速调转到新建选择类型
      在这里插入图片描述
  • 创建uni-app
    在这里插入图片描述

  • 运行项目
    在这里插入图片描述

  • 官方提示

    • static 目录下的 js 文件不会被编译,如果里面有 es6 的代码,不经过转换直接运行,在手机设备上会报错。
    • css、less/scss 等资源同样不要放在 static 目录下,建议这些公用的资源放在 common 目录下。

四 . 学习框架

  1. 项目结构介绍
    1.1 项目结构介绍
    在这里插入图片描述

  2. 开发规范
    2.1 uni-app约定的开发规范
    + 页面文件遵循 Vue 单文件组件(SFC)规范
    + 组件标签靠近小程序规范,详见 uni-app组件规范
    + 接口能力(JS API)靠近微信小程序规范,但需将前缀 wx替换为uni,详见uni-app接口规范
    + 数据绑定及事件处理同Vue.js 规范,同时补充了App及页面的生命周期
    + 为兼容多端运行,建议使用flex布局进行开发
    2.2 uni-app开发的注意事项
    a. html标签
    uni-app的tag同小程序的tag,和HTML的tag不一样,比如div要改成view,span要改成text、a要改成navigator。

    b.CSS

    推荐使用flex布局模型
    单位方面,uni-app 支持的通用 css 单位包括 px、rpx
    (早期 uni-app 提供了 upx ,目前已经推荐统一改为 rpx 了)

    c. JS

    只有H5端可使用浏览器内置对象,比如document、window、localstorage、cookie等,以及jquery等依赖。

    d. 项目文件
    显示页面必须放到pages目录下,页面所在目录的目录名需要放入相同名称的.vue文件。
    在这里插入图片描述
    静态资源如图片,固定放到static目录下。这是webpack、mpvue的规则
    e. echats图表
    H5端流行的echart报表因为涉及大量dom操作,无法跨端使用,而wx-chart在跨端和更新方面都不足,推荐使用uChart组件。如仍然坚持使用原版echart,可在web-view组件中内嵌html来使用。

  3. 页面样式与布局
    3.1 尺寸单位
    uni-app支持一下css单位:

单位介绍
px屏幕像素
upxuni-app提供根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,屏幕变宽,upx实际显示效果会等比放大
vh是视窗高度的百分比
单位换算设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx

注意问题: 动态绑定的 style 不支持使用 upx,因为upx是编译器处理的,在手机端动态修改样式赋值时,无法直接使用 upx。

解决方案: 使用 uni.upx2px(Number) 转换为 px 后再赋值。

this.cWidth = uni.upx2px(750);
  • 1

3.2 样式导入

<style>
    @import "../../common/color.css";
    .colorA {
        box-shadow: none;
    }
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

3.3 内联样式

支持 style 和 class来控制样式,但建议不要在style中直接使用,影响渲染速度。

3.4 所支持的选择器

在这里插入图片描述3.5 背景图片和字体图标

  • 支持 base64 格式图片。
  • 支持网络路径图片。
  • 使用本地图片或字体图标需注意:
  1. 图片小于 40kb,uni-app 会自动将其转化为 base64 格式;
  2. 图片大于等于 40kb, 需开发者自己将其转换为base64格式使用,或将其挪到服务器上,从网络地址引用。
  3. 本地引用路径仅支持以 ~@ 开头的绝对路径(不支持相对路径)。
/* 背景图片 */
 .bgImg {
     background-image: url('~@/static/logo.png');
 }
/* 字体图标 */
 @iconImg {
     font-family: test1-icon;
     src: url('~@/static/iconfont.ttf');
 }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

3.6 条件编译

  1. 用特殊的代码做标记,不同标记里面的代码可以在不同平台里面执行。
  2. 支持的文件
    .vue
    .js
    .css
    pages.json
    各预编译语言文件,如:.scss、.less、.stylus、.ts、.pug
  3. 语法:以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。
    #ifdef:if defined 仅在某平台存在
    #ifndef:if not defined 除了某平台均存在
    %PLATFORM%:平台名称
	<!-- #ifndef APP-PLUS -->
	<text class="app-text">text</text>
	<!-- #endif -->
	
	<!-- #ifdef MP-WEIXIN -->
	<text class="weixin-text">text</text>
	<!-- #endif -->

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/676576
推荐阅读
相关标签
  

闽ICP备14008679号