13518219792
筆記內容：Form表單類組件與Map地圖組件
筆記日期：2018-02-04
創新互聯專注于企業網絡營銷推廣、網站重做改版、雙牌網站定制設計、自適應品牌網站建設、H5開發、商城開發、集團公司官網建設、成都外貿網站建設公司、高端網站制作、響應式網頁設計等建站業務，價格優惠性價比高，為雙牌等各大城市提供網站開發制作服務。
switch組件是一個開關選擇器，wxml示例代碼如下：
switch
說明：
樣式代碼如下：
.container{
text-align: center;
}
.switch_text{
color: #d1d1d1;
margin-bottom: 10rpx;
}
.container switch{
margin-bottom: 20rpx;
}運行效果：
switch組件里有一個bindchange事件，通過該事件我們可以獲得該組件的狀態值，wxml代碼如下：
js代碼如下：
onBindChange:function(event){
console.log(event.detail.value);
}打印結果：
true
falseswitch組件的官方說明文檔如下：
https://mp.weixin.qq.com/debug/wxadoc/dev/component/switch.html
slider組件是一個滑動選擇器，也就是滑動條，wxml示例代碼如下：
slider
說明：
樣式代碼如下：
.title{
color: #d1d1d1;
margin-bottom: 10rpx;
margin-left: 20rpx;
}運行效果：
slider組件的官方說明文檔如下：
https://mp.weixin.qq.com/debug/wxadoc/dev/component/slider.html
radio-group是單項選擇器，也就是單選框，而其內部由多個<radio/>單選項目組成，示例代碼如下：
radio
說明：
樣式代碼如下：
.title {
color: #d1d1d1;
margin-bottom: 10rpx;
margin-left: 20rpx;
}
.radio_view {
margin-left: 20rpx;
color: #666;
}
.radio_view label {
margin-left: 20rpx;
margin-right: 20rpx;
}js代碼如下：
onRadioChange: function (event) {
console.log(event.detail.value);
}運行效果：
radio組件的官方說明文檔如下：
https://mp.weixin.qq.com/debug/wxadoc/dev/component/radio.html
checkbox-group是多項選擇器，也就是多選框，其內部由多個checkbox組成，示例代碼如下：
checkbox
樣式代碼如下：
.title {
color: #d1d1d1;
margin-bottom: 10rpx;
margin-left: 20rpx;
}
.checkbox_view {
margin-left: 20rpx;
color: #666;
}
.checkbox_view label {
margin-left: 20rpx;
margin-right: 20rpx;
}js代碼如下：
onCheckboxChange: function (event) {
console.log(event.detail.value);
}運行效果：
然后選擇多個：
控制臺打印出來的是一個數組：
checkbox組件的官方說明文檔如下：
https://mp.weixin.qq.com/debug/wxadoc/dev/component/checkbox.html
熟悉web前端開發的小伙伴應該對表單提交都不陌生，表單提交就是把表單組件中的數據都收集起來，然后向服務器進行提交。小程序中也有form組件，它是通過觸發事件來進行數據的提交的，小程序的表單提交比web中的表單提交更為簡單一些，wxml代碼示例：
form
表單
樣式代碼示例：
.page {
display: flex;
flex-direction: column;
background-color: #fbfbfb;
}
.page_hd {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 50rpx;
margin-top: 50rpx;
}
.page_title {
font-size: 25rpx;
color: #d1d1d1;
}
.page_desc {
text-align: center;
font-size: 30rpx;
width: 200rpx;
color: #d1d1d1;
border-bottom: 1px solid #d1d1d1;
padding-bottom: 20rpx;
}
.section__title {
margin-bottom: 20rpx;
font-size: 32rpx;
}
.section {
font-size: 30rpx;
color: #666;
padding-left: 30rpx;
padding-right: 30rpx;
}
.page input {
width: 100%;
height: 80rpx;
font-size: 25rpx;
background-color: white;
padding-left: 30rpx;
}
.section_gap {
margin-top: 60rpx;
margin-bottom: 60rpx;
}
label {
display: flex;
flex-direction: row;
margin-bottom: 10rpx;
}
.btn-area button {
width: 620rpx;
margin-bottom: 30rpx;
}js代碼示例：
Page({
formSubmit: function (event) {
console.log('form發生了submit事件，攜帶數據為：', event.detail.value);
},
formReset: function (event) {
console.log('form發生了reset事件');
},
})運行效果：
填寫一些數據，然后點擊Submit按鈕進行表單的提交：
控制臺打印的數據如下：
form表單組件的官方說明文檔如下：
https://mp.weixin.qq.com/debug/wxadoc/dev/component/form.html
map組件是用來實現地圖功能的，wxml示例代碼：
說明：
js代碼如下：
Page({
// 初始化一些數據
data: {
// mark點信息
markers: [{
iconPath: "/images/mark.png", // mark點的圖標路徑
id: 0,
latitude: 23.099994,
longitude: 113.324520,
width: 50,
height: 50
}],
// mark點路線信息
polyline: [{
points: [{
longitude: 113.3245211,
latitude: 23.10229
}, {
longitude: 113.324520,
latitude: 23.21229
}],
color: "#FF0000DD",
width: 3,
dottedLine: true
}],
},
markertap: function (event) {
// 調用微信的內置地圖
wx.openLocation({
latitude: 23.10229,
longitude: 113.3245211,
})
},
})運行效果：
點擊地圖的mark圖標觸發事件后會進入微信的內置地圖：
注：map組件的一些功能在模擬器上不能完全顯示出來，所以研究該組件的時候，最好使用真機來調試。
map組件的官方說明文檔如下：
https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html
