This is the third day of my participation in Gwen Challenge

1. Data caching

// Store data in the local cache in the specified key, the original key overwrites the content, this is an asynchronous interface.
uni.setStorage({
    key: 'storage_key'.data: 'hello'.success: function () {
        console.log('success'); }});// Asynchronously retrieves the contents of the specified key from the local cache.
uni.getStorage({
    key: 'storage_key'.success: function (res) {
        console.log(res.data); }});// Asynchronously removes the specified key from the local cache.
uni.removeStorage({
    key: 'storage_key'.success: function (res) {
        console.log('success'); }});// Clear the local data cache. - Log out all logs are cleared
uni.clearStorage();
Copy the code

2. Hide the soft keyboard that has been displayed. If the soft keyboard is not displayed, do not perform any operation. (for example: after entering the content, close the keyboard during search)

uni.hideKeyboard()
Copy the code

3. Message prompt box is generally used to indicate the completion of an operation.

uni.showToast({
    title: 'Operation successful! '.duration: 2000
});
// Hide the prompt box - this is usually not used
uni.hideToast()
Copy the code

4. Loading prompt improves user experience

/ / display loading
uni.showLoading({
    title: 'Loading'
});
// Hide the loading dialog box.
setTimeout(function () {
    uni.hideLoading();
}, 2000);
Copy the code

4, modal popup – used for operation confirmation (for example: confirm not misoperation before deleting)

uni.showModal({
    title: 'tip'.content: 'This operation will permanently delete the file. Do you want to continue? '.showCancel:true.// The default is false
    cancelText:'cancel'.// The default is "cancel", with a maximum of 4 characters
    confirmText:'confirm'.// The default value is "ok", with a maximum of four characters
    success: function (res) {
        if (res.confirm) {
            console.log('User hits OK');
        } else if (res.cancel) {
            console.log('User hit Cancel'); }}});Copy the code

5. Dynamically set the title of the current page.

uni.setNavigationBarTitle({
    title: 'New title'
});
Copy the code

6. Make phone calls

/ / make a phone call
vtelePhone(driverTel) {
        // The phone number must be a string
        if(driverTel ! =null&& driverTel ! =' ') {
                uni.makePhoneCall({
                        phoneNumber: driverTel
                });
        } else {
                uni.showToast({
                        icon: 'none'.title: 'No phone attached. '}); }},Copy the code

7, maps,

You are advised to use NVUE when using MAP on the App. To draw content on a map, you can use the marker, Controls, Polyline properties that come with the component, or you can use the Cover-View component. You can also use Plus.nativeobj. View or subNVue to draw native content on the App side. The width/height of the map component is recommended to write directly, for example, 750rpx. Do not set percentage values.

In addition, the API for selecting a map and viewing its location also supports Only Amap. If there is no special need on the App end, it is recommended to use Gaode Map.

Notice The package name must be the same as the package name, and the certificate information is the same.

<template>
    <view>
        <view class="page-body">
            <view class="page-section page-section-gap">
                <map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polyline">
                </map>
            </view>
        </view>
    </view>
</template>
Copy the code
export default {
    data() {
        return {
      id:0.// Use marker click event to fill in id
            title: 'map'.latitude: 39.909.longitude: 116.39742.markers: [{
                latitude: 39.909.longitude: 116.39742.iconPath: '.. /.. /.. /static/location.png'
            }, {
                latitude: 39.90.longitude: 116.39.iconPath: '.. /.. /.. /static/location.png'}].polyline: [{points: [{latitude: 0.longitude: 0}]}]}},methods: {}}Copy the code