快捷键

command+k格式化
option+/ 代码提示

项目结构

WechatIMG648.jpeg

跨页面传参全局传参

接收

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

使用

<template>
    <view>
        <text>通讯录</text>
        <view>{{userName}}</view>
        <view>
            <button type="default" @click="login('蜡笔小新')">登陆</button>
            <button type="default" @click="logout">退出</button>
        </view>
    </view>
</template>

<script>
    import {
        mapState,
        mapActions
    } from "vuex'
    export default {
        data() {
            return {}
        },
        computed: {
            ...mapState([' userName '])
        },
        methods: {
            ...mapActions(['login',
                    "logout'])
                }
            }
</script>

<style>
</style>

开发环境和跨端判断

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;
}

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

<template>
    <view v-if="getRequestOK">
        <comment :oneInfo="feedInfo" type="feed" />
    </view>
</template>

//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)
        },