防止重复点击
app.js中定义共有方法和变量
globalData: {
userInfo: null,
publicAPI:'',//共有接口路径
PageActive: true,//防止多次点击
},
preventActive (fn) {//防止多次点击
const self = this
if (this.globalData.PageActive) {
this.globalData.PageActive = false
if (fn) fn()
setTimeout(() => {
self.globalData.PageActive = true
}, 1500); //设置该时间内重复触发只执行第一次,单位ms,按实际设置
} else {
console.log('重复点击或触发')
wx.showToast({
title: '请稍等',
icon: 'none',
mask: true,
duration: 2000
})
}
}```
在需要执行的地方调用
getApp().preventActive(()=>{
//执行的内容
wx.navigateTo({
url: '/pages/map/map',
})
})
防止多次点击的方法【执行的内容是前往导航】
var minMap = date.getMinutes().toString()// + date.getSeconds().toString();//获得当前分钟数
//开始缓存池中没有分钟数,当前分钟数肯定不等于缓存中的分钟数,当前可以执行
if (minMap != wx.getStorageSync('minMap')) {
wx.setStorageSync('minMap', minMap)//把分钟数放到缓存
var that = this
wx.getLocation({ //获取当前的经纬度(起点位置)
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: function (res) { //因为这里得到的是你当前位置的经纬度
if (e.currentTarget.dataset.latitude !== 0 && e.currentTarget.dataset.longitude !== 0) {
//console.log('导航路线地图')
wx.openLocation({ //所以这里会显示你当前的位置
name: e.currentTarget.dataset.address, //"沈阳市和平区测试目的地",//
latitude: e.currentTarget.dataset.latitude,//41.80//纬度
longitude: e.currentTarget.dataset.longitude,// 123.43//经度
scale: 18
})
} else {
wx.showToast({
title: '地址有误,请联系客服咨询',
icon: 'none',
duration: 2000
})
}
}
})
}
else {
//当发生了1分钟内多次点击等事件,弹窗提示或者做别的操作。
wx.showToast({
title: '前往导航页中,请等待',
icon: 'none',
mask: true,
duration: 2000
})
}
自动获取用户头像和昵称
<open-data class="myImg" type="userAvatarUrl"></open-data>
<open-data class="my_headimg" type="userNickName"></open-data>
1/编辑保存之后,返回列表页面,如何让类别页面保存原本状态进行刷新
wx.navigateBack,其实你从那个页面跳走再用wx.navigateBack返回的方式走到该页面,走的时候是啥状态现在就是啥状态,
如果涉及状态改变的部分必须写在onshow生命周期函数中,onload只会初次执行,等wx.navigateBack不会再次执行,但onshow会执行
。
2/为了显示不同状态,不同样式
wxml中需要添加对应加入的class名的变量,该变量是循环的所以是item.stateClass
for (var i = 0; i < length; i++) { console.log(list[i].emergencyDegreeName)//根据这个判断显示的样式不同 if (list[i].emergencyDegreeName == "非常紧急") { list[i].stateClass = 'order_mesgst1' //添加不同的class } else if (list[i].emergencyDegreeName == "一般紧急") { list[i].stateClass = 'order_mesgst2' } else if (list[i].emergencyDegreeName == "不紧急") { list[i].stateClass = 'order_mesgst3' } }
3/小程序时间戳转化
// 时间戳转换 stampChange: function (time) { var now = new Date(time); var year = now.getFullYear(); var month = now.getMonth() + 1; var date = now.getDate(); var hour = now.getHours(); var minute = now.getMinutes(); return year + "-" + month + "-" + date + " " + hour + ":" + minute; },
4/间隔时间的计算
// 计算时间间隔—工单前面时间的显示情况(完成工单时间到创建时间的显示)
getDelays: function (timeStamp, timeEnd) {
console.log(timeEnd)
console.log(timeStamp)
var now = new Date(timeEnd); // 工单完成时间
var date = new Date(timeStamp); // 后台返回时间戳转换成常规时间对象 – 工单创建时间
// 计算时间间隔,单位为分钟
var inter = parseInt((now.getTime() - date.getTime()) / 1000 / 60);//转为秒
if (inter == 0) {
return “即刻完成”;
}
//多少分钟前
else if (inter < 60) {
inter = inter.toString() + “分完成”;
return inter;
}
//多少小时前
else if (inter < 60 * 24) {
inter = parseInt(inter / 60).toString() + “时完成”;
return inter;
// }
}
else if (inter > 60 * 24) {
inter = parseInt(inter / (60 * 24)).toString() + “天完成”;
return inter;
}
},
5/防止多次请求数据
var date = new Date();
var m = date.getMinutes().toString();//获得当前分钟数
console.log('提交外面的')
console.log(m)
console.log(date.getMinutes())
//开始缓存池中没有分钟数,当前分钟数肯定不等于缓存中的分钟数,当前可以执行
if (m != wx.getStorageSync('m')) {
wx.setStorageSync('m', m)//把分钟数放到缓存
//要做的事情,提交啊,点击啊等等
this.setData({
buttonClicked: true//将按钮置灰
})
this.completeOrder(params);
}
else {
//当发生了1分钟内多次点击等事件,弹窗提示或者做别的操作。
wx.showToast({
title: '数据已提交,请等待',
icon: 'none',
mask: true,
duration: 2000
})
}
6/事件绑定 catchtap(catch:tap)会阻止事件冒泡,bindtap不会阻止事件冒泡
7/自己添加属性
<view data-typegm="1" bindtap="getAttr">点击可以获取自定义属性</view>
getAttr:function(e){
console.log("获取自定义属性typegm",e.target.dataset.typegm)
}
8/云开发
在js文件最上边进行初始化
初始化,const db=wx.cloud.database()
切换环境
const testDB =wx.cloud.database({
env:“环境名称”
})
a/在js中初始化db
b/点击云开发–数据库–添加集合user
c/添加插入数据库的方法
insert:function(e){
db.collection('user').add({
data:{
name:"添加的名字',
age:45
},
success:res=>{
console.log(res)
},
fail:err=>{
console.log(err)
}
})
}
insert:function(e){
db.collection('user').add({
data:{
name:"添加的名字',
age:45
}
}).then(res=>{
//成功
console.log(res)
}).catch(err=>{
//失败
console.log(err)
})
}
d/更新数据
update:function(e){
db.collection('user').doc('唯一的id标识').update({
data:{
age:23
}
}).then(res=>{
console.log('成功',res)
}).catch(err=>{
console.log("失败",err)
})
}
e/查找指定数据[不是自己写入的数据,查不到,去云开发数据库修改权限]
search:function(e){
db.collection('user').where({
name:'gm'
}).get().then(res=>{
console.log('查找成功',res)
}).catch(err=>{
console.log('失败',err)
})
}
f/删除数据[单个数据删除]
detele:function(e){
db.collection('user').doc('唯一标识').remove().then(res=.{
console.log('成功',res)
}).catch(err=>{
console.log('失败',err)
})
}
9/云函数–必须上传并安装依赖
添加新的云函数
调用显示没有wx-server-sdk
输入npm install --save wx-server-sdk@latest
a/云函数求和
云函数sum的内容
sumNumber:function(e){
wx.cloud.callFunction({
name:'云函数的名字',
data:{
a:2,
b:4
}
}).then(res=>{
console.log("成功",res)
}).catch(err=>{
console.log('失败',err)
})
}
b/获取openId
getOpenId:function(e){
wx.cloud.callFunction({
name:'login'
}).then(res=>{
console.log('成功',res)
}).catch(err=>{
console.log('失败',err)
})
}
c/批量删除
deteleMore:function(e){
wx.cloud.callFunction({
name:'云函数的名字'
}).then(res=>{
console.log("成功",res)
}).catch(err=>{
console.log('失败',err)
})
}
10/云存储
wx.cloud.uploadFile 上传文件
wx.cloud.downloadFile 下载文件
wx.cloud.deleteFile 删除文件
wx.cloud.getTempFileURL 获取临时链接
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths
//tempFilePaths 需要改成字符串进行传入,单张图可以tempFilePaths[0]
wx.cloud.uploadFile({
cloudPath: new Date().getTime()+'.png', // 上传至云端的路径
filePath: 'tempFilePaths ', // 小程序临时文件路径
success: res => {
// 返回文件 ID
console.log(res.fileID)
//进行存储
db.collection('imagesList').add({
data:{
fileID:res.fileID
}
}).then(res=>{
console.log('成功',res)
}).catch(err=>{
console.log('失败',err)
})
},
fail: console.error
})
}
})
b/展示图片
getFile:function(e){s
wx.cloud.callFuntion({
name:'login',
}).then(res=>{
//获取openId
db.collection('imagesList').where({
_openid: res.result.openid
}).get().then(result=>{
this.setData({
images:result.data
})
}).catch(error=>{
console.log('失败',error)
})
})
}
c/下载文件
getDownFile:function(e){
//etarget.dataset.fileUrl再点击按钮上自定义的当前图片路径
wx.cloud.downloadFile({
fileID:etarget.dataset.fileUrl, // 文件 ID
success: res => {
// 返回临时文件路径
console.log(res.tempFilePath)
//保存图到手机相册
wx.saveImageToPhotosAlbum({
filePath:res.tempFilePath,
success(res){
wx.showToast({
title:'保存到相册'
})
},
fail:console.error
})
},
fail: console.error
})
}
11/引入三方库
miniprogram单击鼠标右键打开终端npm init
再页面中引入组件进行使用
12/发送请求云函数
写好云函数后要上传并部署
var rp=require('request-promise')
rp(`http://api.douban.com/v2/movie/in_theaters?start=${event.start}&count=${event.count}`).then(function(res){
return res
}).catch(function(err){
console.err(err)
})
页面初始调用这个云函数
接口入参为formdata格式的
formdata:function (obj) {
let fromStr = (k, v) => {
let retStr = ''
retStr += `\r\n--XXX`
retStr += `\r\nContent-Disposition: form-data; name="${k}"`
retStr += `\r\n`
retStr += `\r\n${v}`
return retStr
}
let valueStr = (any) => {
if (typeof any === typeof '') {
return any
} else {
return JSON.stringify(any)
}
}
let retData = ''
Object.keys(obj).forEach(k => {
retData += fromStr(k, valueStr(obj[k]))
})
return retData + `\r\n--XXX--`
},
图片转换为base64
wx.getFileSystemManager().readFileSync(url, "base64")