GM小程序填坑之路:

防止重复点击
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")
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值