• uniapp基础



    一.创建uniapp项目
    1.cli脚手架==>vue-cli==> vue create -p dcloudio/uni-preset-vue my-project

    2.hbuildx IDE 创建项目

    ****命令行创建项目和IDE创建项目的区别:1.编译器安装位置不同,并且通过命令行创建的项目的编译器不会跟随IDE升级,如果需要升级则需手动升级。
    IDE创建的项目的编辑器安装在hbuildX的安装目录下的plugin目录,会跟随IDE自动升级。
    2.cli创建的项目不会自动安装less,scss等编译器,需手动安装。

    二.运行、发布uni-app
    1.npm run dev:%PLATFORM%

    2.npm run build:%PLATFORM%

    3.%PLATFORM%取值:app-plus、h5、mp-alipay、mp-baidu、mp-weixin、mp-toutiao、mp-360、mp-qq等

    三.H5,APP,小程序各端的管理规则
    1.H5端的浏览器有跨域限制

    2.微信小程序强制要求https链接,并且所有域名都需要配置到微信白名单中

    3.APP端,IOS对隐私控制和虚拟支付控制非常严格

    等等

    四.开发规范
    1.页面文件遵循VUE单文件组件(SFC)规范,<template>、<script> 和 <style>,地址:https://vue-loader.vuejs.org/zh/spec.html#%E7%AE%80%E4%BB%8B

    2.组件标签靠近小程序规范,地址:https://uniapp.dcloud.io/component/README

    3.接口能力(JS API)靠近微信小程序规范,但需将前缀wx替换为uni,地址:https

    4.数据绑定及时间处理同vue.js规范,同时补充了APP及页面的生命周期

    5.为了兼容多端运行,建议使用flex布局进行开发

    五.目录结构和资源文件
    1.编译到任意平台,static目录下的文件均会被打包进去,非static目录下的文件(vue,js,css等)被引用到才会被打包进去。

    2.static目录下的js文件不会被编译,如果里面有es6的代码,不经过转换直接运行,在手机设备上会报错

    3.@开头的绝对路径和相对路径会经过base64转换规则校验

    4.H5平台,小于4kb的资源会被转换成base64,其余不转

    5.支付宝小程序组件内image标签不可使用相对路径

    六.生命周期
    1.路由,页面路由由框架统一管理,需在pages.json里配置每个页面的路径及页面样式

    2.路由跳转,两种跳转方式,通过navigator组件跳转,或通过API进行跳转

    3.页面栈
    3.1 初始化,新页面入栈
    3.2 打开新页面,新页面入栈
    3.3 页面重定向,当前页面出栈,新页面入栈
    3.4 页面返回,页面不断出栈,直到目标返回页
    3.5 Tab切换,页面全部出栈,只留下新Tab页面
    3.6 重加载,页面全部出栈,只留下新的页面

    七.运行环境判断
    1.开发环境和生产环境,process.env.NODE_ENV == 'development' or 'production'

    2.平台判断,分为编译期判断和运行期判断
    2.1编译期判断,即条件编译,不同平台在编译出包后已经是不同的代码 #ifdef %PLATFORM% #endif
    2.2运行期判断,指在已经编译好的包中,仍然需要在运行期判断平台, uni.getSystemInfoSync().platform

    八.页面样式与布局
    1.支持通用的css单位包括px rpx

    2.vue页面支持普通H5单位,但在nvue里不支持,rem 根字体大小可以通过 page-meta 配置,vh viewpoint height,视窗高度,1vh等于视窗高度的1%,vw viewpoint width,视窗宽度,1vw等于视窗宽度的1%

    3.nvue还不支持百分比单位

    4.App端,在pages.json里的titleNView或页面里的plus api中涉及的单位,仅支持px。注意不支持rpx。

    5.设计稿比例换算, 设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx 换而言之 750 * 元素在设计稿中的宽度 / 设计稿基准宽度
    举例说明
    若设计稿宽度为 750px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 750,结果为:100rpx。
    若设计稿宽度为 640px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 640,结果为:117rpx。
    若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,那么元素 B 在 uni-app 里面的宽度应该设为:750 * 200 / 375,结果为:400rpx。

    6.样式导入,@import ../demo.css

    7.内联样式,style静态样式统一写到class中。style接收动态样式,在运行时会进行解析,请尽量避免将静态样式写进style中以免影响渲染速度。

    8.选择器,.class, #id, element(组件名称), element element(组件名称,组件名称), ::after 在组件后插入内容, ::before 在组件前插入内容

    9.全局样式与局部样式,css变量 --status-bar-height 系统状态栏高度,--window-top 内容区域距离顶部的距离,--window-bottom内容区域距离底部的距离

    10.固定值,导航栏高度 44px 底部选项卡高度 50px

    11.图标,支持使用字体图标,使用方式与普通 web 项目相同

  • 相关阅读:
    个人阅读笔记05—数据流图
    JVM(三)程序计数器【PC寄存器】
    JVM(三)运行时数据区的概述,线程概述
    JVM(二)表示两个Class对象是否为同一个类;Java程序对类的使用
    我的面试经之JVM(二)双亲委派机制
    我的面试经之JVM(二) ClassLoader补充【获取类的加载器的方式】
    我的面试经之JVM(二)类加载器的分类
    我的面试经之JVM(二)类加载器子系统ClassLoader类的加载过程
    Python小白要了解的模块大概用途(随学习进度更新),import xxxx
    Python常见的模块(知乎转载)
  • 原文地址:https://www.cnblogs.com/wmzll/p/14426137.html
Copyright © 2020-2023  润新知