分类 MiniProgram 下的文章

代码片段:

data:{
    waitTimes:0,//超时变量
    timeList:[],//定时器列表
},
myUpdate() {
    var maxWait = 10 //超时次数
    var newWait = this.data.waitTimes + 1 //执行的次数
    if (newWait >= maxWait) { //超时了
        console.log(util.formatTime(new Date()), '轮询超时')
    } else { //未超时
        var time = setTimeout(this.myUpdate, 2000)
        this.data.timeList.push(time) // 存储定时器
        console.log(util.formatTime(new Date()), '第', newWait, '次轮询中...')
        if (newWait === 6) { //拿到数据,轮询终止
            console.log(util.formatTime(new Date()), '拿到了所需数据!轮询停止')
            this.stopWaiting()
        } else { //继续轮询
            this.setData({
                waitTimes: newWait
            })
        }
    }
},
startWaiting() {
    setTimeout(this.myUpdate, 2000)
},
stopWaiting() {
    for (var i = 0; i < this.data.timeList.length; i++) {
        clearTimeout(this.data.timeList[i]); //清除了所有定时器
    }
}



/**
 * 生命周期函数--监听页面隐藏
 */
// 点击系统Home键返回上一步时候触发
onHide: function () {
  this.stopWaiting()
},

/**
 * 生命周期函数--监听页面卸载
 */
// 点击左上角返回箭头时候触发
onUnload: function () {
  this.stopWaiting()
},

转载:https://blog.csdn.net/qq_37398834/article/details/115675331
另一个参考:http://willless.com/settimeout-polling-in-applet-to-judge-data-jump-after-updating.html

onlaunch:当小程序初始化完成时,会触发 onLaunch(全局只触发一次)(app.js);
onLoad: 页面加载小程序注册完成后,加载页面,触发onLoad方法。一个页面只会调用一次,可以在 onLoad 中获取打开当前页面所调用的 query 参数(页面js)。
onShow: 页面显示页面载入后触发onShow方法,显示页面。每次打开页面都会调用一次(比如当小程序有后台进入到前台运行或重新进入页面时)。
onReady: 首次显示页面,页面初次渲染完成,会触发onReady方法,渲染页面元素和样式,一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
onHide: 页面隐藏当navigateTo、底部tab切换、上传文件选择图片时调用。
onUnload: 页面卸载当返回上一页wx.navigateBack、wx.relanch、wx.redirectTo时都会被调用(这里的坑有点深)。

基本上可以说执行顺序为onLaunch–>onLoad–>onShow–>onReady–>onHide.虽然说onLaunch在onLoad之前执行,但是在onLaunch里请求获取是否有权限,等待返回值的时候Page里的onLoad事件就已经执行了。

解决办法:

在APP里面onLanch中的网络请求中设置判断
if (this.userInfoReadyCallback) {
    this.userInfoReadyCallback(res)
}

在page的onLoad中设置一个回调
app.userInfoReadyCallback = res => {
    if (res != '') {
        console.log("app.globalData.userInfo")
    }
}

转截:https://www.cnblogs.com/kaicy/p/14894777.html

代码实现

  1. 微信开发者工具上可以通过「编译模式」下的「下次编译模拟更新」开关来调试
  2. 小程序开发版/体验版没有「版本」概念,所以无法在开发版/体验版上测试版本更新情况
// app.js
onLaunch: function() {
    this.checkForUpdate();
},
// 检查是否有新版本
checkForUpdate: function() {
    if (wx.canIUse('getUpdateManager')) { // 判断getUpdateManager在当前版本是否可用
        const updateManager = wx.getUpdateManager();
        updateManager.onCheckForUpdate(function(res) {
            // 请求完新版本信息的回调
            if (res.hasUpdate) { // 有新版本
                updateManager.onUpdateReady(function() {
                    wx.showModal({
                        title: '更新提示',
                        content: '新版本已经准备好,是否重启应用?',
                        success: function(res) {
                            if (res.confirm) {
                                // 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
                                updateManager.applyUpdate();
                            }
                        }
                    })
                })
                updateManager.onUpdateFailed(function() {
                    // 新版本下载失败
                    wx.showModal({
                        title: '已经有新版本了哟~',
                        content: '新版本已经上线,请您删除当前小程序,重新搜索打开哟~'
                    })
                })
            }
        })
    } else {
        wx.showModal({
            title: '提示',
            content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
        })
    }
},

本文转自:https://www.jinjin.link/2021/06/09/小程序强制更新全解析/

WXS

所有监听事件先在onload监听。
// pages/index/to_news/to_news.js  
var app = getApp();
var socketOpen = false;
var SocketTask = false;
var url = 'ws://192.168.0.120:7011';
Page({
  data: {
    inputValue: '',
    returnValue: '',
  },
  onLoad: function (options) {
  },
  onReady: function () {
    // 创建Socket
    SocketTask = wx.connectSocket({
      url: url,
      data: 'data',
      header: {
        'content-type': 'application/json'
      },
      method: 'post',
      success: function (res) {
        console.log('WebSocket连接创建', res)
      },
      fail: function (err) {
        wx.showToast({
          title: '网络异常!',
        })
        console.log(err)
      },
    })
    if (SocketTask) {
      SocketTask.onOpen(res => {
        console.log('监听 WebSocket 连接打开事件。', res)
      })
      SocketTask.onClose(onClose => {
        console.log('监听 WebSocket 连接关闭事件。', onClose)
      })
      SocketTask.onError(onError => {
        console.log('监听 WebSocket 错误。错误信息', onError)
      })
      SocketTask.onMessage(onMessage => {
        console.log('监听WebSocket接受到服务器的消息事件。服务器返回的消息', onMessage)
      })
    }
  },

  // 提交文字
  submitTo: function (e) {
    let that = this;
    that.data.allContentList.push({that.data.inputValue });
    that.setData({
      allContentList: that.data.allContentList
    })
    var data = {
      text: that.data.inputValue
    }
    if (socketOpen) {
      // 如果打开了socket就发送数据给服务器
      sendSocketMessage(data)
    }
  },
  bindKeyInput: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
  },

  onHide: function () {
      SocketTask.close(function (close) {
        console.log('关闭 WebSocket 连接。', close)
      })
  },
})

//通过 WebSocket 连接发送数据,需要先 wx.connectSocket,并在 wx.onSocketOpen 回调之后才能发送。
function sendSocketMessage(data) {
  console.log('通过 WebSocket 连接发送数据')
  if (socketOpen) {
    SocketTask.send({data: JSON.stringify(data)
    }, function (res) {
      console.log('已发送', res)
    })
  } else {
    socketMsgQueue.push(msg)
  }
} 

WXML

 <input type="text" bindinput="bindKeyInput" value='{
   {inputValue}}' placeholder="" />
  <button bindtap="submitTo" class='user_input_text'>发送</button>

app.js

在app.js下添加三个函数openSocket(), closeSocket(),sendMessage(),在app初始化的onLunch函数里面调用openSocket(),这样子用户一进入小程序就会自动连接websocket
App({
      globalData: {
        socketStatus: 'closed',
      },
    onLaunch: function() {   
        var that = this;
        if (that.globalData.socketStatus === 'closed') {
              that.openSocket();
        }
    }
    openSocket() {
       //打开时的动作
        wx.onSocketOpen(() => {
          console.log('WebSocket 已连接')
          this.globalData.socketStatus = 'connected';
          this.sendMessage();
        })
        //断开时的动作
        wx.onSocketClose(() => {
          console.log('WebSocket 已断开')
          this.globalData.socketStatus = 'closed'
        })
        //报错时的动作
        wx.onSocketError(error => {
          console.error('socket error:', error)
        })
        // 监听服务器推送的消息
        wx.onSocketMessage(message => {
          //把JSONStr转为JSON
          message = message.data.replace(" ", "");
          if (typeof message != 'object') {
            message = message.replace(/\ufeff/g, ""); //重点
            var jj = JSON.parse(message);
            message = jj;
          }
          console.log("【websocket监听到消息】内容如下:");
          console.log(message);
        })
        // 打开信道
        wx.connectSocket({
          url: "ws://" + "localhost" + ":8888",
        })
      },
        
    //关闭信道
      closeSocket() {
        if (this.globalData.socketStatus === 'connected') {
          wx.closeSocket({
            success: () => {
              this.globalData.socketStatus = 'closed'
            }
          })
        }
      },
        
     //发送消息函数
      sendMessage() {
        if (this.globalData.socketStatus === 'connected') {
        //自定义的发给后台识别的参数 ,我这里发送的是name
          wx.sendSocketMessage({
            data: "{\"name\":\"" + wx.getStorageSync('openid') + "\"}"  
          })
        }
      },
})



websocket API

wx.connectSocket:创建一个 WebSocket 连接 ;
sotk.onOpen:监听 WebSocket 连接打开事件 ;
sotk.onClose:监听 WebSocket 连接关闭事件 ;
sotk.onError:监听 WebSocket 错误事件 ;
sotk.onMessage:监听
WebSocket 接受到服务器的消息事件 ;(重要:负责监听接收数据)
sotk.send:通过
WebSocket 连接发送数据 。(重要:负责发送数据)
var sotk = null;
var socketOpen = false;
var wsbasePath = "ws://开发者服务器 wss 接口地址/";

//开始webSocket
  webSocketStart(e){
    sotk = wx.connectSocket({
      url: wsbasePath,
      success: res => {
        console.log('小程序连接成功:', res);
      },
      fail: err => {
        console.log('出现错误啦!!' + err);
        wx.showToast({
          title: '网络异常!',
        })
      }
    })

    this.webSokcketMethods();

  },

//监听指令
  webSokcketMethods(e){
    let that = this;
    sotk.onOpen(res => {
      socketOpen = true;
      console.log('监听 WebSocket 连接打开事件。', res);
    })
    sotk.onClose(onClose => {
      console.log('监听 WebSocket 连接关闭事件。', onClose)
      socketOpen = false;
    })
    sotk.onError(onError => {
      console.log('监听 WebSocket 错误。错误信息', onError)
      socketOpen = false
    })

    sotk.onMessage(onMessage => {
      var data = JSON.parse(onMessage.data);
      console.log('监听WebSocket接受到服务器的消息事件。服务器返回的消息',data);
     
    })
   
  },

//发送消息
  sendSocketMessage(msg) {
    let that = this;
    if (socketOpen){
      console.log('通过 WebSocket 连接发送数据', JSON.stringify(msg))
      sotk.send({
        data: JSON.stringify(msg)
      }, function (res) {
        console.log('已发送', res)
      })
    }
    
  },
 //关闭连接
  closeWebsocket(str){
    if (socketOpen) {
      sotk.close(
        {
          code: "1000",
          reason: str,
          success: function () {
            console.log("成功关闭websocket连接");
          }
        }
      )
    }
  },

实现逻辑

1、通过onMessage监听收到的信息,接收到的信息会返回一个type值,通过type值判断接收到的数据是什么数据,之后分别进行处理、赋值即可;
2、通过sendSocketMessage发送数据,根据后端定义的字段发送请求,字段中也包含type值,告诉websocket是处理什么类型的值。
webSokcketMethods(e) {
    this.websocket.onMessage(onMessage => {
      console.log(this.data)
      var data = JSON.parse(onMessage.data);
      console.log('监听WebSocket接受到服务器的消息事件。服务器返回的消息', data);
      if (data.client_id) {
        this.setData({
          client_id: data.client_id
        })
      }
      if (data.msg_type === 'init') {
        this.joinLive()
      }
      if (data.msg_type === 'join') {
        wx.hideLoading()
        this.endtrain(data.msg_content)
        this.setData({
          is_join: true,
          lookNumber: data.online_num
        })
        if (data.message_list) {
          this.setData({
            commentList: data.message_list,
            toLast: 'item' + data.message_list.length,
            lookNumber: data.online_num,
            followNumber: data.subscribe_num
          })
        }

      }
      if (data.msg_type == 'message') {
        var commentItem = {
          name: data.from_name,
          content: data.content
        }
        var commentArr = this.data.commentList
        console.log(commentArr)
        commentArr.push(commentItem)
        this.setData({
          commentList: commentArr,
          toLast: 'item' + commentArr.length,
        })

        if (this.data.platform === 'android') {
          this.messageScroll()
        }
      }
      if (data.msg_type == 'subscribe') {
        this.setData({
          followNumber: data.subscribe_num
        })
        this.endtrain(data.msg_content)

      }

      if (data.msg_type == 'leave') {
        this.endtrain(data.msg_content)
      }

      if (data.msg_type == 'buy') {
        this.endtrain(data.msg_content)
      }
    })
  },
   // 加入直播间
  joinLive() {
    var data = {
      msg_type: 'join',
      room_id: this.data.liveRoomId,
      live_id: this.data.liveId,
      from_uid: this.data.anchorUid,
      client_id: this.data.client_id,
      is_anchor: true,
      from_name: this.data.anchorName
    }
    console.log('通过 WebSocket 连接发送数据', JSON.stringify(data))
    this.websocket.send({
      data: JSON.stringify(data),
      success: function (res) {
        console.log(res)
      },
      fail: function (err) {
        console.log(err)
      }
    })
  },
  // 商品上架
  goodsShelfOn(goodsId, goodsName, goodsPrice, defaultImage, status) {
    var data = {
      msg_type: 'on_off_shelf',
      room_id: this.data.liveRoomId,
      live_id: this.data.liveId,
      from_uid: this.data.anchorUid,
      client_id: this.data.client_id,
      from_name: this.data.anchorName,
      goods_id: goodsId,
      goods_name: goodsName,
      goods_price: goodsPrice,
      default_image: defaultImage,
      status: 'on'
    }
    console.log('通过 WebSocket 连接发送数据', JSON.stringify(data))
    this.websocket.send({
      data: JSON.stringify(data),
      success: function (res) {
        console.log(res)
      },
      fail: function (err) {
        console.log(err)
      }
    })
  }

心跳检测、断线重连

在实际应用中,需要不断判断websocket处于连接阶段。
wechat-websocket.js文件
export default class websocket {
  constructor({ heartCheck, isReconnection }) {
    // 是否连接
    this._isLogin = false;
    // 当前网络状态
    this._netWork = true;
    // 是否人为退出
    this._isClosed = false;
    // 心跳检测频率
    this._timeout = 3000;
    this._timeoutObj = null;
    // 当前重连次数
    this._connectNum = 0;
    // 心跳检测和断线重连开关,true为启用,false为关闭
    this._heartCheck = heartCheck;
    this._isReconnection = isReconnection;
    this._onSocketOpened();
  }
  // 心跳重置
  _reset() {
    clearTimeout(this._timeoutObj);
    return this;
  }
  // 心跳开始
  _start() {
    let _this = this;
    this._timeoutObj = setInterval(() => {
      wx.sendSocketMessage({
        // 心跳发送的信息应由前后端商量后决定
        data: JSON.stringify({
          "msg_type": 'ping'
        }),
        success(res) {
          console.log(res)
          console.log("发送心跳成功");
        },
        fail(err) {
          console.log(err)
          // wx.showToast({
          //   title: "websocket已断开",
          //   icon: 'none'
          // })
          _this._reset()
        }
      });
    }, this._timeout);
  }
  // 监听websocket连接关闭
  onSocketClosed(options) {
    wx.onSocketClose(err => {
      console.log('当前websocket连接已关闭,错误信息为:' + JSON.stringify(err));
      // 停止心跳连接
      if (this._heartCheck) {
        this._reset();
      }
      // 关闭已登录开关
      this._isLogin = false;
      // 检测是否是用户自己退出小程序
      console.log(this._isClosed)
      if (!this._isClosed) {
        // 进行重连
        if (this._isReconnection) {
          this._reConnect(options)
        }
      }
      
    })
  }
  // 检测网络变化
  onNetworkChange(options) {
    wx.onNetworkStatusChange(res => {
      console.log('当前网络状态:' + res.isConnected);
      if (!this._netWork) {
        this._isLogin = false;
        // 进行重连
        if (this._isReconnection) {
          this._reConnect(options)
        }
      }
    })
  }
  _onSocketOpened() {
    wx.onSocketOpen(res => {
      console.log('websocket已打开');
      // 打开已登录开关
      this._isLogin = true;
      // 发送心跳
      if (this._heartCheck) {
        this._reset()._start();
      }
      // 发送登录信息
      wx.sendSocketMessage({
        // 这里是第一次建立连接所发送的信息,应由前后端商量后决定
        data: JSON.stringify({
          "key": 'value'
        })
      })
      // 打开网络开关
      this._netWork = true;
    })
  }
  // 接收服务器返回的消息
  onReceivedMsg(callBack) {
    wx.onSocketMessage(msg => {
      if (typeof callBack == "function") {
        callBack(msg)
      } else {
        console.log('参数的类型必须为函数')
      }
    })
  }
 
  // 建立websocket连接
  initWebSocket(options) {
    let _this = this;
    if (this._isLogin) {
      console.log("您已经登录了");
    } else {
      console.log('未登录')
      // 检查网络
      wx.getNetworkType({
        success(result) {
          if (result.networkType != 'none') {
            console.log(result.networkType)
            // 开始建立连接
            wx.connectSocket({
              url: options.url,
              success(res) {
                if (typeof options.success == "function") {
                  options.success(res)
                } else {
                  console.log('参数的类型必须为函数')
                }
              },
              fail(err) {
                if (typeof options.fail == "function") {
                  options.fail(err)
                } else {
                  console.log('参数的类型必须为函数')
                }
              }
            })
          } else {
            console.log('网络已断开');
            _this._netWork = false;
            // 网络断开后显示model
            wx.showModal({
              title: '网络错误',
              content: '请重新打开网络',
              showCancel: false,
              success: function (res) {
                if (res.confirm) {
                  console.log('用户点击确定')
                }
              }
            })
          }
        }
      })
    }
  }
  // 发送websocket消息
  sendWebSocketMsg(options) {
    wx.sendSocketMessage({
      data: options.data,
      success(res) {
        if (typeof options.success == "function") {
          options.success(res)
        } else {
          console.log('参数的类型必须为函数')
        }
      },
      fail(err) {
        if (typeof options.fail == "function") {
          options.fail(err)
        } else {
          console.log('参数的类型必须为函数')
        }
      }
    })
  }
  // 重连方法,会根据时间频率越来越慢
  _reConnect(options) {
    let timer, _this = this;
    if (this._connectNum < 20) {
      timer = setTimeout(() => {
        this.initWebSocket(options)
      }, 3000)
      this._connectNum += 1;
    } else if (this._connectNum < 50) {
      timer = setTimeout(() => {
        this.initWebSocket(options)
      }, 10000)
      this._connectNum += 1;
    } else {
      timer = setTimeout(() => {
        this.initWebSocket(options)
      }, 450000)
      this._connectNum += 1;
    }
  }
  // 关闭websocket连接
  closeWebSocket(){
    wx.closeSocket();
    this._isClosed = true;
  }
}

微信官方文档

微信小程序心跳

微信websocket基础用法

转自:https://hehuiyun.github.io/2021/01/22/微信小程序websocket的用法/

webSocketInit () {
    const vm = this
    let token = ''
    let socketUrl = 'wss://websocket.test'
    // 建立 WebSocket 连接
    vm.socket = wx.connectSocket({
      url: socketUrl,
      header: {
        'content-type': 'application/json',
        'authorization': 'Bearer' + token,
        'x-wxapp-sockettype': 'ordertips'
      },
      success (res) {
        console.log('WebSocket 连接成功: ', res)
      },
      fail (err) {
        console.log('WebSocket 连接失败: ', err)
      }
    })
    // onOpen
    vm.socket.onOpen((ret) => {
      console.log('打开 WebSocket 连接')
    })
    // onMessage
    vm.socket.onMessage((ret) => {
      if (ret.data == 'pong') {
        return;
      }
      let data = JSON.parse(ret.data)
      wx.showToast({
        title: data.message,
        icon: 'none',
        duration: 3000
      })
    })
    // onError
    vm.socket.onError((err) => {
      console.log('WebSocket 连接失败:', err)
    })
    // onClose
    vm.socket.onClose((ret) => {
      console.log('断开 WebSocket 连接', ret)
    })
  },
  // send message
  send (msg) {
    const vm  = this
    vm.socket.send({
      data: msg,
      success (res) {
        console.log('WebSocket 消息发送成功', res)
      },
      fail (err) {
        console.log('WebSocket 消息发送失败', err)
      }
    })
  },
  // 心跳,由客户端发起
  ping () {
    const vm = this
    let times = 0
    // 每 10 秒钟由客户端发送一次心跳
    this.interval = setInterval(function () {
      if (vm.socket.readyState == 1) {
        vm.send('ping')
      } else if (vm.socket.readyState == 3) {
        times += 1
        // 超时重连,最多尝试 10 次
        if (times >= 10) {
          wx.showToast({
            title: 'WebSocket 连接已断开~',
            icon: 'none',
            duration: 3000
          })
          clearInterval(vm.interval)
        }
        vm.reconnect()
      }
    }, 10000)
  },
  // WebSocket 断线重连
  reconnect () {
    const vm = this
    vm.webSocketInit()
  },

HTML

<van-uploader file-list="{{ fileList }}" bind:after-read="uploadImage" accept="image" max-count="6" bind:delete="onDelImage" />

JS

  uploadImage(event) {
    const { file } = event.detail;
    // 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
    wx.uploadFile({
      url: '后台真实upload地址', // 仅为示例,非真实的接口地址
      filePath: file.url,
      name: 'file',
      formData: { authorize: app.getToken() },
      success:(res) => { //这里要用箭头函数,否则报变量为定义的错
        // 上传完成需要更新 fileList
        const { fileList = [] } = this.data;
        const resData = JSON.parse(res.data);
        fileList.push({ ...file, url: resData.path });
        this.setData({ fileList });
      },
    });
  },

  //点击删除图片
  onDelImage(event) {
    let id = event.detail.index //能获取到对应的下标
    let fileList = this.data.fileList //这里是前端页面展示的数组
    fileList.splice(id, 1) //删除1张刚刚点击的那图
    this.setData({
      fileList: fileList, //在这里进行重新赋值  删除后 图片剩几张就相当于给后台传几张
    })
  },

var myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth(); //获取当前月份(0-11,0代表1月) // 所以获取当前月份是myDate.getMonth()+1;
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime=myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间

将字符串形式的日期转换成日期对象

这里实现把一个日期字符串如“2021-12-23 12:31:45”转换为Date对象:

方法一:

 var strArray=str.split(" "); 
 var strDate=strArray[0].split("-"); 
 var strTime=strArray[1].split(":"); 
 var a=new Date(strDate[0],(strDate[1]-parseInt(1)),strDate[2],strTime[0],strTime[1],strTime[2])

方法二 :(超简单)

 var s = "2005-12-15 09:41:30"; 
 var d = new Date(Date.parse(s.replace(/-/g, "/")));
 或
 new Date(s);
 //'-'在js中可能会应为某些浏览器不兼容而出现问题,微信小程序没什么影响

new Date() 参数问题

  • new Date() ; //参数可以为整数; 也可以为字符串; 但格式必须正确

  • new Date(2009,1,1);

  • new Date(“2009/1/1”);

  • new Date(“2009-1-1”);

  • new Date( year, month, date, hrs, min, sec) 按给定的参数创建一日期对象

当前系统区域设置格式(toLocaleDateString和toLocaleTimeString) (locale本地) 例子:(new Date()).toLocaleDateString() + ” ” + (new Date()).toLocaleTimeString() 结果: xxxx年x月xx日 上午xx:xx:xx 比起正常的参数多了一个上、下午

转自:https://juejin.cn/post/7088203284174880799