微信小程序学习笔记（七）
WXS语法：
在传统的网页开发中， HTML 中是可以写 JavaScript 代码的，而在小程序中，是不允许在 WXML 文件中写 JavaScript 的，但是有些时候，我们需要在 wxml 中实现一些逻辑的处理。比如举个例子，我们渲染一个数字到 wxml 中，在 wxml 文件中根据这个数字来渲染具体星期几。这时候通过 wxml 文件中就做不了了，或者只能在 JavaScript 先计算好再渲染。示例代码如下：
Page({
data: {
day: 1
},
onLoad: function(options) {
var weekday = "";
switch (this.data.day) {
case 1: weekday = "星期一"; break;
case 2: weekday = "星期二"; break;
case 3: weekday = "星期三"; break;
case 4: weekday = "星期四"; break;
case 5: weekday = "星期五"; break;
case 6: weekday = "星期六"; break;
case 7: weekday = "星期天"; break;
}
this.setData({ weekday: weekday
});
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
这时候小程序就提供了一个新的语法叫做 wxs 可以帮我们直接在 wxml 中解决。示例代码如下：
< wxs module = "index" >
var getWeekDay = function(day) { var weekday = ""; switch (day) { case 1: weekday = "星期一"; break; case 2: weekday = "星期二"; break; case 3: weekday = "星期三"; break; case 4: weekday = "星期四"; break; case 5: weekday = "星期五"; break; case 6: weekday = "星期六"; break; case 7: weekday = "星期天"; break; } return weekday;
}
module.exports.getWeekDay = getWeekDay; < /wxs>
<view>{{index.getWeekDay(day)}}</view >
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
wxs 可以理解为 javascript 的一个阉割版本。使用 wxs 的好处如下：
- 在 iOS 上，在 wxs 中代码执行效率是在 js 中执行的 2-20 倍。
- 可以把更多的逻辑在 wxml 文件中完成。
wxs代码：
wxs 代码可以写在 wxml 文件中。也可以单独放在 .wxs 后缀的文件中。如果是写在 wxml 文件中，则必须要放在 wxs 标签中，如果是单独放在 .wxs 后缀文件中，就不需要放在 wxs 标签中了。并且必须要给 wxs 一个 module 属性，用来标记这个 wxs 的名称。以下是使用 .wxs 的语法。
// /pages/tools.wxs文件 <wxs module="tools"> var person = {
"username": "zhiliao",
"age": 18
}
module.exports = person; < /wxs>
- 1
- 2
- 3
- 4
- 5
以后想使用的时候，就直接在 wxml 代码中使用 wxs 来引用 wxs 文件。示例代码如下：
<wxs src="./.. / tools.wxs " module="tools " />
<view> {{tools.username}} </view>"
- 1
- 2
另外，我们在 wxs 中写完了代码，还需要导出才能够使用。使用 module.exports 即可导出。
require函数：
如果在一个 wxs 文件中，想引用另外一个 wxs 文件，那么可以使用 require 函数引用。示例代码如下：
// tools.wxs var person = {
"username": "zhiliao",
"age": 18
}
module.exports.person = person;
- 1
- 2
- 3
- 4
- 5
在另外一个 wxs 文件中就可以进行引用了。示例代码如下：
var tools = require("./tools.wxs");
console.log(tools.person.username);
- 1
- 2
变量：
变量的定义跟 javascript 一致。
请查看：
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/02variate.html 。
注释：
注释使用 /注释/ 以及 //注释 的方式，
另外增加了一种 /* xxx 的方式，这种方式会把 /* 后的所有代码全部都注释了。
运算符：
请查看：
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/04operator.html 。语句：
包括有 if 语句、 for 循环语句、 while 循环语句、 switch 分支语句。
具体查看：
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/05statement.html 。
数据类型：
- number ： 数值
- string ：字符串
- boolean：布尔值
- object：对象
- function：函数
- array : 数组
- date：日期
- regexp：正则
其中每种数据类型的方法请参考：
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/06datatype.html 。
内置类库：
wxs 提供了一些内置的类库，方便开发者调用。
具体请看：
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/07basiclibrary.html 。
wxs案例：
根据时间，来显示距离现在的时间间隔。
- 如果时间间隔小于1分钟以内，那么就显示“刚刚”
- 如果是大于1分钟小于1小时，那么就显示“xx分钟前”
- 如果是大于1小时小于24小时，那么就显示“xx小时前” 4.如果是大于24小时小于30天以内，那么就显示“xx天前”
- 否则就是显示具体的时间2017/10/20 16:15。
view和scroll-view： view：
视图容器。相当于是传统网页中的 div ，可以用来存放任何的其他子元素。
相关的属性请参考：
https://developers.weixin.qq.com/miniprogram/dev/component/view.html
scroll-view：
有时候我们的一些视图在手机指定的宽度和高度不够存放。那么可以放在 scroll-view 中。
设置横向滚动：
- 给 scroll-view 添加 scroll-x=“true” 属性。
- 给 scroll-view 添加 white-space:nowrap; 样式。
- 给 scroll-view 中的子元素设置为 display:inline-block; 。
示例代码如下：
index.wxml代码：
<scroll-view class='scroll-x-view' scroll-x>
<view class='scroll-view-item bg_red'></view>
<view class='scroll-view-item bg_blue'></view>
<view class='scroll-view-item bg_green'></view>
<view class='scroll-view-item bg_yellow'></view>
</scroll-view>
- 1
- 2
- 3
- 4
- 5
- 6
index.wxss代码：
.scroll - x - view { width: 100 % ; height: 100px; background: gray; white - space: nowrap;
}.scroll - x - view.scroll - view - item { width: 200px; height: 100px;
}.bg_red { background: red;
}.bg_blue { background: blue;
}.bg_green { background: green;
}.bg_yellow { background: yellow;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
设置竖向滚动：
- 给 scroll-view 添加 scroll-y=“true” 属性。
- 给 scroll-view 设置高度。
wxml 和 wxss 示例代码如下：
<scroll-view class='scroll-x-view' scroll-y>
<view class='scroll-view-item bg_red'></view>
<view class='scroll-view-item bg_blue'></view>
<view class='scroll-view-item bg_green'></view>
<view class='scroll-view-item bg_yellow'></view>
</scroll-view>
.scroll-x-view{ width: 100%; height: 200px; background: gray;
}
.scroll-x-view .scroll-view-item{ width: 100%; height: 100px;
} .bg_red{ background: red;
}
.bg_blue{ background: blue;
}
.bg_green{ background: green;
}
.bg_yellow{ background: yellow;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
scrolltoupper和scrolltolower事件：鼠标滚动到距离顶部或者左边、鼠标滚动到底部或者右边多少距离的时候会执行这个事件。默认的间隔是 50 像素。示例代码如下：
< scroll - view class='scroll-x-view' scroll - y bindscrolltoupper="scrollToUpper">
<view style="height:1000px;">
</view>
</scroll - view>
Page({ scrollToUpper: function(event) { console.log(event); } });
- 1
- 2
- 3
- 4
- 5
bindscroll事件：
只要 scroll-view 发生了滚动，就会执行这个事件。
< scroll - view class = 'scroll-x-view'scroll - y bindscrolltoupper = "scrollEvent" > <view style = "height:1000px;" > </view>
</scroll - view > Page({ scrollEvent: function(event) { console.log(event); }
});
- 1
- 2
- 3
- 4
- 5
- 6
文章来源: maoli.blog.csdn.net，作者：刘润森！，版权归原作者所有，如需转载，请联系作者。
原文链接：maoli.blog.csdn.net/article/details/90050004
- 点赞
- 收藏
- 关注作者
评论（0）