uniapp学习笔记cc

配置

• pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
• manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。
• 通过在package.json文件中增加uni-app扩展节点，可实现自定义条件编译平台（如钉钉小程序、微信服务号等平台）。package.json扩展配置用法
• vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 webpack 等编译选项，具体规范参考：vue.config.js
• uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。
• App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。
• main.js是uni-app的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如vuex。

跳转路由

1. 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

 uni.navigateTo({
    url: 'test?id=1&name=uniapp'
});

2. 关闭当前页面，跳转到应用内的某个页面。

uni.redirectTo({
    url: 'test?id=1'
});

3. 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

uni.switchTab({
    url: '/pages/index/index'
});

4. uni.navigateBack(OBJECT)

// 此处是A页面
uni.navigateTo({
    url: 'B?id=1'
});

// 此处是B页面
uni.navigateTo({
    url: 'C?id=1'
});

// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({
    delta: 2
});

数据缓存

1. uni.setStorage(OBJECT):将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

uni.setStorage({
    key: 'storage_key',
    data: 'hello',
    success: function () {
        console.log('success');
    }
});

2. uni.getStorage(OBJECT):从本地缓存中异步获取指定 key 对应的内容。

uni.getStorage({
    key: 'storage_key',
    success: function (res) {
        console.log(res.data);
    }
});

3. uni.removeStorage(OBJECT):从本地缓存中异步移除指定 key。

uni.removeStorage({
    key: 'storage_key',
    success: function (res) {
        console.log('success');
    }
});

4. uni.clearStorage():清理本地数据缓存。

发起请求

1. uni.request(OBJECT)

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

地图

1. uni.getLocation(OBJECT)：获取当前的地理位置、速度。 在微信小程序中，当用户离开应用后，此接口无法调用，除非申请后台持续定位权限；当用户点击“显示在聊天顶部”时，此接口可继续调用。

uni.getLocation({
    type: 'wgs84',
    success: function (res) {
        console.log('当前位置的经度：' + res.longitude);
        console.log('当前位置的纬度：' + res.latitude);
    }
});

2. uni.openLocation(OBJECT):使用应用内置地图查看位置。

uni.getLocation({
    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
    success: function (res) {
        const latitude = res.latitude;
        const longitude = res.longitude;
        uni.openLocation({
            latitude: latitude,
            longitude: longitude,
            success: function () {
                console.log('success');
            }
        });
    }
});