uni问题总结

x_neee

已于 2024-03-07 10:19:26 修改

阅读量27

点赞数

文章标签：前端

于 2023-11-08 11:12:43 首次发布

本文链接：https://blog.csdn.net/x_neee/article/details/134284713

版权

1.h5浏览器ios浏览器遮挡问题

总高度-安全高度

height: calc(100% - env(SAFE-AREA-INSET-TOP, 0rem));

2.上拉加载事件，和onLoad同级

onReachBottom

3.image标签给定宽高，改变窗口大小，图片被挤压

//包一层view就好了
<view>
<image></image>
</view>

4.处理数字精确度

npm install --save decimal.js

import Decimal from "decimal.js";

 // 加
add(v1,v2) {
          return new Decimal(v1).add(new Decimal(v2)).toNumber();
 },

//减
  subtract(v1,v2) {
         return new Decimal(v1).sub(new Decimal(v2)).toNumber();
  },

//乘
  multiply(v1,v2) {
         return new Decimal(v1).mul(new Decimal(v2)).toNumber();
         
  },

//除
  divide(v1,v2) {
         return new Decimal(v1).div(new Decimal(v2)).toNumber();
       
  },

5.手机键盘弹起布局混乱

mounted() {
  this.$nextTick(() => {
    const realHeight = window.innerWidth > window.innerHeight ? window.innerWidth :                 
    window.innerHeight
    this.setMetaHeight(realHeight)
  })
},

methods: {
  // 设置meta高度 解决安卓浏览器软键盘弹起，占用窗口的面积问题
  setMetaHeight(height) {
    document.head.querySelector("meta[name='viewport']").setAttribute('id', 'viewportMeta')
    const metaEl = document.querySelector('#viewportMeta')
    const content = 'height=' + height + ',width=device-width,initial-scale=1.0,user- 
    scalable=no'
    metaEl.setAttribute('name', 'viewport')
    metaEl.setAttribute('content', content)
    this.$forceUpdate()
  },
}

6.uni.navigateBack返回上一页，刷新页面之后页面栈会消失无法返回用 history.back();

7.uni的websocket

 //函数
// 发送websockwt请求
initWebSocket() {
				// let websocketUrl = this.$api.request.apiBaseWs + 'takeOrder'

        if (this.connected || this.connecting) {
          console.log('正在连接或者已经连接，请勿重复连接')
          return
        }
        this.connecting = true
        console.log('连接中...')
        uni.connectSocket({
          url: this.$api.request.apiBaseWs + 'takeOrder',
          success: (res) => {
            // 这里是接口调用成功的回调，不是连接成功的回调，请注意
            console.log('uni.connectSocket success', res)
          },
          fail: (err) => {
            // 这里是接口调用失败的回调，不是连接失败的回调，请注意
            console.log('uni.connectSocket fail', err)
          },
        })
        uni.onSocketOpen((res) => {
          this.connecting = false
          this.connected = true
          uni.hideLoading()
          console.log('连接成功')
          // console.log('onOpen', res)
        })
        let params = {
          "method": "ADVISOR_ORDER",
          "token": uni.getStorageSync('userToken')
        }
        //需要心跳发送信息
         this.webSocketOnOpen()
        this.websocketTimer = setInterval(()=>{
          this.webSocketOnOpen()
        },3000)
        uni.onSocketError((err) => {
          this.connecting = false
          this.connected = false
          uni.hideLoading()
          console.log('连接失败，可能是websocket服务不可用，请稍后再试')
          console.log('onError', err)
        })
        uni.onSocketMessage((res) => {
          let data = JSON.parse(res.data)
          console.log('拿到消息',data)

          if(data.length===0 || data[0] ){
            this.list = data
            this.hallsNumber = this.list.length
            this.tabList[0].name = '接单大厅' + this.list.length
          }


        })
        uni.onSocketClose((res) => {
          this.connected = false
          console.log('onClose', res)
        })
},
webSocketOnOpen() {
        let params = {
          "method": "ADVISOR_ORDER",
          "token": uni.getStorageSync('userToken')
        }
        uni.sendSocketMessage({
          data:JSON.stringify(params),
          success: (res) => {
            console.log(res,'发送消息成功成功')
          },
          fail: (err) => {
            console.log(err)
          },
        })
			},
webSocketClose(e) {
        uni.closeSocket({
          code: 1000,
          reason: 'close reason from client',
          success: (res) => {
            console.log('uni.closeSocket success', res)
          },
          fail: (err) => {
            console.log('uni.closeSocket fail', err)
          },
        })
        clearInterval(this.websocketTimer)
        this.connected=false
        this.connecting=false
        this.websocketTimer = null
 },

//data
   websocketTimer:null,//心跳倒计时
   connected:false,//是否在连接
   connecting:false, //正在连接

	//记得销毁的时候清除
    destroyed() {
			// <!-- 离开页面时销毁socket服务 -->
			this.webSocketClose()
			

    },

8.隐藏原始导航栏中的返回按钮

onLoad(options) {
// #ifdef APP-PLUS
      //隐藏原始导航栏中的返回按钮
      let webView = this.$scope.$getAppWebview();
      webView.setStyle({
        titleNView: {
          autoBackButton: false
        }
      })
// #endif
}