之前做项目的时候太着急就没做请求时加载的动画效果，今天看官网的时候突然发现有自带的api组件，用的还不错，
但是官网也有大写的注意：
showToast 和 showLoading 是底层同一个（按的小程序的设计），所以 showToast 和 showLoading 会相互覆盖，而 hideLoading 也会关闭 showToast,
解决办法：就是尽量使用其中一个就可以了，避免同时使用
界面真的是十分好看，作为一个女生来说爱了，具体组件可以到官网进行下载，地址
colorUI还提供了活跃的群文件：https://www.yuque.com/colorui
这个解决办法挺多的但是要看哪种比较适用了，以下举例：
1、具体思路：就是获取当前手机屏幕高度，然后当手机屏幕高度发生变化时与手机屏幕高度进行比较，如果小于则将底部按钮隐藏，大于再恢复
uni.getSystemInfo({ //这里调用小程序获取系统信息
success: (res)=> {
this.windowHeight = res.windowHeight;
}
});
uni.onWindowResize((res) => { //小程序api
if(res.size.windowHeight < this.windowHeight){
this.isShowFlag = false;
}else{
this.isShowFlag = true;
}
});
弊端：底部按钮在消失之前会屏幕闪动一下
2、具体思路：在输入框获取焦点时，将底部定位使用position:static,再失去焦点时，将底部定位使用position:absoluted/fixed
弊端：就是使用static的时候如果页面的内容如果高度不够的话可能就会看见底部的内容
3、两种思路的实现方法相差不多，这里贴出第一种的代码，但是各有弊端，还有其他的思路，还是要根据自己的情况而定，大家酌情使用。
只有在全局里改变才会做用到样式，局部改变是不起作用的。
要将即将执行的函数放入定时器中进行执行，并且要记得改变this指向或者直接使用箭头函数
uni.showToast({
title: title,
icon: "none"
});
setTimeout(function(){
that.getchartCode();
},2000)
微信小程序提供给我们的获取位置的api有两种，获取经纬度，可以选择地区然后获取具体位置
但是在项目中我需要使用详细位置而不是经纬度，也不是选择之后获取的位置，所以需要引入第三方地图的sdk
我这里使用高德，主要就是需要注册一个key来供我们使用，其余并不复杂，参考示例
根据参考示例以及图示基本可以完成key值得获取了
接下来就上代码
<text style="color: #9B9B9B;">{{Areaaddress}}</text>
import amap from '../../common/amap-wx.js'
//1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
getAuthorizeInfo(a="scope.userLocation"){
var _this=this;
uni.authorize({
scope: a,
success() { //1.1 允许授权
_this.getLocationInfo();
},
fail(){ //1.2 拒绝授权
uni.showToast({
title: "你拒绝了授权，无法获得周边信息",
icon: "none"
});
}
})
},
//2. 获取地理位置
getLocationInfo(){
var _this=this;
uni.getLocation({
type: 'gcj02',
success (res) {
_this.latitude = res.latitude.toString(); //纬度
_this.longitude = res.longitude.toString();
_this.loadCity(_this.latitude ,_this.longitude);
}
});
},
//获取精确位置
loadCity: function (latitude, longitude) {
var that = this;
var myAmapFun = new amap.AMapWX({ key: that.key });
myAmapFun.getRegeo({
location: '' + longitude + ',' + latitude + '',//location的格式为'经度,纬度'
success: function (e) {
let city,province;
city= e[0].regeocodeData.addressComponent.city;//城市
province= e[0].regeocodeData.addressComponent.province;//省份
that.Areaaddress = province;
},
fail: function (info) {
uni.showToast({
title: info,
icon: "none"
});
}
});
},
获取用户信息必须手动授权，不可以在直接授权
<template>
<view class="content">
<button open-type="getUserInfo" @getuserinfo="getuserinfo">登录</button>
<!-- 用户信息模块 -->
<view class="userBox">
<!-- 昵称 -->
<text class="nickName">{{nickNames}}</text>
<!-- 头像 -->
<image class="userIcon" :src="avatarUrl"></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
nickNames: '匿名用户',
avatarUrl: 'https://www.189.cn/client/wap/wapclient/xingcard/images/index_avatar.png'
}
},
onLoad() {
},
methods:{
getuserinfo:function(){
let that = this;
uni.login({
provider: 'weixin',
success: function(loginRes) {
// 获取用户信息
uni.getUserInfo({
provider: 'weixin',
success: function(infoRes) {
that._data.nickNames = infoRes.userInfo.nickName;
that._data.avatarUrl = infoRes.userInfo.avatarUrl;
}
});
}
});
}
}
}
</script>
<style>
/* 用户盒子 */
.userBox {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: linear-gradient(to top right, #ffd422 0%, #ffe944 25%, #fff970 100%);
}
/* 用户昵称 */
.nickName {
color: #55240A;
}
/* 用户头像 */
.userIcon {
align-self: flex-end;
border-radius: 50%;
overflow: hidden;
width: 100px;
height: 100px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5)
}
</style>
这个在ui-app的组件库里面也有丰富的示例供我们挑选就不多做介绍了，在项目中我用的是大家可以自行选择
搜索了半天看到一个特别麻烦的，真的是无从下手，要是想研究的可以学习一下，详见
最后使用了一个免费的接口获取地址，免费获取ip的网址特别多，相信大家百度就有，就不多说了。