Guoguo-notes
主页
  • 常用笔记
  • 飞码篇
  • Java
  • React笔记
  • 袁果锅生态
GitHub
主页
  • 常用笔记
  • 飞码篇
  • Java
  • React笔记
  • 袁果锅生态
GitHub
  • 飞码篇

    • CSS--common.md
    • ES6.md
    • Git提交.md
    • Js获取当前时间的方法.md
    • Uni-App笔记.md
    • Uni-app API.md
    • Uniapp-插件.md
    • VueX 笔记.md
    • js函数封装.md
    • js常规.md
    • uView基本使用.md
    • uniapp 引入组件库.md
    • 常用正则表达式.md
    • 界面类.md
    • 笔记.md
    • 组件封装.md
    • 编程逻辑整理.md
    • 调用接口.md

最新uniapp登录逻辑

<template>
  <view>
    <form>
      <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
        <image class="avatar" :src="avatarUrl"></image>
      </button>
      <input type="nickname" @blur="getnickname" placeholder="请输入昵称" />
      <button @click="submit"> 提交 </button>
    </form>
  </view>

</template>

<script>
  export default {
    data() {
      return {
        avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
        nickname: ""
      }
    },
    methods: {
      onChooseAvatar(e) {
        this.avatarUrl = e.detail.avatarUrl
      },
      getnickname(e) {
        this.nickname = e.detail.value
      },
      getDataTime() {
        // 得到时间参数
        function timestampToTime(timestamp) {
          var date = new Date(timestamp); //时间戳为10位需*1000,时间戳为13位的话不需乘1000
          var Y = date.getFullYear() + '-';
          var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
          var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
          var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
          var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
          var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
          return Y + M + D + h + m + s;
        }
        var timestamp = Date.parse(new Date());
        return timestampToTime(timestamp)
      },
      submit() {
        const db = wx.cloud.database();
        db.collection('userInfo').add({
            data: {
              dateTime: this.getDataTime(),
              headUrl: this.avatarUrl,
              nickName: this.nickname
            }
          })
          .then(res => {
            console.log(res)
            const db = wx.cloud.database();
            db.collection('userInfo')
              .doc(res._id)
              .get().then(res => {
                console.log(res);
                const lsData = {
                  userInfo: {
                    avatarUrl: this.avatarUrl,
                    nickName: this.nickname
                  }
                }
                uni.setStorage({
                  key: 'OpenId',
                  data: res.data._openid,
                  success: function () {
                  		console.log('OpenId___success');
                  	}
                })
                uni.setStorage({
                  key: 'infoRes',
                  data:lsData,
                  success: function () {
                  		console.log('infoRes___success');
                  	}
                })
                const db = wx.cloud.database();
                db.collection('userInfo').where({
                  _openid: res.data._openid,
                  dateTime: db.command.neq(res.data.dateTime),
                }).remove().then(() => {

                  uni.showToast({
                    title: "登陆成功",
                    duration: 1500,
                    success: (res) => {
                      uni.switchTab({
                        url: '/pages/index/index'
                      })
                    }
                  })
                })
              })
          })

        console.log(this.avatarUrl);
        console.log(this.nickname);
      }
    }
  }
</script>

调用接口

import {
    getNewsList
} from '@/api/user.js';
---
    onShow() {
    this.init()
},
    ---
        init() {
        
        getInfo({
            data: {

            }
        }).then(res => {
            if (res.code == 1) {
                console.log(res.data)
            }
        })
        
    },

uni.getUserProfile(OBJECT)--获取用户信息

获取用户信息。每次请求都会弹出授权窗口,用户同意后返回 userInfo。

将内容复制到剪贴板

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

将图片保存到本地

1.在main.js中 最下面进行注册

const saveImage = function(e) {
	uni.downloadFile({
		url: e,
		success: function(res) {
			console.log(res);
			//图片保存到本地
			uni.saveImageToPhotosAlbum({
				filePath: res.tempFilePath,
				success: function(data) {
					uni.showToast({
						title: '保存成功',
						icon: 'success',
						duration: 2000
					})
				},
				fail: function(err) {
					console.log(err);
					if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
						console.log("当初用户拒绝,再次发起授权")
						uni.openSetting({
							success(settingdata) {
								console.log(settingdata)
								if (settingdata.authSetting[
										'scope.writePhotosAlbum']) {
									console.log('获取权限成功,给出再次点击图片保存到相册的提示。')
								} else {
									console.log('获取权限失败,给出不给权限就无法正常使用的提示')
								}
							}
						})
					}
				},
				complete(res) {
					console.log(res);
				}
			})
		}
	})
}

Vue.prototype.$uniApi = {
	saveImage
};
  1. 在所需要的文件中进行引入然后进行调用
	import Vue from 'vue';

// 调用代码
	Vue.prototype.$uniApi.saveImage(this.cover)

长按图片可以保存,收藏,发送给朋友

show-menu-by-longpress

	<image :src="img" mode="" show-menu-by-longpress></image>

长按保存图片

uni-app中长按保存图片
个人第二个项目是在小程序和app端的一款应用,在项目中需要使用到长按保存二维码功能,但uni-app官方的uni.saveImageToPhotosAlbum api只能传入文件路径,不支持网络路径,而我们大部分需要保存的图片基本都是网络路径,所以想到了uni.downloadFile,这个api会返还一个图片的临时路径,刚好可以作为参数使用saveImageToPhotosAlbum,所以问题就可以解决!

关于长按事件,我使用的是canvas的@longtop,不过这个不是难点,看需求只要能执行即可

1.放置二维码图片

<view class="CodeBox MarginAuto MarginT_20rpx BackgroundC_FFFFFF PaddingT_1rpx">
                <canvas style="width: 440rpx;height: 490rpx;" canvas-id="code" @longtap="bc_code">
					<image class="CodeImg Block" :src="codeImg" mode="widthFix"></image>
				</canvas>
</view>
//注意,canvas必须添加属性canvas-id,否则不显示
2.主体代码

//长按保存二维码
			bc_code(){
				let that = this;
				//console.log('保存二维码')
				uni.downloadFile({           //获得二维码的临时地址
					url:this.codeImg,
					success:(res)=>{
						//console.log('获取url',res)
						if(res.statusCode == 200){
							uni.saveImageToPhotosAlbum({
								filePath:res.tempFilePath,//传入临时地址
								success() {
									that.$.ti_shi('保存成功')//封装的提示
								},
								fail() {
									that.$.ti_shi('保存失败')
								}
							})
						}
					}
				})
			},
————————————————
版权声明:本文为CSDN博主「jiangbei-north」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/m0_47703222/article/details/107779627

将服务器文件保存到本地 [有转发、浮窗、选择其他应用打开、收藏、保存到手机]

需要使用的组件中

import Vue from 'vue'

// 保存文件
dialogConfirm() {
Vue.prototype.$uniApi.saveFile(this.exportlink);
},

下面这个文件放在 main.js 文件中

const saveFile = function(e) {
	let FileSystemManager = uni.getFileSystemManager();
	uni.downloadFile({
		url: e,
		success: function(res) {
			console.log(res);
			//图片保存到本地
			uni.openDocument({
				filePath: res.tempFilePath,
				showMenu:true,
				success: function(data) {
					FileSystemManager.open({
						filePath: data.savedFilePath,
						success: function(data) {

						},
						fail: function(err) {
						
						},
						complete(res) {

						}
					})
				},
				fail: function(err) {

				},
				complete(res) {
					console.log(res);
				}
			})
		}
	})
}

上传文件

获取文件的临时路径

chooseMessageFile 获取文件的临时路径

  uni.chooseMessageFile({
        count: 1,
        type: 'file',
        success: (res) => {
            uni.showLoading({
                title:'上传中...',
            })
            const path = res.tempFiles[0].path
            let size = res.tempFiles[0].size;
            let filename = res.tempFiles[0].name;
            if (filename.indexOf(".xls") == -1) {
                uni.showModal({
                    title: '提示',
                    content: '文件类型必须为excel!(.xls)',
                    confirmColor: '#0177ff',
                    confirmText: '确定',
                })

            } else {
                //res.tempFiles[0].path
                //这里写选择exec文件后的操作 就可以获取到文件路径了   
                console.log(res.tempFiles[0].path);
            }

        }
    })

upload用来将临时文件转换为网络文件

           upload({
                filePath:res.tempFiles[0].path,
            }).then(ras=>{
                uni.hideLoading();
                signAddCheck({
                    data: {
                        code: this.code,
                        file_path: ras.info.path
                    }
                }).then(res => {
                    if (res.code == 1) {
                        console.log(res.data)
                    }
                })

完整代码

在api文件中声明这个文件

upload(params) {return req.UPLOAD('file/upload',params)},
import {upload} from "@/api/index.js"
upload() {
    uni.chooseMessageFile({
        count: 1,
        type: 'file',
        success: (res) => {
            uni.showLoading({
                title:'上传中...',
            })
            const path = res.tempFiles[0].path
            let size = res.tempFiles[0].size;
            let filename = res.tempFiles[0].name;
            if (filename.indexOf(".xls") == -1) {
                uni.showModal({
                    title: '提示',
                    content: '文件类型必须为excel!(.xls)',
                    confirmColor: '#0177ff',
                    confirmText: '确定',
                })

            } else {
                //res.tempFiles[0].path
                //这里写选择exec文件后的操作    
                console.log(res.tempFiles[0].path);
                upload({
                    filePath:res.tempFiles[0].path,
                }).then(ras=>{
                    uni.hideLoading();
                    signAddCheck({
                        data: {
                            code: this.code,
                            file_path: ras.info.path
                        }
                    }).then(res => {
                        if (res.code == 1) {
                            console.log(res.data)
                        }
                    })
                })
            }

        }
    })
},

拍照并上传图片

import {
	upload
} from "@/api/index.js"

方法:

		camera() {
			let that = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
				sourceType: ['camera'], //从相册选择  album
				success: (res) => {
					let imagepath = res.tempFilePaths;
					for (let i in imagepath) {
						upload({
							filePath: imagepath[i]
						}).then(res => {
							if (res.code == 1) {
								that.imgsrc = res.info.url;
							}
						})
					}
				}
			});
		},

值存入缓存

将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口。

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

获取缓存中的 token 值

const token = uni.getStorageSync('token');

地理位置 api 不能使用

在小程序manifase.json中进行配置

  /* 快应用特有相关 */
  "mp-weixin": {
    "appid": "wxa83ab7bd7e9f442b",
    "setting": {
      "urlCheck": false
    },
    "usingComponents": true,
    "permission": {
      "scope.userLocation": {
        "desc": "你的位置信息将用于小程序位置接口的效果展示"
      }
    },
    "requiredPrivateInfos": [
      "getLocation",
      "chooseLocation",
      "onLocationChange",
      "startLocationUpdateBackground",
      "startLocationUpdate"
    ]
  },

修改基础库版本

在微信小程序的主页面中 找到 右上角 详情 ===》 本地设置===》 配置基础库 改为 2.25.4 就可以了

别忘了 需要去微信公众平台申请相关的api调用权限

获取地理位置

获取地区 地址 经纬度 等信息【调用腾讯地图,选择地点】

调用这个方法 然后将 manifest.json 中微信小程序配置中的地理位置授权打开

文字介绍: *** 你的位置信息将用于小程序位置接口的效果展示***

uni.chooseLocation({
    success: res => {
        console.log('位置名称:' + res.name);
        console.log('详细地址:' + res.address);
        console.log('纬度:' + res.latitude);
        console.log('经度:' + res.longitude);
        uni.getLocation({
            type: 'gcj02',
            altitude:true,
            geocode:true,
            success: function(res) {
                console.log('当前位置的经度:' + res.longitude);
                console.log('当前位置的纬度:' + res.latitude);
            }
        });
        console.log('省:' + res.address.slice(0, res.address.indexOf('省') + 1));
        console.log('市:' + res.address.slice(res.address.indexOf('省') + 1, res.address.indexOf('市') + 1));
        console.log('区:' + res.address.slice(res.address.indexOf('市') + 1, res.address.indexOf('区') + 1));
        this.query.address = res.address;
        this.query.latitude = res.latitude;
        this.query.longitude = res.longitude;
        this.query.province = res.address.slice(0, res.address.indexOf('省') + 1)
        this.query.city = res.address.slice(res.address.indexOf('省') + 1, res.address.indexOf('市') + 1)
        this.query.district = res.address.slice(res.address.indexOf('市') + 1, res.address.indexOf('区') + 1)
    }
});

获取经纬度【获取的是当前位置】

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

根据经纬度解析出对应的地理位置

			localtion(index) {
				let that =this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						console.log(res);
						console.log('当前位置的经度:' + res.longitude);
						console.log('当前位置的纬度:' + res.latitude);
						uni.request({
							url: 'https://restapi.amap.com/v3/geocode/regeo',
							method: 'GET',
							data: {
								location: res.longitude + ',' + res.latitude,
								key: '83a2cb04cb7c947dfeaa59583f4823da', // batch:false,

							},
							success: function(res) {
								console.log("-------------------> 城市解析");
								console.log(res.data.regeocode.formatted_address);
								// _this.geography = res.data.regeocode.formatted_address;
								that.fromData[index].value=res.data.regeocode.formatted_address
								that.$forceUpdate()
							},
							fail: function(err) {
								console.log('地址解析失败' + err);
							}
						})


					}
				});
			},

打开分享图片弹窗,可以将图片发送给朋友、收藏或下载

示例图片:

【所有的 wx.方法,都可以直接写成 uni.方法】

wx.showShareImageMenu(Object object) | 微信开放文档 (qq.com)

 uni.downloadFile({
   url: 'https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg',
   success: (res) => {
     uni.showShareImageMenu({
       path: res.tempFilePath
     })
   }
 })

分享一个 类似于推文的

示例图片

​

这个必须是button按钮 ,且必须这么写

<button class="buttoncontact" data-name="shareBtn" open-type="share">分享</button>

按钮 html 二

<button class="buttoncontact flex column center" data-name="shareBtn" open-type="share">
    <uni-icons type="redo-filled" color="#0095ff" size="29"></uni-icons>
    <view>分享</view>
</button>

下面这个定义的和 onLoad 平级 来定义

onShareAppMessage(res) {
    if (res.from === 'button') {// 来自页面内分享按钮
        console.log(res.target)
    }
    return {
        title: '自定义分享标题',
        path: '/pages/signIn/detail',
        imageUrl:'/static/images/signIn/copy.png'
    }
},

清除按钮的样式

  .buttoncontact {
        background: none;
        padding: 0;
        margin: 0;
        font-size: 32rpx;
        line-height: 1;

        &::after {
          border: none;
        }
      }

按钮 CSS 二

.buttoncontact {
    background: none;
    padding: 0;
    margin: 0;
    line-height: 1;
    width: 170upx;
    font-size: 28upx;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &::after {
        border: none;
    }
}

调用相机或本机相册的API

uni.chooseImage({
	count: 6, //默认9 这个是可以选择的图片的个数
	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
	sourceType: ['album'], //从相册选择  改为camera是相机
	success: function (res) {
		console.log(JSON.stringify(res.tempFilePaths));
	}
});


crop 参数说明

消息提示框

uni.showToast({
	title: '标题',
	duration: 2000
});

弹出框 uni-ui

<!-- 提示窗示例 -->
<uni-popup ref="alertDialog" type="dialog">
    <uni-popup-dialog type="success" cancelText="关闭" confirmText="删除" title="通知" content="确定要删除此管理员吗?" @confirm="dialogConfirm"
                      @close="dialogClose"></uni-popup-dialog>
</uni-popup>

创建一个点击事件来调用这个窗口

this.$refs.alertDialog.open()

弹出框 代码式

uni.showModal({
    title: '提示',
    content: '这是一个模态弹窗',
    confirmColor: '#ee6666', //确定字体颜色
    showCancel: false, //没有取消按钮的弹框
    buttonText: '确定',
    success: function(res) {
        if (res.confirm) {
            console.log('用户点击确定');
        } else if (res.cancel) {
            console.log('用户点击取消');
        }
    }
});

动态修改 uniapp 的导航栏标题

uni.setNavigationBarTitle({
	title: '复制签到'
});

是否下拉刷新

onPullDownRefresh() {
    //监听下拉刷新动作的执行方法,每次手动下拉刷新都会执行一次
    console.log('refresh');
    setTimeout(function () {
        uni.stopPullDownRefresh();  //停止下拉刷新动画
    }, 1000);
}

———————————————— 版权声明:本文为CSDN博主「攻城狮YanGo」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/weixin_39644462/article/details/83038684

添加右上角的发送给朋友

onShareAppMessage() {},

onShareAppMessage(res) {
    if (res.from === 'button') { // 来自页面内分享按钮
        console.log(res.target)
    }
    return {
        title: 果锅留言,
        path: '/pages/index/index',
        imageUrl: "/static/images/img1.jpg",
    }
},

长按震动

<view @longtap="vibrateShort">{{ house.Name }}</view>
vibrateShort() {
    uni.vibrateShort({
        success: function() {
            console.log('success');
        }
    };
},

<script>
  export default {
    data() {
      return {
        id: "",
        formData:{}
      };
    },
    onLoad(options) {
      console.log('接收的options参数:', options);
      this.id = options.id
    },
    onShow() {

      const db = wx.cloud.database();
      db.collection('question-investigation').where({
        _id: this.id
      }).get({
        success: (res => {
          console.log('返回回来的数据  && this.formData', res.data[0]);
          this.formData = res.data[0]
        })
      })

    },

    methods: {

    }
  }
</script>

图片点击放大

    clickImg(index) {
        console.log(this.formData.imgUrl);
        console.log(index);
        uni.previewImage({
          urls: this.formData.imgUrl, //需要预览的图片http链接列表,多张的时候,url直接写在后面就行了
          current: index, // 当前显示图片的http链接,默认是第一个
          success: function(res) {
            console.log(res,'success');
          },
          fail: function(res) {
            console.log(res,'fail');
          },
          complete: function(res) {
            console.log(res,'complete');
          },
        })
      },
Edit this page
Last Updated:
Contributors: 袁果锅
Prev
Uni-App笔记.md
Next
Uniapp-插件.md