uniapp 日常使用频率较高的(二)-一一网

这是我参与更文挑战的第3天，活动详情查看：更文挑战

1、数据缓存

// 将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
uni.setStorage({
    key: 'storage_key',
    data: 'hello',
    success: function () {
        console.log('success');
    }
});
// 从本地缓存中异步获取指定 key 对应的内容。
uni.getStorage({
    key: 'storage_key',
    success: function (res) {
        console.log(res.data);
    }
});
// 从本地缓存中异步移除指定 key。
uni.removeStorage({
    key: 'storage_key',
    success: function (res) {
        console.log('success');
    }
});
// 清理本地数据缓存。-退出登录全部清除
uni.clearStorage();
复制代码

2、隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。(例如：输入完内容，搜索时关闭键盘)

uni.hideKeyboard()
复制代码

3、消息提示框，一般用于操作完成的提示语。

uni.showToast({
    title: '操作成功！',
    duration: 2000
});
// 隐藏提示框-这个一般用不到
uni.hideToast()
复制代码

4、 loading提示，提升用户体验

// 显示loading
uni.showLoading({
    title: '加载中'
});
// 隐藏 loading 提示框。
setTimeout(function () {
    uni.hideLoading();
}, 2000);
复制代码

4、模态弹窗–用于操作确认（例如：删除前确认不是误操作）

uni.showModal({
    title: '提示',
    content: '此操作将永久删除该文件, 是否继续?',
    showCancel:true, // 默认是false
    cancelText:'取消', // 默认为"取消"，最多 4 个字符
    confirmText:'确认', // 默认为"确定"，最多 4 个字符
    success: function (res) {
        if (res.confirm) {
            console.log('用户点击确定');
        } else if (res.cancel) {
            console.log('用户点击取消');
        }
    }
});
复制代码

5、动态设置当前页面的标题。

uni.setNavigationBarTitle({
    title: '新的标题'
});
复制代码

6、拨打电话

// 打电话
vtelePhone(driverTel) {
        // 电话号码必须是字符串
        if (driverTel != null && driverTel != '') {
                uni.makePhoneCall({
                        phoneNumber: driverTel
                });
        } else {
                uni.showToast({
                        icon: 'none',
                        title: '未绑定电话。'
                });
        }
},
复制代码

7、地图

App端使用map推荐使用nvue。在map上绘制内容，可使用组件自带的marker、controls、polyline等属性，也可以使用cover-view组件。App端还可以使用plus.nativeObj.view 或 subNVue 绘制原生内容。map 组件的宽/高推荐写直接量，比如：750rpx，不要设置百分比值。

另外选择地图、查看地图位置的API也仅支持高德地图。App端如无特殊必要，建议使用高德地图。

注意申请包名和打包时的包名需匹配一致，证书信息匹配。

<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>
复制代码

export default {
    data() {
        return {
      id:0, // 使用 marker点击事件 需要填写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: {

    }
}
复制代码