微信小程序学习笔记（七）

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
		});
	}
});

这时候小程序就提供了一个新的语法叫做 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 >

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>

以后想使用的时候，就直接在 wxml 代码中使用 wxs 来引用 wxs 文件。示例代码如下：

<wxs src="./.. / tools.wxs " module="tools " />
<view> {{tools.username}} </view>"

另外，我们在 wxs 中写完了代码，还需要导出才能够使用。使用 module.exports 即可导出。
require函数：
如果在一个 wxs 文件中，想引用另外一个 wxs 文件，那么可以使用 require 函数引用。示例代码如下：

// tools.wxs var person = {
  "username": "zhiliao",
  "age": 18
}
module.exports.person = person;

在另外一个 wxs 文件中就可以进行引用了。示例代码如下：

var tools = require("./tools.wxs"); 
console.log(tools.person.username);

变量：

变量的定义跟 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 ，可以用来存放任何的其他子元素。

有时候我们的一些视图在手机指定的宽度和高度不够存放。那么可以放在 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>

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;
}

设置竖向滚动：

给 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;
}

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); } });

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);
    }
});

微信小程序学习笔记（七）

猜你喜欢