uni-imaring-GuidePages

基于uni-app框架的swiper组件打开的时候启动。

首次启动展示引导页,之后启动不再展示。那么就意味着,我们需要一个标识来确定,App是否已经启动过。

我们可以在本地存储一个key来做为已经启动过App的标识。那么,我们在入口这里,就可以读取这个key,来决定是否展示引导页。

目录结构

index.vue //入口页
gudie.vue //引导页
tabbar-1.vue //首页
tabbar-3.vue //定位页

一、引导页

存储key

向本地存储中设置launchFlag的值,即启动标识;

获取key

向本地存储中设置launchFlag的值,即启动标识;

获取本地存储中launchFlag的值

若存在,说明不是首次启动,直接进入首页;

若不存在,说明是首次启动,进入引导页;

    var launchFlag='';
    uni.getStorage({
        key: 'launchFlag',
        success: function (sto) {
            launchFlag=sto.data
        }
    });
    if(launchFlag == true){
        uni.switchTab({
            url: '../tabbar/tabbar-1/tabbar-1'
        });
    }else{
        uni.redirectTo({
            url: './gudie'
        });
    }

首页清除key,进行测试

清除本地存储中设置launchFlag的值,即启动标识;

两秒后重启APP,进行测试

    // 清除缓存
    uni.clearStorage();
    // 两秒后重启
    setTimeout(function() {
        plus.runtime.restart();
    }, 2000);

二、定位

以高德微信小程序 SDK 为例,简述如何在 uni-app 中利用微信小程序第三方 SDK,实现 App 端和微信小程序的代码通用。

获取SDK

首先在 高德开放平台,注册账号并且申请相关的 key 等信息,然后下载它的微信小程序版 SDK:微信小程序 SDK

新建一个 uni-app 项目,新建一个 common 目录,然后将前面下载得到的 amap-wx.js 的文件复制进去。

Tip:这个 common 目录只是举例,并非强制约定。但是,不要放在 static 目录下。

引入SDK

新建的 uni-app 默认会有一个 index 页,在 index.vue 中,引入高德小程序 SDK。

import amap from '../../common/amap-wx.js';  
export default {  
}  

在 onLoad 中初始化一个高德小程序 SDK 的实例对象。

import amap from '../../common/amap-wx.js';  
export default {  
    data() {  
        return {  
            amapPlugin: null,  
            key: '这里填写高德开放平台上申请的key'
            addressName: '',
            weather: {
                hasData: false,
                data: []
            },
            allAddress: ''
        }  
    },  
    onLoad() {  
        this.amapPlugin = new amap.AMapWX({  
            key: this.key  
        });  
    }  
}  

使用API

利用高德小程序 SDK,获取当前位置地址信息,以及当前位置的天气情况。

getRegeo() {
    uni.showLoading({
        title: '定位中'
    });
    this.amapPlugin.getRegeo({
        success: (data) => {
            console.log(JSON.stringify(data))
            this.addressName = data[0].regeocodeData.addressComponent;
            this.allAddress = data[0].regeocodeData.formatted_address;
            console.log(this.addressName.province)
            console.log(this.addressName.district)
            uni.hideLoading();
        }
    });
},
getWeather() {
    uni.showLoading({
        title: '获取信息中'
    });
    this.amapPlugin.getWeather({
        success: (data) => {
            console.log(data);
            for (const key in data) {
                console.log(key);
                if (key !== 'liveData') {
                    this.weather.data.push({
                        name: 'div',
                        children: [{
                            type: 'text',
                            text: data[key].text + ':' + data[key].data
                        }]
                    });
                }
            }
            uni.hideLoading();
            this.weather.hasData = true;
        }
    });
}

运行方式

将文件解压拖入HBuilder X ,运行项目即可。

不求赞助,觉得不错给个五星好评谢谢大家!

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

手机存储

2. 本插件采集的手机端数据、发送的服务器地址、以及数据用途说明:

使用uni.setStorage({})缓存数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

无广告,无广告,无广告,重要的事儿说三遍

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问