uniapp笔记-zhanghaoran's blog

在连续开发了一个月uniapp后，今天能想到的一些笔记，暂做记录，持续更新~

vue-cli创建项目

确保已安装vue-cli
```
npm install -g @vue/cli
```

创建项目

vue create -p dcloudio/uni-preset-vue my-project

运行

用命令行启动不能使用真机调试和发布
```
npm run dev:h5
```

未使用cli创建项目，在其他编辑器下有语法提示

npm i @types/uni-app -D

官方文档：https://uniapp.dcloud.io/quickstart-cli

设置标题栏右侧按钮菜单

在page.json中配置按钮菜单

{
    "path": "pages/clapList/info",
        "style": {
            "navigationBarTitleText": "详情123",
            "enablePullDownRefresh": false,
            "app-plus": {
                "titleNView": {
                "buttons": [{
                    "text": "编辑",
                    
                    // 显示内容为自定义图标
                    "fontSrc": "/static/iconfont/iconfont.ttf",
                    "text": "\ue626",
                    
                    "fontSize": "16",
                    "color": "#999",
                    "width": 70,
                    // 左右侧
                    "float": "right"
                }]
            }
        }
    }
},

在页面中获取点击事件

onNavigationBarButtonTap(e) {
    var currentWebview = this.$mp.page.$getAppWebview();
    // 获取菜单按钮对象（all）
    var tn = currentWebview.getStyle().titleNView;
    // 获取点击的是第几个按钮
    const index= e.index;
    console.log(tn, index); 
    // 获取点击的按钮内容
    var text = tn.buttons[index].text;
    console.log(text)
},

动态设置标题栏内容

onReady: function() {
    uni.setNavigationBarTitle({
        title: '自定义内容'
    })
    uni.setNavgationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#333333'
    })
}

自定义标题栏

在pages.json中配置

{
    "path": "pages/register/register",
    "style": {
        "navigationStyle": "custom"
    }
},

生命周期：

建议使用onReady代替mounted

建议使用onLoad代替created

获取底部tabbar事件

onTabItemTap(e) {
    // tab 点击时执行，此处直接接收单击事件
    console.log("点击了底部tabbar", e)
},

设置/移除底部tabbar角标

index: 第几个tabbar, text:角标内容（字符串）

// 设置角标
uni.setTabBarBadge({index: 1, text: "1"})
// 移除角标
uni.removeTabBarBadge({index: 0})

页面滚动到底部事件

在pages.json中配置距离底部多少距离触发（可选,默认50px）


{
    "path": "pages/register/register",
    "style": {
        "onReachBottomDistance": "100"
    }
},

在页面中添加触底事件

onReachBottom() {
    // do something...
}

获取某个/多个元素的位置信息（高，宽…）

let query = uni.createSelectorQuery()
query.select('#scrollview').boundingClientRect()
query.select('#msglistview').boundingClientRect()
query.exec((res) => {
    console.log(res)
    // res[0].height ==>> #scrollview的高度
    // res[1].height ==>> #msglistview的高度
})

使用vuex:

和vue项目一样

/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        name: null
    },
    mutations: {
        setName(state, name) {
            state.name = name
        },
    },
    actions: {
        setUnReadTips({commit}) {
            // write async code
        }
    }
})
export default store

main.js引入

import store from './store'

const app = new Vue({
    ...App,
    //挂载
    store
})
app.$mount()

使用

this.$store.commit('setName', this.name)
this.$store.dispatch('setUnReadTips')

axios封装：

import store from '../store'

let loadingNum = 0
export const BaseUrl = 'http://192.168.0.155:8090'

export const http = ({url, method, data}) => {
    loadingNum++
    let header = {}
    header = {
        'authorization-token': uni.getStorageSync('token'),
    }
    if (method){
        method = method.toUpperCase()
    } else {
        method = 'GET'
    }

    return new Promise((resolve, reject) => {
        uni.request({
            url: BaseUrl + url,
            data: data,
            method: method,
            header,
            success: (result) => {
                loadingNum--
                !loadingNum && uni.hideLoading()
                console.log(result)
                if (result.data.code === 200) {
                    resolve(result.data.data)
                } else {
                    if (result.data.code == 401) {
                        uni.showToast({title: result.data.msg,icon: 'none',duration: 1000,})
                        store.dispatch('logout')
                        setTimeout(function () {
                            uni.reLaunch({url:'/pages/login/login'})
                        }, 1000)

                    }
                    uni.showToast({
                        title: result.data.msg,
                        icon: 'none',
                        duration: 2000,
                    })
                }
            },
            complete: () => {},
            fail: (err) => {
                uni.hideLoading()
                uni.showToast({
                    title: err.errMsg,
                    icon: 'none',
                    duration: 2000,
                })
                reject(err)
            },
        })
    })
}

使用：

import {http} from "./request";

export function get() {
    return http({
        url: '/demoUrl'
    })
}

export function post(data) {
    return http({
        url: '/demourl',
        method: 'post',
        data: data
    })
}

使用websocket

// 初始化连接
initWebSocket() {
    let token = uni.getStorageSync('token')
    let url = "url"
    this.socketTask = uni.connectSocket({
        url: url,
        success(data) {
            console.log(data)
            console.log("websocket连接成功");
        },
    });
},
// 3s 一重连， 重连3次
reConnect() {
    this.reTime && clearTimeout(this.reTime)
    if (this.reCount < 3) {
        this.reTime = setTimeout(() => {
            this.reCount += 1
            this.initWebSocket()
        }, 3 * 1000)
    }
},
// 心跳监测
heartbeatMonitoring() {
    setTimeout(() => {
        uni.sendSocketMessage({
            data: '心跳监测',
            success: res => {
                this.heartbeatMonitoring()
            },
            fail: err => {
                this.reConnect()
            }
        });
    }, 10 * 1000)
}

onLoad() {
    this.initWebSocket()
    // 连接成功事件
    this.socketTask.onOpen((res) => {
      this.reCount = 0
      console.log("WebSocket连接正常打开中...！");
      this.is_open_socket = true;
      this.heartbeatMonitoring()
      // 注：只有连接正常打开中 ，才能正常成功发送消息
      this.socketTask.send({
          data: "uni-app发送一条消息",
          success() {
          console.log("消息发送成功");
          },
      });
      // 注：只有连接正常打开中 ，才能正常收到消息
      this.socketTask.onMessage((res) => {
        let data = JSON.parse(res.data)
        console.log(data.msgCode)
      });
    });
    // 捕获失败事件
    this.socketTask.onError((res => {
      uni.closeSocket()
      this.is_open_socket = false
      this.reConnect()
    }))
  }

最后

待更新，有新的uniapp知识点及踩坑及时来更新~

多看官方文档！