Skip to content

Commit a7a78c1

Browse files
coderwhycoderwhy
committed
wxss&wxml&wxs
1 parent 51f8b15 commit a7a78c1

26 files changed

+549
-3
lines changed

‎app.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
{
22
"pages": [
3+
"pages/wxs/wxs",
4+
"pages/wxml/wxml",
35
"pages/home/home",
6+
"pages/wxss/wxss",
47
"pages/about/about"
5-
]
8+
],
9+
"sitemapLocation": "sitemap.json"
610
}

‎app.wxss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@import './style/btn.wxss';
2+
3+
.container {
4+
color: green;
5+
font-size: 32px;
6+
}
7+
8+
.content {
9+
background: orange;
10+
}

‎pages/home/home.wxml

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
11
<!--pages/home/home.wxml-->
2-
<text class='title'>Hello World</text>
3-
<button size='mini'>按钮</button>
2+
<include src="/wxml/header.wxml"/>
3+
4+
<text id='content' selectable class='title'>Hello World</text>
5+
<button id='' size='mini'>按钮</button>
6+
<view id='content'></view>
7+
<scroll-view id=''></scroll-view>
8+
9+
<!-- 1.hidden属性 -->
10+
<view hidden class='container box'>哈哈哈</view>
11+
12+
<import src="/wxml/template.wxml"/>
13+
14+
<include src="/wxml/footer.wxml"/>

‎pages/wxml/wxml.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
// pages/wxml/wxml.js
2+
Page({
3+
data: {
4+
message: '你好小程序',
5+
firstname: 'kobe',
6+
lastname: 'bryant',
7+
age: 12,
8+
nowTime: new Date().toLocaleString(),
9+
isActive: false,
10+
isShow: true,
11+
score: 45,
12+
movies: ['星际穿越', '盗梦空间', '大话西游'],
13+
nums: [
14+
[10, 14, 11, 18],
15+
[20, 24, 31, 48],
16+
[110, 124, 211, 318],
17+
],
18+
letters: ['a', 'b', 'c']
19+
},
20+
onLoad() {
21+
setInterval(() => {
22+
this.setData({
23+
nowTime: new Date().toLocaleString()
24+
})
25+
}, 1000)
26+
},
27+
handleSwitchColor(event) {
28+
this.setData({
29+
isActive: !this.data.isActive
30+
})
31+
},
32+
handleSwitchShow() {
33+
this.setData({
34+
isShow: !this.data.isShow
35+
})
36+
},
37+
handleIncrement() {
38+
this.setData({
39+
score: this.data.score + 6
40+
})
41+
},
42+
numberFoFixed(value) {
43+
return value.foFixed(2)
44+
}
45+
})

‎pages/wxml/wxml.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"usingComponents": {}
3+
}

‎pages/wxml/wxml.wxml

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<!--pages/wxml/wxml.wxml-->
2+
<!-- 1.wxml的格式 -->
3+
<!-- <view></view>
4+
<image/>
5+
<input/> -->
6+
<!-- <view Class="" class=""></view> -->
7+
8+
<!-- 2.Mustache -->
9+
<view>{{message}}</view>
10+
<view>{{firstname}} {{lastname}}</view>
11+
<view>{{firstname + ' ' + lastname}}</view>
12+
<view>{{age >= 18 ? '成年人': '未成年人'}}</view>
13+
14+
<view>{{nowTime}}</view>
15+
16+
<button size='mini' bindtap='handleSwitchColor'>切换颜色</button>
17+
<view class='box {{isActive ? "active": ""}}'>哈哈哈</view>
18+
19+
<!-- <map class='map' longitude='116.11' latitude='39.6'></map> -->
20+
21+
<view>--------- 条件判断 ----------</view>
22+
<!-- wx:if的使用 -->
23+
<button size='mini' bindtap='handleSwitchShow'>切换显示</button>
24+
<view wx:if="{{isShow}}">哈哈哈</view>
25+
26+
<!-- wx:elif/wx:else -->
27+
<button size='mini' bindtap="handleIncrement">分数递增6</button>
28+
<view wx:if="{{score >= 90}}">优秀</view>
29+
<view wx:elif="{{score >= 80}}">良好</view>
30+
<view wx:elif="{{score >= 60}}">及格</view>
31+
<view wx:else>不及格</view>
32+
33+
<!-- hidden属性 -->
34+
<view hidden='{{false}}'>我是hidden属性控制的内容</view>
35+
36+
<!-- wx:if和hidden在隐藏组件时有什么区别 -->
37+
<!--
38+
区别:
39+
hidden: 将一个组件隐藏起来时,该组件依然是存在(display: none)
40+
wx:if: 将一个组件隐藏起来时, 该组件根本不存在(压根没有创建)
41+
选择:
42+
如果显示和隐藏切换的频繁非常高, 选择使用hidden
43+
如果显示和隐藏切换的频繁非常低, 那么选择wx:if
44+
-->
45+
<view>------------------</view>
46+
<view hidden='{{true}}'>我是通过hidden控制的内容</view>
47+
<view wx:if="{{false}}">我是通过wx:if控制的内容</view>
48+
49+
50+
<view>----------- 列表渲染 -----------</view>
51+
<!-- 1.wx:for的回顾 -->
52+
<!-- 1.1.遍历数组/字符串/数字 -->
53+
<!-- <view wx:for="{{['abc', 'cba', 'nba']}}">{{item}} {{index}}</view>
54+
<view wx:for="coderwhy">{{item}} {{index}}</view>
55+
<view wx:for="{{9}}">{{item}}</view> -->
56+
57+
<!-- 2.block标签 -->
58+
<!-- <block wx:if="{{isShow}}">
59+
<button>按钮</button>
60+
<view>呵呵呵</view>
61+
<text>我是内容</text>
62+
</block>
63+
64+
<block wx:for="{{3}}">
65+
<button>按钮</button>
66+
<view>呵呵呵</view>
67+
<text>我是内容</text>
68+
</block> -->
69+
70+
<!-- 3.item、index起名字 -->
71+
<!-- <view wx:for="{{movies}}" wx:for-item="movie" wx:for-index="i">{{movie}} {{i}}</view>
72+
73+
<block wx:for="{{nums}}" wx:for-item="inner_nums">
74+
<block wx:for="{{inner_nums}}">
75+
<view>{{item}}</view>
76+
</block>
77+
</block> -->
78+
79+
<!-- 4.key的作用 -->
80+
<!-- 如果用index仅仅是消除警告 -->
81+
<!-- <view class='container'>
82+
<view wx:for="{{letters}}" wx:key="{{item}}">{{item}}</view>
83+
</view> -->
84+
85+
86+
<view>---------- template -------</view>
87+
<!--
88+
之前的时候小程序不支持自定义组件,为了进行代码的复用: template
89+
-->
90+
<!-- 模板中包裹的内容, 在没有被使用前,是不会进行任何的渲染的 -->
91+
<!-- <template name="contentItem">
92+
<button size='mini'>{{btnText}}</button>
93+
<view>{{content}}</view>
94+
</template> -->
95+
96+
<!-- 结论: include是不能导入模板 -->
97+
<!--
98+
关于wxml的导入有两种方式:
99+
import导入:
100+
1.主要是导入template
101+
2.特点: 不能进行递归导入
102+
include引入:
103+
1.将公共的wxml中的组件抽取到一个文件中
104+
2.特点: 不能导入template/wxs, 可以进行递归导入
105+
-->
106+
107+
<!-- <include src="/wxml/template.wxml"/> -->
108+
<import src="/wxml/template.wxml"/>
109+
<import src="/wxml/abc.wxml"/>
110+
111+
<template is="contentItem" data="{{btnText: '按钮', content: '哈哈哈'}}"/>
112+
<template is="contentItem" data="{{btnText: '警告', content: '呵呵呵'}}"/>
113+
<template is="contentItem" data="{{btnText: '点击', content: '嘿嘿嘿'}}"/>
114+
<template is="contentItem" data="{{btnText: '登录', content: '嘻嘻嘻'}}"/>
115+
116+
<template is="abc"/>

‎pages/wxml/wxml.wxss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/* pages/wxml/wxml.wxss */
2+
.box {
3+
font-size: 64rpx;
4+
}
5+
6+
.active {
7+
color: red;
8+
}
9+
10+
.map {
11+
width: 750rpx;
12+
height: 400rpx;
13+
}

‎pages/wxs/wxs.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
// pages/wxs/wxs.js
2+
Page({
3+
4+
/**
5+
* 页面的初始数据
6+
*/
7+
data: {
8+
price: "25.666666",
9+
time: 1560598160
10+
},
11+
12+
/**
13+
* 生命周期函数--监听页面加载
14+
*/
15+
onLoad: function (options) {
16+
17+
},
18+
19+
/**
20+
* 生命周期函数--监听页面初次渲染完成
21+
*/
22+
onReady: function () {
23+
24+
},
25+
26+
/**
27+
* 生命周期函数--监听页面显示
28+
*/
29+
onShow: function () {
30+
31+
},
32+
33+
/**
34+
* 生命周期函数--监听页面隐藏
35+
*/
36+
onHide: function () {
37+
38+
},
39+
40+
/**
41+
* 生命周期函数--监听页面卸载
42+
*/
43+
onUnload: function () {
44+
45+
},
46+
47+
/**
48+
* 页面相关事件处理函数--监听用户下拉动作
49+
*/
50+
onPullDownRefresh: function () {
51+
52+
},
53+
54+
/**
55+
* 页面上拉触底事件的处理函数
56+
*/
57+
onReachBottom: function () {
58+
59+
},
60+
61+
/**
62+
* 用户点击右上角分享
63+
*/
64+
onShareAppMessage: function () {
65+
66+
}
67+
})

‎pages/wxs/wxs.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"usingComponents": {}
3+
}

‎pages/wxs/wxs.wxml

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!--pages/wxs/wxs.wxml-->
2+
<!-- 1.错误的写法 -->
3+
<!-- <view>{{25.6666666.toFixed(2)}}</view> -->
4+
<!-- <view>{{25.6666666}}</view> -->
5+
6+
<!-- 2.wxs的定义方式 -->
7+
<!-- 2.1.直接在wxml中定义 -->
8+
<!-- <wxs module="info">
9+
// JS代码
10+
var message = "Hello World";
11+
var name = "coderwhy";
12+
13+
function sum(num1, num2) {
14+
return num1 + num2
15+
}
16+
17+
function test() {
18+
return "test function"
19+
}
20+
21+
// commonjs的模块化导出的写法
22+
module.exports = {
23+
message: message,
24+
name: name,
25+
sum: sum,
26+
test: test
27+
}
28+
</wxs> -->
29+
30+
<!-- 2.2.定义在单独的wxs文件中, 再使用<wxs>标签进行导入 -->
31+
<!-- 不能使用绝对路径, 必须使用相对路径 -->
32+
<wxs src="../../wxs/info.wxs" module="info"/>
33+
34+
<view>{{info.message}}</view>
35+
<view>{{info.name}}</view>
36+
<view>{{info.sum(20, 30)}}</view>
37+
38+
39+
<!-- 3.wxs的应用 -->
40+
<wxs src="../../wxs/format.wxs" module="format"/>
41+
42+
<view>{{format.priceFormat(price, 3)}}</view>
43+
<view>{{format.dateFormat(time, 'yyyy/MM/dd')}}</view>

0 commit comments

Comments
 (0)