Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
yangkaifeng
uni-app
提交
96e2830c
U
uni-app
项目概览
yangkaifeng
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
3
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
96e2830c
编写于
10月 18, 2019
作者:
W
wanganxp
提交者:
GitHub
10月 18, 2019
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Update use-weex.md
上级
20bb7e28
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
16 addition
and
20 deletion
+16
-20
docs/use-weex.md
docs/use-weex.md
+16
-20
未找到文件。
docs/use-weex.md
浏览文件 @
96e2830c
...
...
@@ -297,7 +297,7 @@ uni-app提供的共享变量和数据的方案如下:
**1. vuex:**
自
```HBuilderX 2.2.5
-alpha
```
起,nvue支持vuex
自
```HBuilderX 2.2.5```
起,nvue支持vuex
**注意:**
-
不支持直接引入
`store`
使用,可以使用
`mapState`
、
`mapGetters`
、
`mapMutations`
等辅助方法或者使用
`this.$store`
...
...
@@ -375,18 +375,19 @@ npm i weex-ui -S
Tis:
*
插件市场有一个集成好 weex ui 的示例,可以直接查看
[
https://ext.dcloud.net.cn/plugin?id=442
](
https://ext.dcloud.net.cn/plugin?id=442
)
*
官方的uni ui库,已经支持了nvue,需要使用uni-app编译模式。详见:
[
https://github.com/dcloudio/uni-ui/tree/nvue-uni-ui
](
https://github.com/dcloudio/uni-ui/tree/nvue-uni-ui
)
## nvue 里使用 BindingX
``uni-app``
内置了
[
BindingX
](
https://alibaba.github.io/bindingx/
)
,可在
``nvue``
中使用 BindingX 完成复杂的动画效果。
*
使用方式可参考
[
BindingX 快速开始
](
https://alibaba.github.io/bindingx/guide/cn_guide_start
)
,demo示例可参考
[
BindingX 示例
](
https://alibaba.github.io/bindingx/demos
)
里
``vue``
的相关示例,将实验田里的
``vue``
代码拷贝到
``nvue``
文件里即可。
*
若引入 weex-bindingx 时发现不生效,检查项目路径,路径不能含有中文。
*
使用npm时如果命令行报错,需要注意看命令行的提示
*
从HBuilderX 2.3.4起,可直接引用
`uni.requireNativePlugin('bindingx')`
模块
*
2.3.4以前,需要通过npm的方式安装BindingX的库到项目下。使用方式可参考
[
BindingX 快速开始
](
https://alibaba.github.io/bindingx/guide/cn_guide_start
)
。若引入 weex-bindingx 时发现不生效,检查项目路径,路径不能含有中文。使用npm时如果命令行报错,需要注意看命令行的提示
*
BindingX demo示例可参考
[
BindingX 示例
](
https://alibaba.github.io/bindingx/demos
)
里
``vue``
的相关示例,将实验田里的
``vue``
代码拷贝到
``nvue``
文件里即可。
**代码示例**
```
html
```
html
<template>
<div
class=
"container"
>
...
...
@@ -555,14 +556,14 @@ Tis:
bottom
:
25px
;
right
:
25px
;
}
</style>
</style>
```
**注意**
-
推荐
`bindingx`
引入方式
`uni.requireNativePlugin('bindingx')`
-
暂时不要在
`expression`
内使用
`origin`
**注意**
-
推荐
`bindingx`
引入方式
`uni.requireNativePlugin('bindingx')`
-
暂时不要在
`expression`
内使用
`origin`
## nvue 里使用 HTML5Plus API
...
...
@@ -639,12 +640,6 @@ App.vue
canvas API使用,详见canvas文档。
**节点信息**
|API|说明|
|:-|:-|
|uni.createSelectorQuery()|返回一个 SelectorQuery 对象实例|
**节点布局交互**
|API|说明|
...
...
@@ -745,12 +740,13 @@ export default {
但仍然还有一些区别需要注意:
-
nvue 页面只能使用 flex 布局,不支持其他布局方式。
-
weex 下,页面内容高过屏幕高度并不会自动滚动,它没有页面滚动的概念,只有区域滚动,要滚得内容需要套在
<scroller>
组件下。在 nvue 编译为 uni-app模式时,纠正了这个问题,页面内容过高会自动滚动。
-
weex 下,页面内容高过屏幕高度并不会自动滚动,它没有页面滚动的概念,只有区域滚动,要滚得内容需要套在
<scroller>
组件下。在 nvue 编译为 uni-app模式时,纠正了这个问题,
给页面外层自动套了一个 scroller,
页面内容过高会自动滚动。
-
weex 下,px是与屏幕宽度相关的动态单位,750px代表成屏幕宽度100%,它的静态单位是wx。在 nvue 编译为 uni-app模式时,纠正了这个问题,rpx是与屏幕宽度相关的动态单位,px是静态单位。
-
页面开发前,首先想清楚这个页面的纵向内容有什么,哪些是要滚动的,然后每个纵向内容的横轴排布有什么,按 flex 布局设计好界面。
-
文字内容,必须、只能在
<text>
组件下。不能在
<div>
、
<view>
的text区域里直接写文字。
-
文字内容,必须、只能在
<text>
组件下。不能在
<div>
、
<view>
的text区域里直接写文字。
否则即使渲染了,也无法绑定js里的变量。
-
支持的css有限,不过并不影响布局出你需要的界面,flex还是非常强大的。
[
详见
](
https://weex.apache.org/zh/docs/styles/common-styles.html#%E7%9B%92%E6%A8%A1%E5%9E%8B
)
-
class 进行绑定时只支持数组语法。
-
nvue页面没有bounce回弹效果,只有几个列表组件有bounce效果,包括 list、recycle-list、waterfall。
## 单位说明
-
weex的css单位支持如下:
...
...
@@ -761,7 +757,7 @@ export default {
## 注意事项
-
现阶段 nvue 的定位是 vue 的补充。在 App 平台实现一些 vue 上无法实现或性能有问题的场景。
-
nvue 的各组件在安卓端默认是透明的,如果不设置background-color,可能会导致出现重影的问题。
-
在 App.vue 中定义的全局js变量不会在 nvue 页面生效。globalData是生效的。
-
在 App.vue 中定义的全局js变量不会在 nvue 页面生效。globalData
和vuex
是生效的。
-
nvue 切换横竖屏时可能导致样式出现问题,建议有 nvue 的页面锁定手机方向。
-
不能在 style 中引入字体文件,nvue 中字体图标的使用参考:
[
weex 加载自定义字体
](
https://weex.apache.org/zh/docs/modules/dom.html#addrule
)
。如果是本地字体,可以用plus.io的API转换路径。
-
目前不支持在 nvue 页面使用 typescript/ts。
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录