【这一年收到的书籍，感谢赠予！】一块儿回顾 2020，展望 2021（JesksonUI-UniApp）

时间 2021-01-08

标签 css 前端 vue 程序员 vuex segmentfault 微信 app 函数学习栏目 CSS 繁體版

原文原文链接

把你的前端拿捏得死死的，天天学习得爽爽的，关注这个不同的程序员。
感谢不负每一份热爱前端的程序员，不论前端技能有多奇葩css

这一年收到的书籍，感谢赠予！前端

2020最后的那几天

2020年的最后那几天，深圳终于降温了，冷的一批，那寒风刺骨吹得让人头疼，但这一刻也让我意识到了这一年要结束了。没作完的事情要留到明年再作了，没有见到的人只能说明年再约了，没有完成的计划可能要从新安排了。vue

每年都说年年过得同样，可是其实每年都不太同样的，这一点咱们心知肚明。程序员

朋友说，科比出意外的那天，刚睡醒收到朋友发信息让我看微博，看完以后我整我的懵懵的，感受信仰一下就没了，特别特别难受。是的，我也感觉到了这一年的冷酷无情。vuex

见证历史：美国人开始囤枪，澳洲人开始囤纸；瑞幸财务造假22亿，王石捐赠清华53亿；美国奶农往下水道里倒牛奶，中国商人往全世界倒口罩。2020年已通过去，不管是甜蜜仍是苦难仍是患得患失都留到去年，充满信心和但愿迎接2021年。segmentfault

特别难的一年

澳洲大火熊熊燃烧几个月没法扑灭微信

NBA巨星科比·布莱恩特，app

在美国一块儿直升机失事事故中丧生，享年41岁。函数

没有表达出口的爱，没有作完的事，以及没有实现的梦想，在2020的最后画个句号吧。学习

聊聊产品-让产品更受欢迎

做为一名前端开发工程师，须要了解什么样的设计才能让用户满意，本身作的项目要了解其业务流程，用户和产品之间是一种持续的输入和输出的关系，咱们须要把本身的项目作到近乎本身所能达到的完美程度。

其实在工做中你不能敲完代码就一聊聊只了，不能以“用户又不笨，他们比你聪明多了”，这句话来让本身的工做就结束了，让本身问心无愧，要多去关注用户使用你的产品时，页面是如何提供导航，交互等方式，让使用者可以马上明白提供的服务和使用方式。

UI的设计是解决如何让应用页面信息与用户认知高度匹配，须要关注用户可否将所看到的东西和本身认知里的东西对应起来。本身作的项目不能给用户带来不便，给用户带来认知上的困惑和心理的压力。

咱们能够从认知和情感方面对你本身作的项目进行评估，或者设计。设计页面考虑：关注外观（本能层面）；关注使用的愉悦感和效用（行为层面）；关注自我形象，我的知足等（反思层面）。

合理的登陆页面设计：用户名（图标，输入框，消除输入内容），密码（图标，输入框，密码隐藏加密星）

如何给你的产品加分

如何给你作的产品加分，每一个公司有每一个公司须要强调的品牌，公司的颜色基调，公司的slog，让品牌与用户挂钩，让用户使用产品时，在用户内心造成一个品牌，能让用户可以很好的记住某个品牌，留下深入的印象。

除了一些大公司每一年投入大量的钱给本身的品牌名字和理念让用户留下深入印象外，咱们做为这个产品的开发者也是能够用本身的方法作到的，那就是在设计产品的UI时，可经过视觉向用户传递品牌的信息，从总体设计突出品牌，好比从文案，形状，色彩基调等。

咱们是能够从文案名称，一些缺省页面，刷新场景，页面中的图形时刻强调图新图标，好比有刷新效果，加载效果，进入页面时的过渡效果，弹框效果等等。有人说用红色做为底色的按钮时带来的用户转化率比用蓝色的转化率高，是的，有时候必要的状况下，须要这样使用。

口碑的造成，产品的口碑受到服务快慢的影响，跟UI设计是否美观和体验是否流畅不太挂钩，一款产品进入市场后，须要经历投入期，成长期，成熟期和衰退期，称之为产品的“生命周期”。一样的功能产品，有人喜欢使用这种，有人喜欢另外一种，咱们须要作到的是抓住用户的心理，有人喜欢整个页面干净舒服，也有人喜欢动感，质感的页面效果，用户长期使用某产品会造成该产品的推广者。

功能的引导，好比用户的等级，看到等级高的，图标不同，又很炫酷，会让你产生追求的渴望。引导用户行为的做用，原理是“目标趋近效应”，心理学现象是“当人们接近目标时，越有动力去完成目标”。

有目的的作设计

首先了解用户特征，以目标受众的使用能力为出发点，为用户下一步操做提供明确的引导。

有没有看到过这样的设计，“有损服务”，让系统去检测某用户的手机号或收件地址，是否被拉入黑名单，当该用户进入时，提示用户因为信誉太低而不能操做，提供“有损服务”的设计方案。

在作电商项目的时候，会在设计打折商品价格时，必定会增长一个被删除线划掉的“原价”，提升产品功能的同时简化操做过程，下降用户的使用门槛，支持更多的使用场景和知足更懂的需求，让用户更容易达成目标。

规划好导航

规划好导航主要做用在：告诉用户当前所处的位置，为用户提供其余功能的入口。

说完产品，下面为2020写一个模板文档吧。

JesksonUI-UniApp

花一点时间写一个简单的模板，下面简单写一下✍目录结构：

(模拟框，卡片，高颜值，组件模块，登陆，注册流程，数据统计，微信支付，支付宝支付，电商项目模板)

首先下载源码解压，复制根目录的 /colorui 文件夹到你的根目录，App.vue 引入关键Css main.css icon.css

<style>
    @import "colorui/main.css";
    @import "colorui/icon.css";
    @import "app.css"; /* 你的项目css */
    ....
</style>

这样导入就能够了。

关注登陆，注册流程

通常登陆页面效果如下几种：

其实为了用户方便，不多使用帐号加密码的形式使用登陆，通常用户都赖得填写密码，直接使用以手机号快捷登陆得方式进行直接登陆，格式：输入手机号，输入短信验证码（获取验证码）等形式进行登陆页面。

而JesksonUI-UniApp就是建议使用这种形式进行登陆流程。

justify-content: space-between;
align-items: center;

CSS justify-content 属性

div
{
    display: flex;
    justify-content: space-around;
}

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

CSS 语法

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

initial 设置该属性为它的默认值。

inherit 从父元素继承该属性。

CSS align-items 属性

div
{
    display: flex;
    align-items:center;
}

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

怎么解决input框中加入disabled="disabled"以后，改变字体的颜色

解决方案

.login button[disabled] {
    color: #fff;
}

用法解析：

import {mapMutations} from 'vuex';
...mapMutations(['login']),

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
const store = new Vuex.Store({
    state: {
        /**
         * 是否须要强制登陆
         */
        forcedLogin: false,
        hasLogin: false,
        userName: "",
        test: "",
    },
    mutations: {
        test(state, test) {
            state.test = test;
        },
        login(state, userName) {
            state.userName = userName || '新用户';
            state.hasLogin = true;
        },
        logout(state) {
            state.userName = "";
            state.hasLogin = false;
        }
    }
})
 
export default store

// main.vue

import {mapState} from 'vuex'
export default {
    computed: mapState(['forcedLogin','hasLogin','userName','test'])
}

// user.vue
import {mapState,mapMutations} from 'vuex'
export default {
    computed: {
        ...mapState(['hasLogin','forcedLogin'])
    },
    methods: {
        ...mapMutations(['logout','test']),
        bindLogin(){
            this.test('hell dadaqianduan.cn')
        }
    }
}

import { mapState } from 'vuex'
 
export default {
  computed: mapState({
    count: state => state.count,
 
    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',
 
    // 为了可以使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

computed: {
  localComputed () { /* ... */ },

  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({})
}

// 映射 this.count 为 store.state.count
computed: mapState(['count'])

// mapMutations和mapActions:

methods: {
    ...mapMutations(['test']),
    ...mapActions(['project']),
}

登陆页面展现：