不积跬步无以至千里005

2020.11.18 工作笔记

1，vue-cookies插件 可以发送cookie给后台

2，vue单文件组件规范==》

根节点为 template这个 template下只能且必须有一个根view组件

3，新建uni-app项目

在view内输入u就可以使用uni-ui组件

4，uniapp检测不到手机

要把手机的开发者选项usb调试打开就可以

5，uniapp插件市场 cwx-keyboard 数字键盘组件安装使用

1,下载插件包，其实就是个vue文件
2，直接在项目里引入，注意路径，还有重点是这个组件是用less写的，如果uniapp没有安装	less编译插件，会报错打不开
	import cwxKeyboard from '@/components/cwx-keyboard/cwx-keyboard'
    
    export default {
        data() {
            return {
                num:'' 
            }
        },
        components:{
            cwxKeyboard,
        },
        methods: {
            confirmEvent(e){
                console.log("确认",e);
            }
        }
    }

3，在组件内使用 
<template>
    <view class="content">
        <view class="">
            输入：{{num}}
        </view>

        <cwx-keyboard @confirmEvent="confirmEvent" :money.sync="num" btn-color='orange' title="扫码"></cwx-keyboard>
    </view>
</template>

6，uniapp插件 仿微信充值金额输入组件(带键盘) fx-amountInput

这个效果更好更精美 还有键盘的收起弹出效果

import fxAmountInput from '@/components/fx-amountInput/fx-amountInput.vue';
export default {
    components: {
        fxAmountInput
    }
}

<fx-amountInput 
		:currency="currency" 
		:fontSize="fontSize" 
		:confirmText="confirmText" 
		:btnColor="btnColor" 
		:placeholder="placeholder" 
		:maxNumber="maxNumber" 
		:isBold="isBold" 
		:isFilter="isFilter" 
		@change="change" 
		@confirm="confirm">
</fx-amountInput>

7，给多行文本设置一行省略号出现

.header-name>p{
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

8，parseInt和parseFloat 前者将字符串转为数字不要小数点 后者留下小数点

• parseInt 将非空字符串转为整型数字,parseFloat 将非空字符串转为浮点型数字
• 尽可能多的去识别数字字符串，当遇到不是数字字符时 结束 然后返回数字
• parseInt转换带小数的字符串时 会将小数部分直接舍弃
• parseInt 有第二个参数，用来说明以什么进制来识别要转换的内容，最后输出10进制的值
• parseFloat 在转换时 有小数则保留小数

9，toFixed保留小数点后两位

10，disabled=true 禁用input 被禁用的 input 元素既不可用，也不可点击

11，input事件 vue中就不带on 比较常用的是input

1.onfocus  当input 获取到焦点时触发

2.onblur  当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件，用于判断标签为空。

3.onchange 当input失去焦点并且它的value值发生变化时触发，个人感觉可以用于注册时的确认密码。

4.onkeydown 按下按键时的事件触发，

5.onkeyup 当按键抬起的时候触发的事件，在该事件触发之前一定触发了onkeydown事件--相当于一个按键，两个事件，没怎么用过

6.onclick  主要是用于 input type=button，input作为一个按钮使用时的鼠标点击事件

7.onselect  当input里的内容文本被选中后执行，只要选择了就会触发，不是全部选中

8.oninput  当input的value值发生变化时就会触发，（与onchange的区别是不用等到失去焦点就可以触发了）

12，关闭横屏功能

manifest.json文件中 App Distribute对象中可以设置重力感应和横竖屏配置

可取值：

"portrait-primary"：竖屏正方向；

"portrait-secondary"：竖屏反方向；

"landscape-primary"：横屏正方向；

"landscape-secondary"：横屏反方向。

在app.vue文件
onLaunch: function() {
			console.log('App Launch')
			plus.screen.lockOrientation('portrait-primary');
		},
		
		
manifest.json文件
App Distribute{
	"orientation": [
			
            "portrait-primary",

            "portrait-secondary",

            "landscape-primary",

            "landscape-secondary"

        ]
}
						

13，sync修饰符

.sync是一个修饰符，是2.3.0+ 新增的，官网的解释：在有些情况下，我们可能需要对一个 prop 进行"双向绑定"。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。

简单来说.sync的意思是当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定，其实这个用法跟某个指令很相似，v-model？对，就是v-model在组件上使用的时候。

而什么时候使用.sync和v-model??
v-model比较有局限性，绑定的属性名只能叫value，而.sync可以任意取名，如果你希望只传value值的话，可以使用v-model，反之，使用.sync

14，input手机端禁止它弹出手机键盘，

相当于阻止默认事件，我的方法是给input加上readyonly，亲测无效 淦

15，用css样式模拟光标闪烁

如图 就是那个光标闪烁的效果 玛德这傻逼软件不充钱的白嫖用户logo水印比你妈的头还大，就这，我死都不会给你充钱的

又找了个小软件 效果很ok

页面结构

//绑定一个动态属性，其实我也可以就给他设置为固定的class，但是这样用变量来控制属性显得专业
<view class="payprice-value" :class="shinn == 1 ? 'cursor-blue' : ''" > 
            <span class="symbol" >￥</span>
            <span>{{pay}}</span>//pay就是个数字变量
</view>

js

data(){
	return{
		shinn:1///光标闪烁 直接设置光标闪烁变量为1 让它一开始就闪
	}
}

css 这段代码很专业，记下来要考的

/* 光标闪烁css动画 */
		.payprice-value {
			margin-right: 8rpx;
			padding-right: .267rpx;
			font-size: 88rpx;
			line-height: 1.1;
			color: #09BB07;
			font-weight: bolder;
			border-right: 2rpx solid #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.cursor-blue {
			border-right: .053rpx solid #09BB07;
			animation: blink 1s infinite step-start
		}
		
		@keyframes blink {
			0% {
				border-right: 4rpx solid #fff
			}
		
			50% {
				border-right: 4rpx solid #09BB07
			}
		
			to {
				border-right: 4rpx solid #fff
			}
		}

16,最后分享一款软件，可以录制屏幕为gif文件

https://pan.baidu.com/s/1kVvEg9h 网址进入 解压就能用 右边一排按键
rec是录制，再点一下是停止，save是保存 要是不会用就转行吧 码农不适合你