json
文件不是很重要，
js
、
wxml
、
wxss
比较重要，所以是三剑客
1
、
index.wxml
<view class="dalou">
<view class="sanlou">
<text bindtap="movie">
电影院
</text>
<text bindtap="children">
儿童乐园
</text>
</view>
<view class="erlou">
男装
|
女装
</view>
<view class="yilou">
化妆品
|
珠宝
</view>
</view>
2
、
index.wxss
.dalou{
background: blue;
}
.sanlou{
background:yellow;
}
.erlou{
background: rgb(163, 111, 102);
}
3
、
index.js
Page({
movie(){
console.log("
电影院开放啦
")
},
children(){
wx.showToast({
title: '
过来一起玩吧
',
})
}
})
二、小程序常用组件
--
讲稿
组件就是容器，相当于一个盒子。
1
、注册页面
app.json
中。
pages/test1/test1
<view class="dalou">
<view class="sanlou">
<text bindtap="movie">
电影院
</text>
<text bindtap="children">
儿童乐园
</text>
</view>
<view class="erlou">
男装
|
女装
</view>
<view class="yilou">
化妆品
|
珠宝
</view>
</view>
.dalou{
background: blue;
}
.sanlou{
background:yellow;
}
.erlou{
background: rgb(163, 111, 102);
}
Page({
movie(){
console.log("
电影院开放啦
")
},
children(){
wx.showToast({
title: '
过来一起玩吧
',
})
}
})
2
、新建页面
3
、
view ——
自带换行。一个
view
相当于一层楼。
我是
view1
前后对称
4
、
text——
文本，包裹文字的。加注释的
ctrl+/
我是
text1
不换行，从左往右排列。
test1.wxml
我是
view1
我是
view2
我是
text1
我是
text1
我是
view
里的
text
test1.wxss
/* pages/test1/test1.wxss */
.fu{
background: tomato;
padding: 20rpx;
}
.zi{
background: violet;
}
5
、
input
<input value="
请输入
"> </input>
<input placeholder="
这里是输入
"> </input>
<input password="true" placeholder="
请输入密码
"></input>
<input placeholder="
禁止输入
" disabled="true"></input>
<input placeholder="
最大输入长度为
5" maxlength="5" ></input>
<input placeholder="
请输入身份证号
" type="idcard"></input>
6
、
button
<button>
正常按钮
</button>
<button size="mini">
小按钮
</button>
<button type="primary">
按钮的样式
</button>
<button type="primary" plain="true">
按钮的镂空样式
</button>
<button disabled="true">
禁用按钮
</button>
<button loading="true">loading
按钮
</button>
三、函数和时间
——
讲稿
1
、注释
ctrl+/
2
、日志打印
——
函数
函数在
.js
文件中。
js
中的默认函数是页面从打开到关闭的整个生命周期。
/**
*
生命周期函数
--
监听页面加载
————1
*/
onLoad: function (options) {
console.log("onLoad
执行啦
")
console.log(1+1)
console.log("
微信
","
小程序
")
},
/**
*
生命周期函数
--
监听页面初次渲染完成
————3
*/
onReady: function () {
console.log("onReady
执行啦
")
},
/**
*
生命周期函数
--
监听页面显示
————2
*/
onShow: function () {
console.log("onShow
执行啦
")
},
/**
*
生命周期函数
--
监听页面隐藏
————
返回
home
可调用
*/
onHide: function () {
console.log("onHide
执行啦
")
},
3
、创建函数
Page({ ————
框架
})
函数创建的两种方法
Page({
//
第一种创建函数的方法
ceshi1(){
console.log("
简单版
")
},
onLoad(){
this.ceshi1()
this.ceshi2()
},
//
第二种创建函数的方法
ceshi2:function(){
console.log("
复杂版
")
},
})
举例子
——
两个函数重名，函数之间逗号分隔
//
两个函数重名时，会覆盖
onLoad:function(){
console.log("onLoad1
执行啦
")
},
________________
onLoad(){
console.log("onLoad2
执行啦
")
},
4
、带参和不带参的区别
Page({
ceshi1(){
console.log("
简单版
")
},
//
带一个参数
ceshi1(name){
console.log("
传进来的参数是
",name)
},
onLoad(){
this.ceshi1("zhangsan")
this.ceshi2()
this.add(1,2)
},
//
带两个参数
add(a,b){
console.log("a
加
b
的值是
",a+b)
},
})
5
、点击事件
1
、
.wxml
文件
<text bindtap="getName">
点我
</text>
2
、
.js
文件
Page({
getName(){
console.log("
点击了
text
组件，调用了
getName
函数
")
}
})
6
、获取用户输入的数据
1
）
.wxml
文件
<input placeholder="
请输入
" bindinput="getNum"></input>
2
）
.js
文件
getNum(shuju){
console.log("
输入的数据是
:",shuju.detail.value)
},
四、实战一：比较数值大小页面设计
一、简单实现
1
、
compare.wxml
<!--pages/compare/compare.wxml-->
<view>
<view>
<text>
请输入第
1
个数字
</text>
<input type="number" bindinput="num1"></input>
</view>
<view>
<text>
请输入第
2
个数字
</text>
<input type="number" bindinput="num2" ></input>
</view>
<view>
<button bindtap="compare" type="primary">
比较
</button>
</view>
<view>
<text>
比较结果：
{{result}}</text>
</view>
</view>
2
、
compare.js
Page({
data(){
result: "haha"
},
nm1: 0,
nm2: 0,
num1(e){
this.nm1=Number(e.detail.value)
console.log("
第
1
个数值是：
",this.nm1)
},
num2(e){
this.nm2=Number(e.detail.value)
console.log("
第
2
个数值是：
",this.nm2)
},
compare(){
var str="
两数相等
"
if(this.nm1>this.nm2){
str="
第
1
个数大
"
}else if(this.nm1<this.nm2){
str="
第
2
个数大
"
}
this.setData({result:str})
}
})
美化
3
、
compare.json
"navigationBarTitleText": "
数值比较
"
二、大量
input
组件时
1
）通过
id
区分元素
.wxml
文件
<input id="nm1" type="number" bindinput='num' />
<input id="nm2" type="number" bindinput='num' />
js
文件
num(e){
console.log(e)
this[e.currentTarget.id] = Number(e.detail.value)
},
2
）通过
dataset
区分元素
.wxml
文件
<input data-id="nm1" type="number" bindinput='numm' />
<input data-id="nm2" type="number" bindinput='numm' />
.js
文件
numm(e){
console.log(e)
this[e.target.dataset.id] = Number(e.detail.value)
},
3116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
