乔木思-优快云博客

注：下面hooks尽量不要套用在if判断里面，因为react会初始计算hooks的个数，如果后期因为一些判断导致数量有变化，会报错。如果非要在if里面使用，请保持if和else个数的相等useStateuseState可以代替类组件的setState，可以使用多个useState函数let [count, setCount] = useState(0);// 下面两种写法都可以<div onClick={() => { setCount(count + 1) }> { count

2022-02-18 22:48:07 682

原创 ts的使用

ts的优缺点优点：增强代码的可读性和可维护性在编译时即可发现大部分的错误强类型缺点：短时间内会增加工作量环境搭建安装npm install -g typescript可在cmd输入tsc 来查看是否安装成功，安装成功则有反应可通过tsc +ts文件名将ts文件编译成js文件ts常见语法let num: number = 10; // 不能给其他类型的数据，因为已经定义变量未数字类型let str: string = 'hello world';let bool: bo

2022-01-17 22:17:50 1054

原创 react源码（17版本）之函数式组件和类组件初了解

先来看一些简单的代码import React from 'react';import ReactDOM from 'react-dom';import './index.css';const jsx = ( <div className="border"> <h1> react </h1> <a href="http://www.baidu.com"> 百度 </a> </div>)ReactDO

2021-11-09 22:18:46 1094

原创 mobx 初了解

前期准备安装依赖yarn add mobx mobx-reactmobx了解mobx主要作用*mobx 实现简单组件之间的数据交互(单向数据流)*mobx 把数据储存到组件中原理通过四件驱动（UI事件，网络请求。。。）触发actions，在actions中修改了state的值，state即应用中的store树（储存数据），然后根据新的state的数据计算出所需要的计算属性，最后相应到ui视图层创建类// 可观察状态（State）// @observable oberveba

2021-06-10 22:28:28 148

原创 uniapp的多端兼容与条件编译

结构方面  <view class=""> h5 </view> // 只会在h5中显示   <view class=""> 微信 </view> // 只会在小程序显示  表现方面 /* #ifdef H5 */

2020-12-11 16:54:49 720

原创 es6对字符串的方法的扩展

for ( let i of 'abcd' ) { console.log('i = ' + i) // a b c d}console.log('abcd'.charAt(0))console.log('吉'.charAt(0));// 判断一个字符串是否在另外一个字符串中var s = 'hello world';console.log(s.startsWith('hello'))console.log(s.endsWith('world'))console.lo

2020-07-27 11:21:04 146

原创微信小程序小总结

微信小程序的view不能直接使用本地图片作为背景真机的文件名和图片名字不能使用中文wx.createInnerAudioContext()改变进度，要先play然后才能seek，要不然没声音不要在scroll-view中使用textarea，否则会有bug，比如文字会跟着屏幕的移动而移动小程序隐藏滚动条，要隐藏滚动条的部分外面套上一个scroll-view，需要一个固定的高度，我给的是wx.getSystemInfo().windowHeight，然后css样式::-webkit-scrollb.

2020-07-14 17:49:00 2508

原创 react从入门到入坑

ReactReact学习内容React学习版本： 16.xReact老版本项目： 15.xreact官网说 17.x 会使用的一些技术React应用级脚手架CRAdvaumicreate-react-app 【 CRA 】React官网提供的脚手架脚手架：作用：快速构建一个项目全局安装create-react-app$ npm install -g create-react-app如果不想全局安装，可以直接使用npx$ npx create-

2020-06-24 17:04:13 814

原创 node操作数据库

我这个是官方自己的连接方式，npm上有一个mongose连接，这个有时间我再写const { MongoClient } = require('mongodb');const url = 'mongodb://localhost:27017';const dbName = 'test';const client = new MongoClient(url, { useUnifiedTopology: true });client.connect((err) => { if (

2020-06-19 10:17:21 120

原创 uniapp的上传图片和图片预览

<template> <view class=""> <button type="default" @click="upload"> 上传图片 </button> <image v-for="(item,index) in arr" :key="index" :src="item" @click="preventImg(item)"></image> </view></template><

2020-05-27 22:45:30 480

原创 vue复制文字

1. 安装插件 cnpm i vue-clipboard2 -S2. 引入（我是在main里面写的） import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard)3. 使用 this.$copyText( 你要复制的信息 ).then(function (data) { // 成功是调用 }, function (err) { .

2020-05-27 17:31:21 369

原创 uniapp对storage的处理

<template> <view class="content"> <button type="default" @click="setStorage"> 异步添加数据 </button> <button type="default" @click="getStorage"> 异步获取数据 </button> <button type="default" @click="removeStorage"> 异步删除

2020-05-26 23:27:44 7110

原创 uniapp处理下拉刷新与上拉加载

1.在pages.json里面想要下拉刷新的页面配置下拉刷新"pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app", "enablePullDownRefresh":true } } ]2.在页面中与生命周期同级写上onPullDownRefresh(){}函数3.通过点击事件触发startPullDownRefresh()函数..

2020-05-26 22:31:56 2681

原创 uniapp的生命周期

uniapp的生命周期分为应用生命周期和页面生命周期1.应用生命周期要写在app.vue里面 export default { onLaunch:function(){ // 应用初始化完成时调用，只调用1次 }， onShow:function(){ // 应用显示的时候调用 }, onHide:function(){ // 应用隐藏的时候调用，比如切换

2020-05-24 18:00:20 833

原创 uniapp的样式，sass使用，全局样式，字体的使用

1.rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准， 750rpx恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会等比放大。 2.使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束 3.支持基本常用的选择器class、 id、 element等 4.在uni-app中不能使用*选择器。 5.page 相当于| body 节点 6.定义在App.vue中的样式为全局样式，作用于每一一个页面。...

2020-05-24 17:21:24 5080

原创 uniapp的image的属性和方法

标签名 image (默认宽300px;height225px)属性：1. src （这个想必不用怎么介绍）2. mode- aspectFit (可以将图片的长边显示出来，即图片可以完整的显示)- aspectFill (可以讲短边显示完全，超出的长边将会被裁剪)...

2020-05-24 16:56:29 17818

原创 uniapp的button属性

type 样式primary 蓝色，淡蓝色，头条小程序是红色default 灰白色，和正常的button颜色类似size 大小default 宽度100%；mini 小尺寸plain（boolean类型）是否镂空，即没有背景色，只有文字和边框disabled （boolean）是否禁止点击loading (boolean) 是否在button上显示loading效果事件等后面再更新...

2020-05-24 16:45:22 8350 2

原创 uniapp中text和view的属性

text：类似行内元素 selectable: 文本是否可选中 space: 对空格的解析 1. ensp : 空格数按照中文的一半解析 2. emsp ：空格数按照一个中文解析 3. nbsp ：根据设定的样式解析空格 decode：是否可以解码，比如  （貌似已经没有作用了，设置不设置都可以解析了）view：相当于div hover-class：按下去的时候添加class hover-sto

2020-05-20 22:33:04 6225

原创 uniapp在开发时对非tabbar页面的操作与显示（仅在开发模式生效）

在实际的开发中，用uniapp编写小程序，因为tabbar的原因，pages第一个可能不会放我们要操作的页面，但是又需要操作。我们可以在pages.json中与pages同级配置如下信息 "condition":{ "current":0, "list":[ { "name":"详情页", "path":"pages/details/index", "query":"id=10" } ] }在微信者开发工具中可以在编译中找到...

2020-05-20 22:13:03 2077

原创 ts基本数据类型

// 布尔类型let bool1:boolean = false;let bool2:boolean;bool2 = false// 数值类型，支持二进制，八进制，十六进制的值let num:number = 1234;num = 0b1111011;num = 0o173;num = 0x7b;// 字符串类型let str:string;str = 'abcd';str = `数值是${num}`;console.log(str);// 数组类型let arr:num

2020-05-13 22:08:52 1212

原创搭配ts环境

学 ts 的一般都是有基础的，所以部分基础部分跳过首先全局安装ts : npm i typescript -g创建目录3. 配置package.json配置webpack.config.jsnpm run build 进行打包npm start 运行，模板文件是template里面的index.html入口文件是src/index.ts，在这里的代码都可以打包到dist下的main.js里面，打开...

2020-05-12 22:54:55 172

原创 vue 进入同一个路由参数不同数据不刷新

watch:{ '$route'(to,from){ 在这里可以获取路由的信息，可以做你想做的任何事情 } }

2020-05-11 18:09:42 394

原创 react-helmet 管理对文档头的所有更改

npm install --save react-helmetimport React, { Component } from 'react' import { Helmet } from 'react-helmet' export default class App extends Component { render() { retu...

2020-04-14 15:20:48 4045

原创 React安装(CRA)、概念、组件创建-嵌套-组合-样式-数据挂载的两种方式

一、create-react-app（CRA）1、安装create-react-app$ npm install -g create-react-app如果不想全局安装，可以使用npx安装npx create-react-app appName1、如果npm安装失败，可切换为npm淘宝镜像，2、或者使用yarnyarn config set registry https://regi...

2020-04-11 10:27:53 696

原创 mpvue之 swiper

<template> <div id="index"> <swiper @change="handleChange" // 原生的是bindchange，这里是mpvue语法 :indicator-dots="index !== 2" // 需要加： indicator-c...

2020-04-05 14:24:32 411

原创 vue 中封装axios

import axios from 'axios';import qs from 'qs';import { Message, Loading } from 'element-ui';import store from '@/store';let baseUrl = '';let loadingInstance = '';axios.defaults.baseURL = baseU...

2020-03-30 15:25:14 124

原创 nodejs 爬取表情包

说明仅限于技术交流，不要干坏事爬虫用的好，进去是迟早文章我只是简单写的，并没有做优化或者封装，如果有需要，自己再优化爬取表情包const axios = require('axios');const cheerio = require('cheerio');let fs = require('fs');const path = require('path');const r...

2020-03-30 14:48:44 247

原创 node 事件进阶

const events = require('events');const ee = new events.EventEmitter();const http = require('http');ee.on('good', function(msg) { // 名字随便起 console.log('i love coding'); console.log('msg...

2020-03-29 10:00:58 96

原创 node事件

const fs = require('fs');fs.readFile('1_fs.js', function(err, data) { if (err) return; diyEvent.emit('readSuccess', data);});let diyEvent = { event: { }, on: function(eventN...

2020-03-29 09:30:26 154

原创 nodejs 文件流

const fs = require('fs'); const read = fs.createReadStream('./1_fs.js'); const write = fs.createWriteStream('./1_fs_copy.js'); read.on('open', function() { console.log('读取文件...

2020-03-28 23:20:57 441 1

原创 nodejs -输入输出 input/output 初了解

const readline = require('readline');const r1 = readline.createInterface({ input: process.stdin, output: process.stdout});r1.question('今儿晚上吃什么', function(answer) { console.log('今儿晚上吃'...

2020-03-28 17:39:36 2612

原创 nodejs - buffer 初了解

let str = 'hello world'; // js不像java和py数组可以进行二进制操作，但可以使用buffer内存开辟出固定大小连续的内存 let buf = Buffer.from(str); console.log(buf); // <Buffer 68 65 6c 6c 6f 20 77 6f 72 6c 64> 虽然是16进制，其实是二进制...

2020-03-28 17:29:24 144

原创 art-template初了解

需要先安装art-template <script src="node_modules/art-template/lib/template-web.js"></script> <script type="text/template" id="at"> hello {{ name }} ...

2020-03-28 15:56:32 150

空空如也

空空如也