Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
uni-app
提交
087ea871
U
uni-app
项目概览
DCloud
/
uni-app
25 天 前同步成功
通知
702
Star
38704
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看板
体验新版 GitCode,发现更多精彩内容 >>
提交
087ea871
编写于
8月 24, 2019
作者:
W
wangyaqi
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update: 修改wxs示例
上级
824568bd
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
54 addition
and
87 deletion
+54
-87
docs/frame.md
docs/frame.md
+54
-87
未找到文件。
docs/frame.md
浏览文件 @
087ea871
...
...
@@ -916,122 +916,88 @@ slide-view.vue
## WXS
WXS是微信小程序的一套脚本语言,[详见](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/)。
经过我们的适配,uni-app可以使用wxs规范支持5+APP、微信小程序、QQ小程序
经过我们的适配,uni-app可以使用wxs规范支持5+APP、微信小程序、QQ小程序
。请使用```HBuilderX 2.2.4-alpha```及以上版本体验。
**wxs示例**
以下是一些使用 WXS 的简单示例,要完整了解 WXS 语法,请参考[WXS 语法参考](https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/)。
以下是一些使用 WXS 的简单示例,要完整了解 WXS 语法,请参考[WXS 语法参考](https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/)。
本示例使用wxs响应touchmove事件,减少视图层与逻辑层通信,使滑动更加丝滑。
```
<template>
<view
>
<!-- #ifdef APP-PLUS || MP-WEIXIN || MP-QQ -->
<view class="touchBox" @touchmove="test.touchmove"></view>
<view
class=
"clickBox"
:change:prop=
"test.propObserver"
:prop=
"propValue"
@
click=
"setProp"
></view>
<!-- #endif -->
<!-- #ifdef APP-PLUS || MP-WEIXIN || MP-QQ || MP-ALIPAY -->
<view
class=
"textArea"
>
{{test.msg}}
</view>
<!-- #endif -->
<!-- #ifdef MP-BAIDU -->
<view
class=
"textArea"
>
{{test.msg()}}
</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS || MP-WEIXIN || MP-QQ || MP-ALIPAY || MP-BAIDU -->
<view
class=
"textArea"
>
{{test.getMax(array)}}
</view>
<!-- #endif -->
<view>
<view
class=
"area"
>
<view @touchstart="test.touchstart" @touchmove="test.touchmove" class="movable">{{test.msg}}</view>
</view>
</view>
</template>
<wxs
module=
"test"
>
var startX = 0
var startY = 0
var lastLeft = 50; var lastTop = 50
function touchstart(event, ins) {
console.log("touchstart")
var touch = event.touches[0] || event.changedTouches[0]
startX = touch.pageX
startY = touch.pageY
}
function touchmove(event, ins) {
var touch = event.touches[0] || event.changedTouches[0]
var pageX = touch.pageX
var pageY = touch.pageY
var left = pageX - startX + lastLeft
var top = pageY - startY + lastTop
startX = pageX
startY = pageY
lastLeft = left
lastTop = top
ins.selectComponent('.movable').setStyle({
left: left + 'px',
top: top + 'px'
})
return false
}
module.exports = {
msg:'Hello',
touchmove: function(event, instance) {
console.log('log event', JSON.stringify(event))
},
propObserver: function(newValue, oldValue, ownerInstance, instance) {
console.log('prop observer', newValue, oldValue)
},
getMax: function(array){
var max = undefined;
for (var i = 0; i < array.length; ++i) {
max = max === undefined ?
array[i] :
(max >= array[i] ? max : array[i]);
}
return max;
}
msg: 'Hello',
touchstart: touchstart,
touchmove: touchmove
}
</wxs>
<filter
module=
"test"
>
export default {
msg: function(){
return 'Hello';
},
getMax: function(array){
var max = undefined;
for (var i = 0; i < array.length; ++i) {
max = max === undefined ?
array[i] :
(max >= array[i] ? max : array[i]);
}
return max;
}
};
</filter>
<import-sjs
module=
"test"
src=
"./index.sjs"
/>
<script>
export default {
data() {
return {
propValue: 0,
array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
}
},
methods: {
setProp() {
this.propValue = parseInt(Math.random()
*
1000);
}
}
}
</script>
<style>
.touchBox,.clickBox {
height: 200rpx;
width: 750rpx;
}
.touchBox {
background-color: #10AEFF;
}
.clickBox {
background-color: #3CC51F;
},
.textArea {
height: 200rpx;
text-align: center;
line-height: 200rpx;
}
.area{
position: absolute;
width: 100%;
height: 100%;
}
.movable{
position: absolute;
width: 100px;
height: 100px;
left: 50px;
top: 50px;
color: white;
text-align: center;
line-height: 100px;
background-color: red;
}
</style>
```
index.sjs内容
```
export default {
msg:'Hello',
getMax: function(array){
var max = undefined;
for (var i = 0; i < array.length; ++i) {
max = max === undefined ?
array[i] :
(max >= array[i] ? max : array[i]);
}
return max;
}
};
```
**注意**
**注意**
- 目前各个小程序正在完善相关规范,可能会有较大改动,请务必仔细阅读相应平台的文档
- 支付宝小程序请使用sjs规范,[详见](https://docs.alipay.com/mini/framework/sjs)
- 支付宝小程序sjs只能定义在.sjs 文件中。然后使用```<import-sjs>```标签引入
- 支付宝小程序import-sjs的标签属性```name```、```from```被统一为了```module```、```src```以便后续实现多平台统一写法
...
...
@@ -1040,6 +1006,7 @@ export default {
- 暂不支持在 wxs、sjs、filter.js 中调用其他同类型文件
- 编写wxs、sjs、filter.js 内容时必须遵循相应语法规范
- wxs、filter.js既能内联使用又可以外部引入,sjs只能外部引入
## 致谢
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录