With the development of technology, the complexity of development is getting higher and higher. The traditional development method makes a system into a whole application. It often happens that a small change or the addition of a small function may cause the overall logic to change. The modification affects the whole body. Through component development, individual development and maintenance can be effectively achieved, and they can be combined at will. Greatly improve low development efficiency and reduce maintenance costs.
Componentization is the only way for any front-end application with complex business scenarios and products after multiple iterations. Componentization requires more than just the module splitting and decoupling seen on the surface. There is also a lot of work behind it to support componentization, such as module splitting strategies based on business characteristics, interaction methods between modules, and building systems. etc.
This article introduces a component to you:
The front-end Vue implements the location selection component based on Tencent Map Api to return the address name, detailed address, longitude and latitude information. To download the complete code, please visit the uni-app plug-in market address: https://ext.dcloud.net.cn/plugin?id=13310
For more information on front-end components, please follow the WeChat public account: Front-end component development
The renderings are as follows:
#### Instructions
```How to use
<!-- leftTitle: left title name: input box name value: input box selection value placeholder: placeholder @click: click event -->
<cc-locPicker leftTitle="Harvest location" name="location" :value="mapSelData.poiname" placeholder="Please select a location"
@click="chooseAddress"></cc-locPicker>
<!-- Jump to Tencent Cloud Map Api page implementation -->
<template>
<view class="map">
<!-- Tencent Map Api key:Tencent Map key -->
<web-view
src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=SFABZ-WANWW-FISRY-3IGTF-HV7RE-YSFTI&referer=myapp"></web-view>
</view>
</template>
<script>
//Introduce setting address storage tool
import {
setlocation
} from './utils.js'
// #ifdef H5
window.addEventListener('message', event => {
// Receive location information. After the user chooses to confirm the location point, the point selection component will trigger the event and return the user's location information.
var place = event.date;
if (loc && loc.module == 'locationPicker') {
//To prevent other applications from posting information to this page, you need to determine whether the module is 'locationPicker'
let location = {
poiaddress: loc.poiaddress,
poiname: loc.poiname,
latlng: loc.latlng
}
//Set storage address information
setlocation(location)
uni.navigateBack();
}
}, false);
// #endif
</script>
<style></style>
```
#### HTML code implementation part
```html
<template>
<view class="content">
<form @submit="formSubmit" @reset="formReset">
<!-- leftTitle: left title name: input box name value: input box selection value placeholder: placeholder @click: click event -->
<cc-locPicker leftTitle="Harvest location" name="location" :value="mapSelData.poiname" placeholder="Please select a location"
@click="chooseAddress"></cc-locPicker>
<ccInputView leftTitle="Detailed address" name="address" :value="mapSelData.poiaddress" placeholder="Please enter the detailed address">
</ccInputView>
<ccInputView leftTitle="Longitude information" name="lng" :value="mapSelData.latlng.lng" placeholder="Please enter precision information">
</ccInputView>
<ccInputView leftTitle="Latitude information" name="lat" :value="mapSelData.latlng.lat" placeholder="Please enter latitude information">
</ccInputView>
<view class="uni-btn-v">
<button class="botBtn" type="primary" form-type="submit">下一步</button>
<view class="tipText"> Note: Please ensure that the harvest location you fill in is accurate</view>
</view>
</form>
</view>
</template>
<script>
import ccInputView from '../../components/ccInputView.vue'
// Get address tool
import {
getlocation
} from './utils.js'
export default {
components: {
ccInputView
},
data() {
return {
mapSelData: {
"latlng": {}
},
}
},
/**
* Life cycle function--monitoring page display
*/
onShow: function() {
// #ifdef H5
let locations = getlocation() //Get location information
if (locations) {
this.mapSelData = locations
uni.clearStorageSync();
}
// #endif
},
methods: {
formSubmit: function(e) {
console.log('The submit event occurred in the form, and the data carried is: ' + JSON.stringify(e));
var formdata = e.detail.value;
uni.showModal({
title: 'Warm reminder',
content: 'The formsubmit event carries data:' + JSON.stringify(e.detail.value)
})
},
// Select address
chooseAddress(e) {
let myThis = this;
uni.navigateTo({
url: './h5map'
})
},
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
}
.uni-btn-v {
width: 100%;
height: auto;
}
.botBtn {
width: 90%;
margin-top: 36px;
}
.tipText {
width: 100%;
margin-left: 0px;
text-align: center;
color: #666666;
margin-top: 36px;
margin-bottom: 36px;
font-size: 28rpx;
}
</style>
```