微信小程序4-基础语法三

微信小程序4-基础语法三

微信小程序4-基础语法三

微信小程序4-基础语法三

表单提交

接近于Ajax提交模型

两大重要事件

  • bindsubmit

  • bindreset

表单操作案例1

form.wxml

1
2
3
4
5
6
7
<form bindsubmit="formSubmit" bindreset="formReset">
<input name="input1" placeholder="please"></input>

<button form-type="submit">submit</button>
<button form-type="reset">reset</button>

</form>

form.js

1
2
3
4
5
6
7
formSubmit:function(event){
console.log(event)
},

formReset:function(event){
console.log(event)
},

表单操作案例1

点击后可以通过事件获取表单内容

1
2
event.detail.value
{input:"hibiscidai"}

表单控件

form-control.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<form bindsubmit="formSubmit" bindreset="formReset">

<button type="primary">button</button>
<checkbox value="1">shanghai</checkbox>
<checkbox value="2">chendgu</checkbox>

<checkbox-group>
<label class="checkbox1" wx:for="{{cities}}">
<checkbox value="{{item.value}}">{{item.name}}</checkbox>
</label>
</checkbox-group>

<input value="input1" placeholder="please" type="text" password confirm-type="search"> </input>

<!--用于for循环-->
<label>

</label>

<!--滚动选择-->
<picker mode="selector" range="{{array1}}" bindchange="pickerChange">
国别
,选择了{{pickerValue}}
</picker>

<!--多列选择-->
<picker mode="multiSelector" value="" range="{{multiArray}}" bindchange="mulitChange">
多列选择
</picker>

<!--时间选择-->
<picker mode="time">
时间
</picker>

<!--日期选择-->
<picker mode="date">
日期
</picker>

<!--省市选择-->
<picker mode="region">
省市
</picker>

<!--单选按钮-->
<radio value="11">11</radio>

<radio-group bindchange="">
<radio value="11">11</radio>
<radio value="22">22</radio>
</radio-group>

<!--滑动选择器-->
<slider bindchange="" min="0" max="100" step="1" value="10">
</slider>

<!--开关结构-->
<switch bindchange="switchChange">
按钮开关
</switch>
<switch type="checkbox">
复选开关
</switch>

<!--多行输入框,原生-->
<textarea>

</textarea>
</form>

form-control.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
// pages/form-control/form-control.js
Page({

/**
* 页面的初始数据
*/
data: {
cities: [{
name: "中国",
value: "ch"
},
{
name: "美国",
value: "usa"
}, {
name: "英国",
value: "en"
}
],

/*滚动选择*/
array1: [
"美国", "中国", "英国"
],
pickerValue: "",

/*多列选择*/
multiArray: [
["a", "aa"],
["b", "bb"]
]
},

pickerChange: function (event) {
console.log(event)
//selector模式选择器变化时候可以通过event读取列表int
console.log(event.detail.value)
//对应输出所在数据
console.log(this.data.array1[event.detail.value])
//前台显示选择的数据
this.setData({
pickerValue: this.data.array1[event.detail.value]
})
},

mulitChange: function (event) {
console.log(event)
//mulit模式选择器变化时候可以通过event读取列表int
console.log(event.detail.value)
},

//按钮开关事件
switchChange: function (event) {
console.log(event)
//通过event读取true,false
console.log(event.detail.value)
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {

},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

}
})

表单控件

表单控件

导航组件navigator跳转

主要用于直接在wxml的跳转

属性

属性 类型 默认值 必填 说明 最低版本
target string self 在哪个目标上发生跳转,默认当前小程序 2.0.7
url string 当前小程序内的跳转链接 1.0.0
open-type string navigate 跳转方式 1.0.0
delta number 1 当 open-type 为 ‘navigateBack’ 时有效,表示回退的层数 1.0.0
app-id string target="miniProgram"时有效,要打开的小程序 appId 2.0.7
path string target="miniProgram"时有效,打开的页面路径,如果为空则打开首页 2.0.7
extra-data object target="miniProgram"时有效,需要传递给目标小程序的数据,目标小程序可在 App.onLaunch()App.onShow() 中获取到这份数据。详情 2.0.7
version string release target="miniProgram"时有效,要打开的小程序版本 2.0.7
hover-class string navigator-hover 指定点击时的样式类,当hover-class="none"时,没有点击态效果 1.0.0
hover-stop-propagation boolean false 指定是否阻止本节点的祖先节点出现点击态 1.5.0
hover-start-time number 50 按住后多久出现点击态,单位毫秒 1.0.0
hover-stay-time number 600 手指松开后点击态保留时间,单位毫秒 1.0.0
bindsuccess string target="miniProgram"时有效,跳转小程序成功 2.0.7
bindfail string target="miniProgram"时有效,跳转小程序失败 2.0.7
bindcomplete string target="miniProgram"时有效,跳转小程序完成 2.0.7
  • target 的合法值
说明 最低版本
self 当前小程序
miniProgram 其它小程序
  • open-type属性值
说明 最低版本
navigate 对应 wx.navigateTowx.navigateToMiniProgram 的功能
redirect 对应 wx.redirectTo 的功能
switchTab 对应 wx.switchTab 的功能
reLaunch 对应 wx.reLaunch 的功能 1.1.0
navigateBack 对应 wx.navigateBack 的功能 1.1.0
exit 退出小程序,target="miniProgram"时生效 2.1.0

tabbar跳转

  • app.json配置
  • 通过微信接口进行跳转

tabbar跳转与navigator跳转不可同时作用在一个对象上。
使用url跳转不可以,只有使用switchTab 的open-type才可以

只有tabbar里声明的界面才有下边的按钮

navigator.wxml

1
2
3
<view>navigator</view>
<navigator url="/pages/audio/audio" open-type="navigate"><text>audio-navigate跳转</text></navigator>
<navigator url="/pages/audio/audio" open-type="switchTab"><text>audio-switchTab跳转</text></navigator>

app.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
...
"tabBar": {
"selectedColor": "#1AAD19",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/navigator/navigator",
"text": "首页",
"iconPath": "images/icon_1.png",
"selectedIconPath": "images/icon_11.png"
},
{
"pagePath": "pages/audio/audio",
"text": "日志",
"iconPath": "images/icon_2.png",
"selectedIconPath": "images/icon_22.png"
}
]
},
...

navigator跳转

Camera

  • 原生控件

属性

属性 类型 默认值 必填 说明 最低版本
mode string normal 应用模式,只在初始化时有效,不能动态变更 2.1.0
resolution string medium 分辨率,不支持动态修改 2.10.0
device-position string back 摄像头朝向 1.0.0
flash string auto 闪光灯,值为auto, on, off 1.0.0
frame-size string medium 指定期望的相机帧数据尺寸 2.7.0
bindstop eventhandle 摄像头在非正常终止时触发,如退出后台等情况 1.0.0
binderror eventhandle 用户不允许使用摄像头时触发 1.0.0
bindinitdone eventhandle 相机初始化完成时触发,e.detail = {maxZoom} 2.7.0
bindscancode eventhandle 在扫码识别成功时触发,仅在 mode=”scanCode” 时生效 2.1.0

demo

camera.wxml

1
2
3
<view>carema-demo</view>
<camera mode="normal" device-position="front"></camera>
<button bindtap="paishe">拍摄</button>

camera.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
...

paishe: function () {
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: "high",
success: (res) => {
console.log(res)
this.setData({

})
}
})
},

...

人型验证拍照

caremacase.wxml

1
2
3
4
5
6
7
<view>caremacase</view>

<camera device-position="front" flash="off" class="camera-clasa">
<cover-view class="maintext">photo</cover-view>
<cover-image class="image1" src="/images/photo.png"></cover-image>
<cover-image class="image2" src="/images/button.png" bindtap="getphoto"></cover-image>
</camera>

caremacase.wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
page {
height: 100%;
}

.camera-clasa {
width: 100%;
height: 100%;
}

.maintext {
color: white;
position: absolute;
left: 40%;
top: 10%;
}

.image1 {
width: 100%;
height: 100%;
opacity: 0.5;
}

.image2 {
width: 70rpx;
height: 70rpx;
position: absolute;
left: 50%;
top: 85%;
}

caremacase.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
...

/**
* 点击红色按钮拍照
*/
getphoto: function (event) {
//创建一个拍摄对象
const ctx = wx.createCameraContext()
//执行拍照,抓取摄像头
ctx.takePhoto({
quality: "high",
success: (res) => {
//设定到缓存中
wx.setStorage({
data: res.tempImagePath,
key: 'photodate',
})
//跳转页面
wx.redirectTo({
url: '/pages/caremacase/photo',
})
}
})
},

...

photo.wxml

1
<image src="{{photo}}"></image>

photo.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
...


/**
* 页面的初始数据
*/
data: {
photo: ""
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {

},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
var that = this;
wx.getStorage({
key: 'photodate',
success: function (res) {
//赋值方式
that.setData({//不声明写this认为是内部的操作
photo: res.data
})
},
})
},

...

人型验证拍照

.wxml

1

.wxss

1

.js

1

文章作者: HibisciDai
文章链接: http://hibiscidai.com/2021/02/27/微信小程序4-基础语法三/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 HibisciDai