uniapp随记

大牙Adela

已于 2024-07-09 15:36:20 修改

阅读量601

点赞数 9

文章标签： uni-app 前端 javascript

于 2023-12-21 14:58:36 首次发布

本文链接：https://blog.csdn.net/zxxAdela/article/details/135131149

版权

文章目录

1、this的指向
2、使用uni.navigateBack返回后，页面不刷新
3、uniapp云函数识别不了uni
4、云函数/云数据库
5、传参
6、地图
- 6-1、uniapp获取当前位置具体信息

1、this的指向

在使用api-uni.chooseMedia时，选中的图片不能给data中的变量赋值，需要增加变量代替this
参考文章
原来的代码

chooseMedia() {
	uni.chooseMedia({
		count: 9,
		mediaType: ['image', 'video'],
		sourceType: ['album', 'camera'],
		maxDuration: 30,
		camera: 'back',
		success(res) {
			console.log('res', res.tempFiles)
			this.srcList = res.tempFiles
		}
	})
},

改之后的代码

chooseMedia() {
	let self = this
	uni.chooseMedia({
		count: 9,
		mediaType: ['image', 'video'],
		sourceType: ['album', 'camera'],
		maxDuration: 30,
		camera: 'back',
		success(res) {
			console.log('res', res.tempFiles)
			self.srcList = res.tempFiles
		}
	})
},

2、使用uni.navigateBack返回后，页面不刷新

uni.navigateBack({
  delta:1 // 返回的页面数，如果delta大于现有页面数，则返回到首页
})

在返回页面的onShow生命周期中调用需要刷新数据的方法

// 返回前一页面的页面
export default {
  // ...其他代码...
  onShow(){
    // 调用刷新数据的方法
    this.loadData()
  },
  methods:{
    loadData(){
      // 这里是刷新数据的逻辑
    }
  }
}

3、uniapp云函数识别不了uni

参考文章、uniCloud API列表
前端环境（页面/组件）中

uni.request({
  url:'xxx'
})

云函数中

unicloud.request({
  url:'xxx'
})

4、云函数/云数据库

4-1、uniapp用代码创建一个不存在的命名数据库表

参考文章1、参考文章2、参考文章3、

4-2、uniapp调用云函数数据库需要手动刷新

4-3、Error：权限校验未通过，未能获取当前用户信息，当前用户为匿名身份，请参考文档：https://uniapp.dcloud.net.cn/uniCloud/schema.html#handler-permission-error

4-4、Error: 数据库验证失败：提交的字段[“title”,“remark”]在本地数据表的schema文件中不存在

5、传参

6、地图

6-1、uniapp获取当前位置具体信息

export default {
  methods: {
    getCurrentLocationInfo() {
      // 获取当前位置的经纬度
      uni.getLocation({
        type: 'wgs84',
        success: (res) => {
          this.getAddressByLatLng(res.latitude, res.longitude);
        },
        fail: () => {
          uni.showToast({
            title: '无法获取位置信息',
            icon: 'none'
          });
        }
      });
    },
    // 使用经纬度获取详细地址信息
    getAddressByLatLng(latitude, longitude) {
      // 这里以高德地图API为例
      const amapKey = '你的高德地图API Key';
      const url = `https://restapi.amap.com/v3/geocode/regeo?key=${amapKey}&location=${longitude},${latitude}`;
 
      uni.request({
        url: url,
        success: (res) => {
          if (res.data && res.data.regeocode) {
            const address = res.data.regeocode.addressComponent;
            uni.showToast({
              title: `当前位置：${address.province} ${address.city} ${address.district} ${address.township}`,
              icon: 'none'
            });
          } else {
            uni.showToast({
              title: '无法获取详细地址信息',
              icon: 'none'
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '请求失败',
            icon: 'none'
          });
        }
      });
    }
  }
}