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

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

相关的属性请参考：

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>

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

微信小程序学习笔记（七）相关推荐

小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
微信小程序学习笔记一 + 小程序介绍前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
自己的微信小程序学习笔记【3】——第三方UI库Lin-Ui的加载及使用
其他微信小程序的学习笔记自己的微信小程序学习笔记[1]--小程序开发工具的使用及项目文件说明自己的微信小程序学习笔记[2]--从零开始新建项目文章目录其他微信小程序的学习笔记前言一.Lin ...
微信小程序学习笔记（七）----简单文章推荐列表和分类图标的实现
想要实现一个顶部是几篇纯文字的推荐文章,推荐文章下面是四个分类图标,具体实现出来是这个样子的,比较简单: 首先先来找一下素材,这几个图标是我在阿里巴巴图标库下载的,这里是下载地址: http://ww ...
微信小程序学习笔记（一）
干货来袭基础前言微信⼩程序,简称⼩程序,英⽂名 Mini Program ,是⼀种不需要下载安装即可使⽤的应⽤,它实现了应⽤"触⼿可及"的梦想,⽤⼾扫⼀扫或搜⼀下即可打开 ...
微信小程序-学习笔记6-组件
基础内容组件:icon.text.progress <view class="container"><progress percent="20" ...
微信小程序学习笔记02：微信小程序注册
文章目录零.学习目标一.小程序注册方法 1.注册 2.登录二.小程序开发工具 1.下载开发工具 2.安装开发工具 3.启动开发工具三.创建第一个小程序 1.启动开发者工具 2.新建项目 3.模 ...
微信小程序学习笔记01：微信小程序概述
文章目录零.学习目标一.小程序的历史二.如何访问小程序 1.线下扫码 2.微信搜索 3.公众号关联 4.好友推荐 5.历史记录 6.桌面访问 7.附近的小程序三.小程序与HTML5和APP比较 ...
微信小程序学习笔记(7.16)
事件绑定类似于web开发中的 onclick,微信开发者工具中使用的 bindtap,bindinput之类的方法,其实都是封装的JavaScript 通过实验探究数据传递方法写一个input标签 ...

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

微信小程序学习笔记（七）相关推荐

最新文章

热门文章