快捷键

command+k格式化windows:ctr+k
option+/ 代码提示windows:alt+/
折叠windows:alt + -
展开windows:alt + =

项目结构

WechatIMG648.jpeg

生命周期执行顺序

1、Page页面生命周期函数执行顺序

beforeCreate => onLoad => onShow => created => beforeMount => onReady => mounted
=>刷新数据后=>beforeUpdate => updated

2、组件生命周期

beforeCreate => created =>beforeMount =>mounted=> beforeUpdate => updated =>beforeDestroy =>destroyed

L1VzZXJzL2xpdXNlbi9MaWJyYXJ5L0NvbnRhaW5lcnMvNVpTTDJDSlUyVC5jb20uZGluZ3RhbGsubWFjL0RhdGEvTGlicmFyeS9BcHBsaWNhdGlvbiBTdXBwb3J0L0RpbmdUYWxrTWFjLzIyMDQ4NzU0NzRfdjIvSW1hZ2VGaWxlcy8xNjg5ODM1MDg3MjI2X0IzMkI3N0FELTJERUItNDZBQy04RTBGLTBGRjQ4QjYxMzcwQi5wbmc=.png

传参中的值保存完整：encodeURIComponent和decodeURIComponent

传：
url: '/pages/AMapCalibrtion/AmapEditCamera?device=' + encodeURIComponent(JSON.stringify(
                        param))
接：
    var device =JSON.parse(decodeURIComponent(option.device));

深拷贝

1: JSON.parse(JSON.stringify());//任何对象都行

                   var ReList = this.ReferenceList; // [...this.ReferenceList];
                        for (let j in ReList) {
                            if (parseFloat(ReList[j].pointId) === e.detail.markerId) {
                                ReList[j].isfirst = '1';
                                var first = JSON.parse(JSON.stringify(ReList[j]));
                                ReList.splice(j, 1);
                                ReList.unshift(first);

                            } else {
                                ReList[j].isfirst = '2';
                            }
                        }
                        this.ReferenceList = ReList;

2:[...,...]//只能数组

    arr = [...this.markersList, ...this.userpointList, ...this.camerapointList];

跨页面传参全局传参

接收

uni.$on('getinfo',name=>{
this.tiename=name})

传递

uni.$emit('getinfo','小明')

Vuex 和storge管理登录状态

截屏2022-03-16 下午2.52.01.png

store下的index.js文件

import Vue from "vue'
import Vuex from "vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
            state: {
                userName: uni.getstoragesync('userName') ? uni.getstoragesync('
                    userName '):'
                    未登录用户 '
                },
                mutations: {
                    MLOGIN(state, userName) {
                        uni.setStorageSync('userName', userName)
                        state.userName = userName
                    }
                    MLOGOUT(state) {
                        uni.clearStorageSync()
                        state.userName = '退出状态用户'，
                    }
                },
                actions: {
                    login(context, userName) {
                        context.commit('MLOGIN', userName)
                    },
                    logout(context) {
                        context.commit ('MLOGOUT)
                    }
                }
            })
             export default store

使用

开发环境和跨端判断

if(process.env.NODE_ENV === 'development'){
    console.log('开发环境')
}else{
    console.log('生产环境')
}

编译期判断

// #ifdef H5
 alert("只有h5平台才有alert方法")
// #endif
// 如上代码只会编译到H5的发行包里，其他平台的包不会包含如上代码。

运行期判断

switch(uni.getSystemInfoSync().platform){
   case 'android':
      console.log('运行Android上')
      break;
   case 'ios':
      console.log('运行iOS上')
      break;
   default:
      console.log('运行在开发者工具上')
      break;
}

动态向组件中传值为空的解决方案

//script中

    data() {
            return {
                // 数据请求状态
                getRequestOK: false,
                // 动态详情
                feedInfo: {}
            }
        },
        async onLoad(params) {
            // #ifdef MP-WEIXIN
            // 微信条件下分享到朋友圈、群组
            wx.showShareMenu({
                withShareTicket: true,
                menus: ['shareAppMessage', 'shareTimeline']
            })
            // #endif
            // 获取动态详情
            let res = await this.$u.api.getFeedInfo(params)
            let images = res.data.images.map(one => {
                return this.BaseFileURL + one.file
            })
            this.feedInfo = {
                ...res.data,
                name: res.data.user.name,
                avatar: res.data.user.avatar ? res.data.user.avatar.url : '/static/nopic.png',
                images,
            }
            this.getRequestOK = true//这个时候才赋值所以组件创建的时候feedInfo为空
            // console.log(this.feedInfo)
        },

uniapp中布局style绑定js数据

333

444

css换行

    .clamp1 {
        width: 500rpx;
        // lines: 2; //行数
        // line-height: 40rpx;
        // font-size: 40rpx;
        text-align: left;
        //  不识别单词一行显示不下默认换行
        word-break: break-all;
        //  识别单词 不会造成单词断开换行
        word-wrap: break-word;
        //隐藏文字显示 ...不换行
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        //隐藏文字显示 ...换行
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2; //在第几行显示...
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

unibug之在nvue页面text不能用class必须用style才能自动换行

    
                            {{showPointDeatil.pointName}}
                        

//css
.clamp1textarea {
        width: 550rpx;
        // background-color: blue;
    }

vue修改对象的key

        // 复制原来的值
                        item['id'] = item['userId'];
                        //删除原来的key
                        this.$delete(item, 'userId');

uni-app总结

快捷键