uniapp 学习笔记（持续更新中~）

1. 页面传值

1.1 传值给下一个页面

页面跳转的时候在url后边进行拼接参数 如下例子：

detail(img, name, payment, freight) {
  uni.navigateTo({
    url: './detail?img='+ img + '&name='+ name + '&payment=' + payment + '&freight='+ freight
  });
}

1.2接收上个页面传递的值

onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
  console.log(option); //打印出上个页面传递的参数。
  // console.log(option.name); //打印出上个页面传递的参数。
  this.image.push(option.img),
  this.name = option.name,
  this.payment = option.payment
}

1.3 更多参考

https://ask.dcloud.net.cn/article/35970

2. 去掉页面顶部状态(pages.json中配置)

// "app-plus": {
   //  "titleNView": false
 // }
{
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页",
                "navigationStyle": "custom",
                "navigationBarTextStyle": "white"
            }
        }

1567667645(1).jpg

3 动态设置导航栏样式

uni.setNavigationBarTitle(OBJECT)

OBJECT参数说明:

image.png

例子:
uni.setNavigationBarTitle({
    title: '新的标题'
});

4. 发送socket

App（低版本）目前不支持 ArrayBuffer 类型的数据收发。可以使用 plus-websocket 插件替代。

plus-websocket 插件使用

### NPM
npm i plus-websocket --save
import socket from 'plus-websocket'
### 直接下载

// 以下路径需根据项目实际情况填写
import socket from '../../js/plus-websocket/index.js'

### 页面使用
可以参考uni.app文档
我用的时候是把前边的uni替换为了socket
示例：uni.connectSocket  替换为 socket.connectSocket

// socket连接
            var socketLoad = {
                cmdCode: '0201',
                identity: thas.$store.state.userInfo.LogNo,
                timeToken: new Date().getTime()
            }
            var socketLoadStr = JSON.stringify(socketLoad)
            console.log(socketLoadStr)
            // 将字符串转换为ArrayBuffer类型 否则上位机不识别--start
            var arrayBuffer = new ArrayBuffer(socketLoadStr.length + 4)
            console.log(arrayBuffer, 'arrayBuffer')
            var dataView = new DataView(arrayBuffer)
            console.log(dataView, 'dataView')
            dataView.setInt32(0, socketLoadStr.length, true)
            for (var i = 0; i < socketLoadStr.length; i++) {
                dataView.setUint8(i + 4, socketLoadStr.charCodeAt(i))
            }
            console.log(dataView.buffer, 'buffer')
            // 将字符串转换为ArrayBuffer类型 否则上位机不识别--end
            // 建立socket连接
            socket.connectSocket({
              url: 'ws://59.120.13.79:8080' // 模拟的地址
            });
            // 监听WebSocket连接打开事件。
            socket.onSocketOpen(function (res) {
                sendSocketMessage();
            });
            
            function sendSocketMessage() {
            // 发送消息给socket 必须再socket打开之后才可以调用
              socket.sendSocketMessage({
                data: dataView.buffer,
                success: (res)=> {
                    console.log(res)
                    console.log('登录发送成功')
                    console.log(dataView.buffer)
                },
                fail: (err) => {
                    console.log(err)
                }
              });
              // 服务器回复的内容
                socket.onSocketMessage(function(res){
                    console.log('收到服务器内容：', res.data);
                    var data = res.data
                     
                 // 转换为数组
                    var array = Array.prototype.slice.call(new Uint8Array(data))

                    // 定义一个字符串 循环数组 将Unicode 编码转为一个字符:
                    var str = ''
                    array.forEach(item => {
                        var res = String.fromCharCode(item)
                        str += res
                    })
                    // console.log(str, 61)
                    var obj = JSON.parse(str)
                    console.log(obj, 62)
                })
            }

5. 修改左上角的返回图标

6. 设置/删除tabbar右上角角标

// 设置
uni.setTabBarBadge({
  index:0, // tabbar位置，索引从0开始
  text: '1' // tabbar角标显示的数字 字符串
})

// 删除
uni.hideTabBarRedDot({
  index: 0 // tabbar位置，索引从0开始
})

学习更多

https://uniapp.dcloud.io/README