微信小程序实用小技巧（持续更新）

前言

微信小程序(后面统称小程序)开发中我们会用到一些实用的小技巧来提升我们开发的效率，今天将自己总结的一些心得和大家分享下。

全局变量

全局变量主要是缓存一些整个小程序周期内会经常使用并且不会频繁变动的变量，比如说用户个人信息之类的。下面我们来通过伪代码看怎么使用：

//app.js中定义一个userInfo对象
onLaunch: function () {
    
    
	globalData: {
    
    
	   userInfo: null
	}
}

//任意页面的js文件获取app实例
const app = getApp()
Page({
    
    ...省略})

//任意页面的js文件给app中的userInfo赋值
app.globalData.userInfo = userdata（从网络获取用户数据）

//任意页面的js文件从app中获取userInfo
let userInfo = app.globalData.userInfo
//使用userInfo做界面展示或者逻辑操作

全局函数

全局函数是为了避免使用频繁重复写一个经常要用到的函数，导致代码冗余。比如字符串和对象非空判断，Toast提醒之类的。下面我们来通过伪代码看怎么使用：

//app.js中定义一个userInfo对象
onLaunch: function () {
    
    
	isempty(target){
    
    
	    if ('' == target || 'null' == target || null == target || typeof (target) == 'undefined' || target == undefined) {
    
    
	      return true;
	    }
	    return false;
	}
}

//任意页面的js文件获取app实例
const app = getApp()
Page({
    
    ...省略})

//任意页面的js文件调用
let isempty = app.isempty('test')
//通过isempty结果判定是否是空，可以判断字符串和对象
console.log('isempty : ' + isempty)

引入js实现全局函数

这里要实现的效果和上面一个步骤类似，只不过通过自定义js文件，然后在页面js中引入来实现。下面我们来看怎么使用：

先在项目根目录新建lib(名字可以再满足命名规范的前提下随意取)文件夹，然后在文件夹lib里面新建一个tools.js工具

//tools.js中的内容 start
function isempty(target) {
    
    
  if ('' == target || 'null' == target || null == target || typeof (target) == 'undefined' || target == undefined) {
    
    
    return true;
  }
  return false;
}

//将接口对外暴露，这一步很重要，前面isempty是对外暴露的函数名自己可以随意取，后面的是引用js中的函数
module.exports = {
    
    
  isempty: isempty
}

//tools.js中的内容 end

//任意页面的js文件中引用
var tools = require('../../lib/tools.js')
Page({
    
    ...省略})

任意页面的js文件中任意函数中引用
let isempty = tools.isempty('')
console.log('isempty : ' + isempty)

时间转换

//毫秒数转字符串，字符串格式为：2000-1-1 1:00:00
var d = new Date(ts)
return [d.getFullYear(), d.getMonth() + 1, d.getDate()].join('-') + [d.getHours(), d.getMinutes(), d.getSeconds()].join(':')

//字符串转毫秒数，字符串格式为：2000-1-1 1:00:00(ios真机不能识别2000-1-1，可以改成2000/1/1格式)
var timestamp = new Date(timestr).getTime()

//Date类型转毫秒数
var now = Date.parse(new Date())

给data对象中的属性赋值

Page({
    
    

  /**
   * 页面的初始数据
   */
  data: {
    
    
   param: 1,
   list[{
    
    
      'name': '1'
    }] 
  }
})

//给param设置值
this.setData({
    
    
	param: 2
})

//给list中的第一个元素name设置值
let keystr = 'list[0].name'
this.setData({
    
    
  [keystr]: '2'
})

//给list中的第n个元素name设置值,可以用字符串模板
//这里特别感谢评论区一楼@97pra的建议，不过要注意的是这里中括号中的“单引号”
//“单引号”请参考下面写法
this.setData({
    
    
  // 索引不确定的情况 假设为n ==>  [`list[${n}].name`] : 'xxx' 
})

字典(Map)操作

//设置键值对
var map = new Map()
map.set('name','jack')
map.set('age', 18)
map.set('sex','male')

//通过key 获取value
var value = map.get('name')

//通过key删除value
map.delete('sex')

//遍历字典
map.forEach(function(value,key,self){
    
    
  console.log(key + ' ' + value)
})

//获取字典中可遍历键值对集合
var entries = map.entries()
//访问下一个键值对对象
var entry = entries.next()

//获取字典中可遍历key的集合
var keys = map.keys()

//获取字典中可遍历value的集合
var values = map.values()

//清除字典中的数据
map.clear()

数组操作

//数组遍历
var list = [1]
//方法1，常规for循环
for(let i = 0; i < list.length; i ++){
    
    
   console.log(list[i])
}

//方法2，forEach 
list.forEach(function(value,index,self){
    
    
   console.log(value)
})

//方法3，map操作
list.map(function(e){
    
    
   console.log(value)
})

//追加元素
list.push(2)

//追加数组
let list1 = [2,3]
list.concat(list1)

//删除元素，index是从哪个下标开始删除，后面那个是步长，表示删除几个元素
list.splice(index, 1)

//把数组所有元素放入一个字符串，元素通过指定的分隔符隔开
let str = list.join('-')

//删除并返回数组最后一个元素
let ele = list.pop()

//删除并返回数组第一个元素
let ele = list.shift()

//基于当前数组中的一个或多个项创建一个新数组。slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。这里又产生了两种情况：（1）在只有一个参数的情况下，slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。（2）如果有两个参数，该方法返回起始和结束位置之间的项，注意但不包括结束位置的项。同时还要注意的是，slice()方法不会影响到原始数组，因为它是基于当前数组中的一个或多个项创建的一个新数组。 

var colors=["red","green","blue","yellow","purple"]
var colors2=colors.slice(1)
var colors3=colors.slice(1,4)
 
console.log(colors2)  //green,blue,yellow,purple
console.log(colors3)  //green,blue,yellow
   
//按条件过滤，然后返回新数组
var a = [1, 2, 3, 4, 5, 6, 7, 8, 9]
var r = a.filter(function(e){
    
    
    return e < 5  //不要return条件默认就是过滤所有r会为[]
})
console.log(r) // [1,2,3,4]
//还可以用lambda表达式更简洁
var r = a.filter(e => e < 5)

//数组转string
var str = list.toString()

//在数组开头添加一个或者多个元素,返回新数组长度
var len = list.unshift(10,11)

Json操作

//对象转字符串
var jsonstr = JSON.stringify(obj)

//字符串转对象
var obj = JSON.parse(jsonstr)

字符串替换

//替换单个字符
let str = 'abcad'
let strtemp = str.replace('a','s')
//strtemp 结果：sbcad

//替换所有目标,去掉目标字符的单引号，前面加斜杠，然后后面加/g
let str = 'abcad'
let strtemp = str.replace(/a/g,'s')
//strtemp 结果：sbcsd

//比如去掉字符串中所有空格
let str = 'ab ca d'
let strtemp = str.replace(/ /g,'')
//strtemp 结果：abcad

获取屏幕的可用宽度和高度

//获取屏幕可用宽度
var screenW = wx.getSystemInfoSync().windowWidth

//获取屏幕可用高度
var screenH = wx.getSystemInfoSync().windowHeight

rpx转px

//将100rpx转成px
int px = 100 / 750 * wx.getSystemInfoSync().windowWidth

布局自动换行

//wxss中样式
.warp {
    
    
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

返回到上一个页面

//上个页面如果data中有需要设置的值，比如设置标志位刷新
var pages = getCurrentPages()
var currPage = pages[pages.length - 1];   //当前页面
var prevPage = pages[pages.length - 2];  //上一个页面
//通过设置上个页面的needreload标志位刷新数据
prevPage.setData({
    
    
   needreload: true
})
//执行返回到上一个页面
wx.navigateBack({
    
    
  delta: -1
})

定时器

//我们在页面进行网络交互完之后需要用toast提醒用户，然后回到上一个页面
//如果直接返回会导致toast显示时间很短，可以用
setTimeout(() => {
    
    
   wx.navigateBack({
    
    
       delta: -1
   })
}, 1000)//1秒之后再推出到上一个页面

//循环定时器
let setInter = setInterval(
   function () {
    
    
      console.log('setInterval==' ,'等待2s后再执行');
   }
, 2000)//每隔两秒执行一次

//取消循环定时器
clearInterval(setInter )

全局网络访问

我们都知道在微信小程序中用一下形式来访问网络：

wx.request({
    
    ...})

一般都是在用到网络访问的地方调用。有时候我们需要在接口访问时添加统一的参数，如果用上面这种方式就必须在每个调用wx.request的地方都添加一次，这样显然不合理，所以我们需要一个全局网络访问的入口，所有接口调用都会走这个入口，然后在入口处添加公共参数。

所以我们在app.js中添加如下函数(这里以在header中添加access-token为例)：

...
wxRequest(method, url, param, success, error) {
    
    
  return wx.request({
    
    
      url: url,
      method: method,
      data: param,
      header: {
    
    
        'content-type': method == 'GET'?'application/json':'application/x-www-form-urlencoded',
        'Accept': 'application/json',
        'access-token': 'access-token'//header中可以添加access-token公共参数
      },
      dataType: 'json',
      success: function (res) {
    
    
        success(res)
      },
      fail: function (err) {
    
    
        error(err)
      }
    })  
}
...

然后就是使用：

notworkjob: function() {
    
    
  var url = 'you request url'
  var data = {
    
    
    param1:'param1',
    param2:'param2',
      //more ...
    }
    //const app = getApp() //获取全局的app单例，可以放到js文件头部获取
    app.wxRequest('POST', url, data, (res) => {
    
    
       //do you logic
      }, (err) => {
    
    
      	//network error
        console.log(err)
      })        
}

当然你header中除了公共参数，你还可以添加特有的参数：

...
//这里将headers传进来
wxRequestWithHeader(method, url, param, headers,success, error) {
    
    
  var header = {
    
    
    'content-type': method == 'GET'?'application/json':'application/x-www-form-urlencoded',
     'Accept': 'application/json',
     'access-token': 'access-token'//header中可以添加access-token公共参数
   }
   //再headers中追加除公共参数外特有的参数
   if(!that.isempty(headers)){
    
    //判断非空，参考上面全局函数
      headers.forEach(function(v,i,s){
    
    
        for (var key in v) {
    
    
          header[key] = v[key]
        } 
      })
    }
    return wx.request({
    
    
      url: url,
      method: method,
      data: param,
      header: header,
      dataType: 'json',
      success: function (res) {
    
    
        success(res);
      },
      fail: function (err) {
    
    
        error(err);
      }
    })      
}
...

使用：

notworkjob: function() {
    
    
  var url = 'you request url'
  var data = {
    
    
    param1:'param1',
    param2:'param2',
      //more ...
   }
   var headers = []
   headers.push({
    
    'token': 'token'})//这里在header中添加一个token参数，其他接口中不一定有
   //const app = getApp() //获取全局的app单例，可以放到js文件头部获取
   app.wxRequest('POST', url, data, headers, (res) => {
    
    
       //do you logic
      }, (err) => {
    
    
      	//network error
        console.log(err)
      })         
}

判断对象是否有某个属性

//判断obj对象是否有name这个属性
obj.hasOwnProperty('name')

尾巴

目前总结的大概就这些，后面如果还发现了一些实用的技巧，会持续更新上去。如果你也有一些自己总结的一些实用技巧也欢迎留言给我，然后我更新上去分享给更多的人。
老规矩，喜欢我的文章，欢迎素质三连：点赞，评论，关注，谢谢大家！