uniapp学习笔记

1. 跨端兼容

在C语言中，通过 #ifdef、#ifndef的方式，为 windows、mac 等不同 os 编译不同的代码。 uni-app参考这个思路，为 uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。

条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。
#ifdef：if defined 仅在某平台存在
#ifndef：if not defined除了某平台均存在
%PLATFORM%：平台名称
%PLATFORM% 可取值如下：

值	平台	参考文档
APP-PLUS	5+App	HTML5+ 规范
APP-PLUS-NVUE	5+App nvue	Weex 规范
H5	H5
MP-WEIXIN	微信小程序	微信小程序
MP-ALIPAY	支付宝小程序	支付宝小程序
MP-BAIDU	百度小程序	百度小程序
MP-TOUTIAO	头条小程序	头条小程序

写到这里，我进入HTML5+ 规范的官网的时候，发现了自己觉得有意思的东西，那就是这个规范貌似就是中国产业联盟为使用JS前端语言来调用Android底层功能编写制定的标准。
在官网底部我找到了这句话：

Android
通过JS语法直接调用Native Java接口通道，可调用几乎所有的系统原生Java API

iOS
通过JS语法直接调用Native OC接口通道，可调用几乎所有的系统Objective-C API

也就是说，其实uniapp就是对上面的HTMLPlus规范的再封装。
突然想搞点东西了…

不说这些额外的话，继续阅读我们uniapp的官方文档。
其余的就不摘抄了，官网很全的。地址

2. 尺寸单位

uni-app 支持的通用 css 单位包括 px、rpx

• px 即屏幕像素
• rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。

rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx。

看到这里我们就不难知道，在实际开发中，编辑CSS的时候，就需要使用rpx而不是原先的px

App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px。注意此时不支持 rpx
也就是说，除了CSS布局的时候用rpx，其余的还是用px单位

开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：
设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx
换言之，页面元素宽度在 uni-app 中的宽度计算公式：
750 * 元素在设计稿中的宽度 / 设计稿基准宽度

3. 样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

<style>
    @import "../../common/uni.css";

    .uni-card {
        box-shadow: none;
    }
</style>

引入的是相对路劲，而不是绝对路劲。

4. 背景图片

uni-app 支持使用在 css 里设置背景图片，使用方式与普通 web 项目大体相同，但需要注意以下几点：

• 支持 base64 格式图片。
• 支持网络路径图片。
• 小程序不支持在css中使用本地文件，包括本地的背景图和字体文件。需以base64方式方可使用。App端在v3模式以前，也有相同限制。v3编译模式起支持直接使用本地背景图和字体。
• 使用本地路径背景图片需注意：

1. 为方便开发者，在背景图片小于 40kb 时，uni-app 编译到不支持本地背景图的平台时，会自动将其转化为 base64 格式；
2. 图片大于等于 40kb，会有性能问题，不建议使用太大的背景图，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用。
3. 本地背景图片的引用路径推荐使用以 [email protected] 开头的绝对路径。

 .test2 {
     background-image: url('[email protected]/static/logo.png');
 }

前几天开发，使用背景图的时候确实遇到了这个问题。今天看开发文档才找到源。
注意
在使用背景图片的时候，微信小程序不支持相对路径，真机不支持相对路径，仅开发工具支持相对路径。

接着还有字体图标，感觉对我用处不大，这里就不复制了。

5. <template/> 和 <block/>

uni-app支持在template模板中嵌套 <template/>和 <block/>，用来进行 列表渲染 和 条件渲染。

<template/> 和 <block/> 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

这个东西很常用，因为需要从后台渲染数据到前端。
但是之前不知道template这个元素标签也可以用户数据的条件渲染，例子：

<template>
    <view>
        <template v-if="test">
            <view>test 为 true 时显示</view>
        </template>
        <template v-else>
            <view>test 为 false 时显示</view>
        </template>
    </view>
</template>

6. ES6了解

全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。
JavaScript 的正式名称是ECMAScript 。
ES6主要是为了解决 ES5 的先天不足，比如 JavaScript里并没有类的概念，但是目前浏览器的 JavaScript是 ES5版本，大多数高版本的浏览器也支持ES6，不过只实现了 ES6的部分特性和功能。
ES6 是 ECMAScript标准十余年来变动最大的一个版本，为其添加了许多新的语法特性。

就到这里，还是接着开发一点点东西再写博客。

---

2019年12月31日20:18:26