微信小程序3

1.回退上一页

wx.navigateBack({
    delta: 1
})

2.全局变量定义域

修改后，如果要访问其值不能在其他页面的 onLoad 函数内访问，否则为NULL

onShow（）可以，这涉及到 生命周期

3.导航栏的显示和隐藏

wx.showTabBar({
    animation: true
})
wx.hiddenTabBar({
})

4.集成mqtt

先加入mqtt.js或者mqtt.min.js

在app.js中加入以下代码：

import mqtt from "./utils/mqtt.min.js"
var client = null
connect() {
    //test
    var timestamp = Date.parse(new Date())
      timestamp = timestamp/1000
      console.log(timestamp)

    console.log("准备连接")
    const host = 'www.xxxxx.com'
    const mqttOptions = {
      protocolVersion: 4, //MQTT连接协议版本
      clientId: 'client-' + new Date().getTime(),   //只需确保每个客户端都不同就行
      clean: true,
      password: 'xxx',
      username: 'xxx',
      reconnectPeriod: 1000, // 1000毫秒，两次重新连接之间的间隔
      connectTimeout: 30 * 1000, // 1000毫秒，两次重新连接之间的间隔
      resubscribe: true // 如果连接断开并重新连接，则会再次自动订阅已订阅的主题（默认true）
    }
      client = mqtt.connect(`wxs://${host}/mqtt`, mqttOptions)
        client.on('connect',(e)=>
        {
          console.log('服务器连接成功')
         
        })
       
        
      },
      publish(action,pdata) {
        console.log('进来了');
        console.log('先订阅消息');
         //先订阅消息
         client.subscribe(`/device/out/${action}`,
         {
           qos:1, 
         },(err)=>{
           if(!err){
             console.log("Success Subscribe!")
           }else{
             console.log("Error Subscribe!")
           }
         }
         )
          const that = this
          let msg = JSON.stringify(pdata)

          client.publish(`/device/in/${action}`, msg,error=>{
            if (!error) {
              console.log('发布Success!')
              console.log(msg)   
        } else {
            console.log('发布失败')
            wx.showToast({
              title: '指令发送失败',
              icon: 'error',
              duration: 2000
            })
        }
        
        })
        //当客户端发送任何数据包时发出。这包括publish()以及MQTT用于管理订阅和连接的包 
        client.on("packetsend",(packet)=>{
          console.log("客户端已发出报文", packet); 
        });

        client.on("message", (topic,payload) => {        //收到消息，前提得订阅了Topic
          console.log("收到消息啦")
          const decoder = new TextDecoder('utf-8')
          const stringData = decoder.decode(payload)
          console.log(stringData)
          //是开机的响应
          if(stringData.includes("action\":\"12\""))
            return ;
            
            if(stringData.includes("action\":\"2\"")){
              //已经启动
              wx.showToast({
                title: '机器开机成功',
                icon: 'success',
                duration: 2000
              })
              getApp().globalData.openflag = 0
          }else if(stringData.includes("action\":\"99\"")){
              console.log("没有收到")
              getApp().globalData.openflag = 1
              
          }
          that.globalData.receiveflag = 1  //收到响应
          client.unsubscribe(`/device/out/${action}`, function(error)
         {
           if(!error){
            console.log("取消订阅")
           }
         })
        
         
        });
        
      },
      subscribe(){
         
      },

      disconnect() {
        client.end()
        console.log("已断开连接！")
      },

使用：

var timestamp = Date.parse(new Date())
      timestamp = timestamp/1000
      console.log(timestamp)
      const pdata = {
        "sn":"xxxxxxx",           //设备编号
        "action":1,              //指令代码
        "key":"abcdef",
        "random":"12345",
        "time":timestamp,
        "encrypt":"c260ffb3b62a7146ee901dfc40dfcd3d"              //加密内容
        }
      await app.publish("xxxxxxxxx",pdata)


​

5.普通页面 监测 全局变量变化

变化时触发回调函数

app.js中加入以下代码：

watch: function(key, method) {
		var obj = this.globalData;
		//加个前缀生成隐藏变量，防止死循环发生
		let ori = obj[key]; //obj[key]这个不能放在Object.defineProperty里
		if (ori) { //处理已经声明的变量，绑定处理
			method(ori);
		}
		Object.defineProperty(obj, key, {
			configurable: true,
			enumerable: true,
			set: function(value) {
				this['_' + key] = value;
				console.log('是否会被执行2')
				method(value);
			},
			get: function() {
				// 在其他界面调用key值的时候，这里就会执行。
				if (typeof this['_' + key] == 'undefined') {
					if (ori) {
						//这里读取数据的时候隐藏变量和 globalData设置不一样，所以要做同步处理
						this['_' + key] = ori;
						return ori;
					} else {
						return undefined;
					}
				} else {
					return this['_' + key];
				}
			}
		})
	},

在普通页面的 onLoad中加入

 app.watch('openflag',(v)=>{  //被监测的全局属性
        
    console.log("global Date 全局变量改变了+"+v)
        
    this.setData({ showLoading: false }); // 取消显示加载动画
   
  })

注意app.js中必须有对应的全局属性

6.同步执行代码

在wx小程序中，采用的是异步执行代码，不会等待某个请求完成后才执行判断代码

如果想要实现 请求完成后再执行代码 ，就需要使用同步

在需要执行的代码 前加上await，并且在 包含这个的代码前加上 async

decrement: async function() {
    const now = Date.now();
 
    this.setData({ showLoading: true }); // 显示加载动画


    await this.startClick();
    
}