提交 7b8bdf08 编写于 作者: W wanganxp

更新注意实现

上级 582e394e
...@@ -5,7 +5,23 @@ ...@@ -5,7 +5,23 @@
<!-- UTSAPIJSON.loadFontFace.param --> <!-- UTSAPIJSON.loadFontFace.param -->
#### 注意事项 #### 注意事项
app-ios平台加载字体一定是全局生效,不支持通过global属性设置为非全局生效 - app-ios平台加载字体一定是全局生效,不支持通过global属性设置为非全局生效
- family属性指定自定义字体路径时,必须使用`url()`包裹。可能某些平台不包裹也可以生效,但标准规范是包裹,按标准写法才能全端生效。如下:
```uts
uni.loadFontFace({
global: true,
family: 'UniFontFamily',
source: "url('/static/font/uni.ttf')", //需使用url方法包裹。本地字体请放在/static目录下,否则打包时不会把字体文件打进去。也支持网络字体
success() {
console.log('global loadFontFace uni.ttf success')
},
fail(error) {
console.warn('global loadFontFace uni.ttf fail', error.errMsg)
},
})
```
不同平台支持的字体格式不同,另见[css字体](../css/font-family.md)
<!-- UTSAPIJSON.loadFontFace.returnValue --> <!-- UTSAPIJSON.loadFontFace.returnValue -->
......
...@@ -6,7 +6,7 @@ uni-app x 在 app平台实现了 web css 的子集。 ...@@ -6,7 +6,7 @@ uni-app x 在 app平台实现了 web css 的子集。
子集并不影响开发者开发出所需的界面,仅是写法上没有那么丰富。 子集并不影响开发者开发出所需的界面,仅是写法上没有那么丰富。
当 uni-app x 编译到 web、小程序等平台时,可以支持 web 的全部 css。同时,编译器会进行 css 重置,保证 ucss 这个子集在各端效果的一致性 当 uni-app x 编译到 web、小程序等平台时,可以支持 web 的全部 css。同时,**编译器会进行 css 重置**,保证 ucss 这个子集在各端效果的一致性。这也意味着使用uni-app x的web端,和直接在浏览器里写html在默认值处理上有一定的差异
App端与web常见的区别是: App端与web常见的区别是:
1. 仅支持**flex 布局** 1. 仅支持**flex 布局**
...@@ -23,7 +23,11 @@ App端与web常见的区别是: ...@@ -23,7 +23,11 @@ App端与web常见的区别是:
### flex方向 @flex-direction ### flex方向 @flex-direction
在web中,flex 默认是`横向`的,但app默认是`纵向`的。为了多端兼容,建议开发者**显式声明flex方向**,不使用默认值。 在W3C规范中,flex 默认是`横向`的,但uni-app x里全平台的flex方向默认值都是`纵向`的。
因为W3C规范中,默认布局是block,当使用flex时更高频率是用它的横排能力。而在flex是第一布局模型的手机端,大量布局都是竖排的,此时要求开发者大量编写`style="flex-direction:column"`很不友好。
所以在uni-app x中默认是竖排(之前nvue也默认是竖排)。同时在[manifest.json](../collocation/manifest.md)中提供了配置项,可以修改flex方向为横排。
```html ```html
<view style="flex-direction:row"> <view style="flex-direction:row">
...@@ -32,6 +36,9 @@ App端与web常见的区别是: ...@@ -32,6 +36,9 @@ App端与web常见的区别是:
<view style="flex-direction:column"> <view style="flex-direction:column">
<!-- 这里的组件们都是竖排 --> <!-- 这里的组件们都是竖排 -->
</view> </view>
<view>
<!-- 这里的组件们在uni-app x里全平台都是竖排。而W3C的规范中这里是横排 -->
</view>
``` ```
一般在`app.uvue`的style里编写全局样式,在页面里使用class引用更为方便。 一般在`app.uvue`的style里编写全局样式,在页面里使用class引用更为方便。
...@@ -81,7 +88,7 @@ App端与web常见的区别是: ...@@ -81,7 +88,7 @@ App端与web常见的区别是:
但在uvue中,废弃了这个策略。因为开发者的页面情况较复杂,而且vue3支持多个一级组件,之前的策略可能会多给页面套一层不必要的scroll-view。\ 但在uvue中,废弃了这个策略。因为开发者的页面情况较复杂,而且vue3支持多个一级组件,之前的策略可能会多给页面套一层不必要的scroll-view。\
在追求高性能时,多一层scroll-view是不能忍受的。 在追求高性能时,多一层scroll-view是不能忍受的。
`uvue的策略`:在新建页面时,提供一个选项,让开发者选择是否需要页面级滚动。如需要则自动在页面代码里template的根节点加一个全屏的scroll-view。 `uvue的策略`:在新建页面时,提供一个选项,让开发者选择是否需要页面级滚动。如需要则自动在页面代码里template的根节点加一个全屏的scroll-view。如下
> 如果开发者不需要,随时可以自己修改代码。 > 如果开发者不需要,随时可以自己修改代码。
...@@ -107,11 +114,11 @@ App端与web常见的区别是: ...@@ -107,11 +114,11 @@ App端与web常见的区别是:
上述代码中给scroll-view的style设为`flex:1`,意思是铺满剩余空间。设在顶层节点上,意味着铺满屏幕。 上述代码中给scroll-view的style设为`flex:1`,意思是铺满剩余空间。设在顶层节点上,意味着铺满屏幕。
当然,如果页面的pages.json里配置使用了原生导航栏,那么页面区整体是在导航栏下面。 当然,如果页面的pages.json里配置使用了原生导航栏,那么页面区整体是在原生导航栏下面。
#### 自定义导航栏 #### 自定义导航栏
如果开发者想要自定义导航栏,首先在pages.json里对应页面的style里设置`"navigationStyle": "custom"`,关闭原生导航栏。 如果开发者想要自定义导航栏,首先在pages.json里对应页面的style里设置`"navigationStyle": "custom"`,关闭原生导航栏。\
然后编写自定义的导航栏组件[\<uni-navbar-lite>](https://ext.dcloud.net.cn/plugin?id=14618),那么推荐的页面代码结构为: 然后编写自定义的导航栏组件[\<uni-navbar-lite>](https://ext.dcloud.net.cn/plugin?id=14618),那么推荐的页面代码结构为:
```html ```html
...@@ -128,7 +135,7 @@ App端与web常见的区别是: ...@@ -128,7 +135,7 @@ App端与web常见的区别是:
</template> </template>
``` ```
> 注:这里的“原生导航栏”是一个历史沿袭叫法,指配置在pages.json里的导航栏,不属于页面代码区。事实上在uni-app x里所有界面都是原生的。 > 注:这里的“原生导航栏”是一个历史沿袭叫法,指配置在pages.json里的导航栏,不属于页面代码区。事实上在uni-app x的app平台里所有界面都是原生的。
#### 页面滚动相关的生命周期、api #### 页面滚动相关的生命周期、api
...@@ -202,7 +209,7 @@ uvue中文字都是要使用text组件的。 ...@@ -202,7 +209,7 @@ uvue中文字都是要使用text组件的。
</template> </template>
``` ```
app-uvue的css的样式不继承规则,虽然与web有差异,其实只是更严谨。 app-uvue的css的“样式不继承”规则,虽然与web有差异,其实只是更严谨。
一般情况下,开发者遵循仅在text组件下写文字有关的样式,就可以编译到全端而保持界面正常。 一般情况下,开发者遵循仅在text组件下写文字有关的样式,就可以编译到全端而保持界面正常。
......
...@@ -13,15 +13,27 @@ ...@@ -13,15 +13,27 @@
<!-- CSSJSON.font-family.compatibility --> <!-- CSSJSON.font-family.compatibility -->
### 字体格式 ### 字体设置
- app-android 支持ttf和otf字体。不支持woff和woff2和可变字体
- web支持的字体取决于浏览器,详见mdn或caniuse 对于系统中已经存在的字体,font-family里直接写字体名称即可。\
但对于系统中不存在的字体,需要通过src属性的url方法来指定字体路径。如下:
```css
@font-face {
font-family: UniFontFamily;
src: url('/static/uni.ttf');
}
```
**关于自定义字体的格式**
- app-android: 支持ttf和otf字体。不支持woff和woff2和可变字体
- web: 支持的字体取决于浏览器,详见mdn或caniuse
自定义字体的加载,除了在css的src中设置,也可以使用API [uni.loadFontface](../api/load-font-face.md)
### App平台差异 ### App平台差异
- font-family 样式不支持继承 - font-family 样式不支持继承,每层组件都需要设样式
### 字体图标 <!-- CSSJSON.font-family.reference -->
- 可在css里直接加载,[参考](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/CSS/text/font-family.uvue)
- 也可以使用API [uni.loadFontface](../api/load-font-face.md)
<!-- CSSJSON.font-family.reference --> [示例代码](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/CSS/text/font-family.uvue)
\ No newline at end of file \ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册