Skip to content

U
uni-app

erosXXX / uni-app
与 Fork 源项目一致

Fork自 DCloud / uni-app

通知 1
Star 0
Fork 0
U
uni-app

体验新版 GitCode，发现更多精彩内容 >>

提交 087ea871 编写于 作者: W wangyaqi
浏览文件
操作

update: 修改wxs示例

上级 824568bd
隐藏空白更改
内联 并排
Showing with 54 addition and 87 deletion
docs/frame.md
浏览文件 @ 087ea871
...@@ -916,122 +916,88 @@ slide-view.vue ...@@ -916,122 +916,88 @@ 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规范支持5+APP、微信小程序、QQ小程序 经过我们的适配，uni-app可以使用wxs规范支持5+APP、微信小程序、QQ小程序。请使用```HBuilderX 2.2.4-alpha```及以上版本体验。
**wxs示例** **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> <template>
<view > <view>
<!-- #ifdef APP-PLUS || MP-WEIXIN || MP-QQ --> <view class="area">
<view class="touchBox" @touchmove="test.touchmove"></view> <view @touchstart="test.touchstart" @touchmove="test.touchmove" class="movable">{{test.msg}}</view>
<view class="clickBox" :change:prop="test.propObserver" :prop="propValue" @click="setProp"></view> </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>
</template> </template>
<wxs module="test"> <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 = { module.exports = {
msg:'Hello', msg: 'Hello',
touchmove: function(event, instance) { touchstart: touchstart,
console.log('log event', JSON.stringify(event)) touchmove: touchmove
},
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;
}
} }
</wxs> </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> <script>
export default { export default {
data() { data() {
return { return {
propValue: 0,
array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
} }
}, },
methods: { methods: {
setProp() {
this.propValue = parseInt(Math.random()*1000);
}
} }
} }
</script> </script>
<style> <style>
.touchBox,.clickBox { .area{
height: 200rpx; position: absolute;
width: 750rpx; width: 100%;
} height: 100%;
.touchBox { }
background-color: #10AEFF; .movable{
} position: absolute;
.clickBox { width: 100px;
background-color: #3CC51F; height: 100px;
}, left: 50px;
.textArea { top: 50px;
height: 200rpx; color: white;
text-align: center; text-align: center;
line-height: 200rpx; line-height: 100px;
} background-color: red;
}
</style> </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规范，[详见](https://docs.alipay.com/mini/framework/sjs)
- 支付宝小程序sjs只能定义在.sjs 文件中。然后使用```<import-sjs>```标签引入 - 支付宝小程序sjs只能定义在.sjs 文件中。然后使用```<import-sjs>```标签引入
- 支付宝小程序import-sjs的标签属性```name```、```from```被统一为了```module```、```src```以便后续实现多平台统一写法 - 支付宝小程序import-sjs的标签属性```name```、```from```被统一为了```module```、```src```以便后续实现多平台统一写法
...@@ -1040,6 +1006,7 @@ export default { ...@@ -1040,6 +1006,7 @@ export default {
- 暂不支持在 wxs、sjs、filter.js 中调用其他同类型文件 - 暂不支持在 wxs、sjs、filter.js 中调用其他同类型文件
- 编写wxs、sjs、filter.js 内容时必须遵循相应语法规范 - 编写wxs、sjs、filter.js 内容时必须遵循相应语法规范
- wxs、filter.js既能内联使用又可以外部引入，sjs只能外部引入 - wxs、filter.js既能内联使用又可以外部引入，sjs只能外部引入
## 致谢 ## 致谢
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或