WXSS-WXML-WXS语法

1 WXSS编写程序样式

2 Mustache语法绑定

3 WXML的条件渲染

4 WXML的列表渲染

5 WXS语法基本使用

6 WXS语法案例练习

小程序的自适应单位rpx。在设计稿为iPhone6的时候1px=2rpx

wxml必须是闭合标签，或者单标签加/，否则会报错；并且大小写区分，不像html不区分大小写。

小程序的mustache语法不能调用函数或方法，其他方面和vue的差不多。

wx:if 、wx:elif、wx:else

hidden={{}}

wx:for={{对象类型数据}} ，循环的时候会自动生成item和index；有时候需要2层循环或多层循环遍历，这时候每一层都用item的话会混起来，于是我们使用wx:for-item="自定义的item名字"来区分每一层的item名字。

wx:key一般可以绑定*this(这个的意思是把for循环的item进行对象类型转换为字符串类型；由于对象类型被绑定的时候显示的会是[object object],会导致key不唯一)；还可以为item里的某个key的名称

示例代码：

wxml：

<!--pages/04_learn_wxml/index.wxml-->
<!-- 1.Mustache语法 -->
<view>{{ message }}</view>
<view>{{ firstname + " " + lastname }}</view>
<view>{{ date }}</view><!-- 2.条件判断 -->
<view wx:if="{{score > 90}}">优秀</view>
<view wx:elif="{{score > 80}}">良好</view>
<view wx:elif="{{score >= 60}}">及格</view>
<view wx:else>不及格</view><!-- 3.hidden属性:v-show -->
<!-- 基本使用 -->
<view hidden>我是hidden的view</view><!-- 切换案例 -->
<button bindtap="onChangeTap">切换</button>
<view hidden="{{isHidden}}">哈哈哈哈</view>
<view wx:if="{{!isHidden}}">呵呵呵呵</view><!-- 4.列表展示 -->
<!-- 4.1.wx:for基本使用 -->
<!-- 遍历data中的数组 -->
<view class="books"><view wx:for="{{books}}" wx:key="id"><!-- item: 每项内容, index: 每项索引 -->{{item.name}}-{{item.price}}</view>
</view>
<!-- 遍历数字 -->
<view class="number"><view wx:for="{{10}}" wx:key="*this">{{ item }}</view>
</view>
<!-- 遍历字符串 -->
<view class="str"><view wx:for="coderwhy" wx:key="*this">{{ item }}</view>
</view><!-- 4.2. 细节补充: block-item/index名称-key的使用 -->
<view class="books"><block wx:for="{{books}}" wx:key="id" wx:for-item="book" wx:for-index="i"><view>{{ book.name }}-{{ book.price }}-{{ i }}</view></block>
</view>

js：

// pages/04_learn_wxml/index.js
Page({data: {message: "Hello World",firstname: "kobe",lastname: "bryant",date: new Date().toLocaleDateString(),score: 10,isHidden: false,books: [{ id: 111, name: "代码大全", price: 98 },{ id: 112, name: "你不知道JS", price: 87 },{ id: 113, name: "JS高级设计", price: 76 },]},onChangeTap() {this.setData({isHidden: !this.data.isHidden})}
})

在微信小程序中的mustache语法是只能绑定data里的数据的，但是不能在mustache语法里面调用函数或者方法，所以我们需要使用wxs才能实现调用函数或者方法的操作。

上图左边是wxml，右边是js

注意这个wxs的限制：

在wxs标签内允许使用es5的语法，es5以上的语法都用不了。比如const 和箭头函数等。每个wxs都必须要有自己的模块名字以及导出wxs里面的函数才能在wxml中调用。

wxs文件，wxs文件里面导出和写法和标签内的一样，在某个wxml文件调用此wxs文件的时候，还是使用wxs标签来调用wxs文件。

在使用类似vue中的计算属性computed的时候，还是在wxs里面定义和导出即可。

wxs练习案例：

wxml：

<!--pages/05_learn_wxs/index.wxml-->
<!-- 1.方式一: 标签 -->
<!-- <wxs module="format">function formatPrice(price) {return "¥" + price}// 必须导出后, 才能被其他地方调用: 必须使用CommonJS导出module.exports = {formatPrice: formatPrice}
</wxs> --><!-- 2.方式二: 独立的文件, 通过src引入 -->
<wxs module="format" src="/utils/format.wxs"></wxs><view class="books"><block wx:for="{{books}}" wx:key="id"><view>name:{{item.name}}-price:{{format.formatPrice(item.price)}}</view></block>
</view><view class="total">总价格: {{format.calcPrice(books)}}</view><view>------------题目练习------------</view>
<view class="count">播放量: {{format.formatCount(playCount)}}</view>
<view class="time">{{format.formatTime(currentTime)}}/{{format.formatTime(duration)}}
</view>

wxss：

/* pages/05_learn_wxs/index.wxss */
.count {font-size: 40rpx;font-weight: 700;color: red;
}.time {font-size: 40rpx;font-weight: 700;color: blue;
}

js：

// pages/05_learn_wxs/index.js
Page({data: {books: [{ id: 111, name: "代码大全", price: 98, coverURL: "" },{ id: 112, name: "你不知道JS", price: 87, coverURL: "" },{ id: 113, name: "JS高级设计", price: 76, coverURL: "" },],playCount: 2232,duration: 255,currentTime: 65},formatPrice(price) {return "¥" + price},
})

wxs文件的内容：

function formatPrice(price) {return "¥" + price
}function calcPrice(books) {return "¥" + books.reduce(function(preValue, item) {return preValue + item.price}, 0)
}// 对count进行格式化
function formatCount(count) {count = Number(count)if (count >= 100000000) {return (count / 100000000).toFixed(1) + "亿"} else if (count >= 10000) {return (count / 10000).toFixed(1) + "万"} else {return count}
}// function padLeft(time) {
//   if ((time + "").length >= 2) return time
//   return "0" + time
// }// 2 -> 02
// 24 -> 24
function padLeft(time) {time = time + ""return ("00" + time).slice(time.length)
}// 对time进行格式化
// 100 -> 01:40
function formatTime(time) {// 1.获取时间var minute = Math.floor(time / 60)var second = Math.floor(time) % 60// 2.拼接字符串return padLeft(minute) + ":" + padLeft(second)
}// 必须导出后, 才能被其他地方调用: 必须使用CommonJS导出
module.exports = {formatPrice: formatPrice,calcPrice: calcPrice,formatCount: formatCount,formatTime: formatTime
}

WXSS-WXML-WXS语法相关推荐

微信小程序基础学习（2）- 模板与配置：WXML 模板语法、WXSS 模板样式、全局配置、页面配置、网络数据请求
1. WXML 模板语法 1.1 数据绑定 (1) 数据绑定的基本原则 ① 在 data 中定义数据 ② 在 WXML 中使用数据 (2)在 data 中定义页面的数据在页面对应的 .js 文件中, ...
WXS 语法参考-WXS模块
WXS 语法参考 WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构. WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaSc ...
小程序wxs语法的使用
一.WXS介绍 • WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构. • WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 Jav ...
微信小程序wxs语法
1.简介wxs语法 WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构.WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaSc ...
微信小程序---WXML 模板语法(附带笔记文档)
目录学习文档 WXML模板语法-数据绑定数据绑定基本原则在data中定义页面数据 Mustache语法的格式动态绑定属性三元运算算数运算 WXML模板语法-事件绑定什么是事件小程序中常 ...
微信小程序2（WXML模板语法）
WXML模板语法-数据绑定数据绑定的基本原则在data中定义数据在WXML中使用数据在data中定义数据在页面对应的.js文件中,把数据定义到data对象中即可: Page({data: { ...
了解微信小程序、掌握微信小程序开发工具的使用、了解小程序的目录以及文件结构、掌握小程序中常用的组件、掌握WXML、WXSS、WXS的基本使用
1 微信小程序介绍以及开发准备 1.1 了解微信小程序百度百科: 微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及&quo ...
微信小程序：如何在{{}}中使用函数？WXML+WXS
背景在原生小程序的项目中或有这种需求,就是在wxml页面中调用方法但是微信原生小程序无法直接使用像vue里面的计算属性,监听啦啥的这种,也不能调用js中的方法. 解决方法既然{{}}中无法调用 ...
微信小程序开发之WXML模板语法
目录一.数据处理 1.字符数据的绑定 2.图片数据的动态绑定 3.数据运算 4.总代码与测试截图二.事件处理 1.概念 2.事件绑定 (1)bindtap (2)bindinput 3.事件传参 ...
【小程序】中WXML的语法详解
文章目录 WXML语法详解

WXSS-WXML-WXS语法

WXSS-WXML-WXS语法相关推荐

最新文章

热门文章