Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
uni-app
提交
8644f59c
U
uni-app
项目概览
DCloud
/
uni-app
4 个月 前同步成功
通知
731
Star
38707
Fork
3642
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
7
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
7
Issue
7
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
8644f59c
编写于
9月 06, 2019
作者:
W
wangyaqi
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs: update wxs
上级
3c4e8499
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
35 addition
and
15 deletion
+35
-15
docs/frame.md
docs/frame.md
+35
-15
未找到文件。
docs/frame.md
浏览文件 @
8644f59c
...
@@ -943,7 +943,7 @@ slide-view.vue
...
@@ -943,7 +943,7 @@ slide-view.vue
## WXS
## WXS
WXS是微信小程序的一套脚本语言,[规范详见](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/)。
WXS是微信小程序的一套脚本语言,[规范详见](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/)。
uni-app可以将wxs代码编译到微信小程序、QQ小程序、5+APP、H5上(`HBuilderX 2.2.
4
-alpha`及以上版本)
uni-app可以将wxs代码编译到微信小程序、QQ小程序、5+APP、H5上(`HBuilderX 2.2.
5
-alpha`及以上版本)
与wxs类似,百度小程序提供了Filter、阿里小程序提供了SJS,uni-app也支持使用这些功能,并将它们编译到百度和阿里的小程序端。不过它们的功能还不如wxs强大。此外头条系小程序自身不支持类似功能。
与wxs类似,百度小程序提供了Filter、阿里小程序提供了SJS,uni-app也支持使用这些功能,并将它们编译到百度和阿里的小程序端。不过它们的功能还不如wxs强大。此外头条系小程序自身不支持类似功能。
...
@@ -955,7 +955,7 @@ uni-app可以将wxs代码编译到微信小程序、QQ小程序、5+APP、H5上
...
@@ -955,7 +955,7 @@ uni-app可以将wxs代码编译到微信小程序、QQ小程序、5+APP、H5上
**wxs示例**
**wxs示例**
以下是一些使用 WXS 的简单示例,要完整了解 WXS 语法,请参考[WXS 语法参考](https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/)。本示例使用wxs响应
touchmove
事件,减少视图层与逻辑层通信,使滑动更加丝滑。
以下是一些使用 WXS 的简单示例,要完整了解 WXS 语法,请参考[WXS 语法参考](https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/)。本示例使用wxs响应
`touchmove`
事件,减少视图层与逻辑层通信,使滑动更加丝滑。
```
html
```
html
<template>
<template>
...
@@ -965,7 +965,7 @@ uni-app可以将wxs代码编译到微信小程序、QQ小程序、5+APP、H5上
...
@@ -965,7 +965,7 @@ uni-app可以将wxs代码编译到微信小程序、QQ小程序、5+APP、H5上
</view>
</view>
</view>
</view>
</template>
</template>
<
wxs
module=
"test
"
>
<
script
module=
"test"
lang=
"wxs
"
>
var startX = 0
var startX = 0
var startY = 0
var startY = 0
var lastLeft = 50; var lastTop = 50
var lastLeft = 50; var lastTop = 50
...
@@ -996,7 +996,7 @@ uni-app可以将wxs代码编译到微信小程序、QQ小程序、5+APP、H5上
...
@@ -996,7 +996,7 @@ uni-app可以将wxs代码编译到微信小程序、QQ小程序、5+APP、H5上
touchstart: touchstart,
touchstart: touchstart,
touchmove: touchmove
touchmove: touchmove
}
}
</
wxs
>
</
script
>
<script>
<script>
export default {
export default {
...
@@ -1031,7 +1031,7 @@ uni-app可以将wxs代码编译到微信小程序、QQ小程序、5+APP、H5上
...
@@ -1031,7 +1031,7 @@ uni-app可以将wxs代码编译到微信小程序、QQ小程序、5+APP、H5上
支付宝小程序,百度小程序官方暂未支持事件响应,不过也可以使用对应的SJS、Filter过滤器实现一些数据处理的操作,以下代码展示了一个时间格式化的小功能
支付宝小程序,百度小程序官方暂未支持事件响应,不过也可以使用对应的SJS、Filter过滤器实现一些数据处理的操作,以下代码展示了一个时间格式化的小功能
index.vue
`index.vue`
```
html
```
html
<template>
<template>
...
@@ -1044,8 +1044,8 @@ index.vue
...
@@ -1044,8 +1044,8 @@ index.vue
</view>
</view>
</view>
</view>
</template>
</template>
<
filter
module=
"utils"
src=
"./utils.filter.js"
></filter
>
<
script
module=
"utils"
lang=
"filter"
src=
"./utils.filter.js"
></script
>
<
import-sjs
module=
"utils"
src=
"./utils.sjs"
/
>
<
script
module=
"utils"
lang=
"sjs"
src=
"./utils.sjs"
></script
>
<script>
<script>
export default {
export default {
...
@@ -1064,7 +1064,7 @@ index.vue
...
@@ -1064,7 +1064,7 @@ index.vue
</script>
</script>
```
```
utils.sjs 与 utils.filter.js
`utils.sjs` 与 `utils.filter.js` 内容一致
```
js
```
js
export default {
export default {
...
@@ -1121,18 +1121,38 @@ export default {
...
@@ -1121,18 +1121,38 @@ export default {
**注意**
**注意**
- **重要**编写wxs、sjs、filter.js 内容时必须遵循相应语法规范
引入方式
```
html
<!-- 内联 -->
<script
module=
"test"
lang=
"wxs"
>
//...code
</script>
<script
module=
"utils"
lang=
"filter"
>
//...code
</script>
<!-- 外部引入 -->
<script
module=
"utils"
lang=
"wxs"
src=
"./utils.wxs"
></script>
<script
module=
"utils"
lang=
"filter"
src=
"./utils.filter.js"
></script>
<script
module=
"utils"
lang=
"sjs"
src=
"./utils.sjs"
></script>
```
- **【重要】** 编写wxs、sjs、filter.js 内容时必须遵循相应语法规范
- 目前各个小程序正在完善相关规范,可能会有较大改动,请务必仔细阅读相应平台的文档
- 目前各个小程序正在完善相关规范,可能会有较大改动,请务必仔细阅读相应平台的文档
- 支付宝小程序请使用sjs规范,[详见](https://docs.alipay.com/mini/framework/sjs)
- 支付宝小程序请使用sjs规范,[详见](https://docs.alipay.com/mini/framework/sjs)
- 支付宝小程序sjs只能定义在.sjs 文件中
。然后使用```<import-sjs
>```标签引入
- 支付宝小程序sjs只能定义在.sjs 文件中
,然后使用```<script
>```标签引入
- 支付宝小程序
import-sjs的标签属性```name```、```from```被统一为了```module```、```src``
`以便后续实现多平台统一写法
- 支付宝小程序
`script`的标签属性`name`、`from`被统一为了`module`、`src
`以便后续实现多平台统一写法
- 百度小程序中请使用Filter规范,[详见](https://smartprogram.baidu.com/docs/develop/framework/view_filter/)
- 百度小程序中请使用Filter规范,[详见](https://smartprogram.baidu.com/docs/develop/framework/view_filter/)
- 百度小程序Filter只能导出
function
函数
- 百度小程序Filter只能导出
`function`
函数
- 暂不支持在 wxs、sjs、filter.js 中调用其他同类型文件
- 暂不支持在 wxs、sjs、filter.js 中调用其他同类型文件
- wxs、filter.js既能内联使用又可以外部引入,sjs只能外部引入
- wxs、filter.js既能内联使用又可以外部引入,sjs只能外部引入
- mp-qq 目前对内联的 wxs 支持不好,部分写法会导致编译出错
- QQ小程序目前对内联的 wxs 支持不好,部分写法可能会导致编译出错,尽量使用外部引入的方式
- 在微信自定义组件中(wxcomponents)也可以使用wxs
- 在微信自定义组件中`wxcomponents`也可以使用wxs
- ```nvue```页面暂不支持wxs、sjs、filter.js
- `nvue`页面暂不支持wxs、sjs、filter.js
- 各个`script`标签会分别被打包至对应支持平台,不需要额外写条件编译
- 自`HBuilderX 2.2.5-alpha`开始,不推荐使用各个小程序自有的引入方式,推荐使用`script`标签引入
## 致谢
## 致谢
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录