缘明随心-CSDN博客

原创 React-基础语法

React-基础语法React---搭建脚手架安装node.JS安装React脚手架创建项目运行项目其他命令使用VSCode----安装插件基础插件文档目录结构根组件App.js---解析组件解析类组件（有状态组件）函数组件JSX语法html布局相关css样式相关js行为相关JSX的嵌套---也是只能有一个根节点JSX数组相关数组的展开数组的映射组件函数组件---无状态组件定义组件使用组件类组件---有状态组件创建组件使用类组件组件的导入简写类组件状态---`state`设置state调用state设置st

2020-08-04 17:57:37 707 3

原创 uni-app---第三方登录

uni-app---第三方登录使用uniapp开发app，难免涉及到第三方账号登录使用`uni.log`inAPI实现第三方登录两个界面`my.vue` 页面`login.vue` 页面解释uni.loginuni.getUserInfouni.request使用uniapp开发app，难免涉及到第三方账号登录使用uni.loginAPI实现第三方登录参考官方文档两个界面login.vue 登录界面my.vue 我的界面，存放校验登录的函数my.vue 页面如果登录过，不跳转，直接

2020-08-03 21:04:01 2309 1

原创 uni-app-初识

uniApp-初识初识uni-appuni-app的目录结构组件条件编译配置页面---pages.json初识uni-app多端app的开发uni-app的目录结构components uni-app组件目录comp-a.vue 可复用的a组件hybrid 存放本地网页的目录platforms 存放各个平台专用的页面目录pages 业务页面文件存放的目录indexindex.vue index页面listlist.vue list页面stati

2020-07-29 18:33:16 273

原创小程序-支付流程

小程序-支付流程用户下单用户确认订单返回支付结果一般都是后端搞这个参考用户下单后端获取openid生成订单调用支付下单api返回一个预付订单prepay_id后端签名（加密）过程用户确认订单返回给小程序让用户确认返回支付结果展示支付结果微信后端会通知商户后台商户后台可以查询订单信息一般都是后端搞这个参考支付流程支付流程带代码...

2020-07-28 10:08:31 370 1

原创小程序-登录流程

小程序-登录流程小程序登录流程小程序端服务器流程小程序登录流程小程序端bindgetuserinfo 需要用户弹窗授权，拿到用户的：头像，用户<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>根据wx.login({}) 拿到一个code信息通过Ajax把用户信息，和code发送给服务器服务器appid + Appscecre + code发送给微

2020-07-27 17:47:12 313

原创小程序-自定义组件

小程序的自定义组件小程序组件的使用自定义组件组件的创建配置对应的组件使用对应的组件插槽的使用匿名插槽具名插槽以及多个调用的配置单个具名插槽多个具名插槽组件传参父传子子传父组件与调用组件页面的css关系外部类的定义组件的跳转组件的生命周期---`lifetimes``created`---组件被创建`attached`---组件实例进入页面节点树时执行`ready`---渲染完毕`move`---移动`detached`---移除`error`---错误组件的页面生命周期---`pageLifetimes``

2020-07-27 16:41:29 2763 57

原创小程序-npm安装，分包，等

插件，分包，等使用npm 安装插件初始化`npm init `安装对应的组件安装插件通过 npm 安装通过 yarn 安装安装 0.x 版本设置npm模块构建npm使用组件使用分包为什么需要使用分包？注意怎么分包分包配置分包局部更新使用npm 安装插件初始化npm init在对应小程序的app.json文件同目录下进行cmd命令，npm init 生成 package.json文件安装对应的组件安装插件通过 npm 安装npm i @vant/weapp -S --production

2020-07-27 09:29:59 538

原创小程序-续2

小程序---续（2）小程序2响应事件事件都是bind开头事件触发监听事件在js文件中定义事件响应函数事件传参双向绑定原理监听响应事件图片组件常用API设置标题设置本地储存数据获取本地存储数据消息提示网络请求停止下拉刷新网络请求wx.request 网络请求数据获取数据调用下拉刷新tabbar默认的tabbar在`app.json`文件中设置`tabBar`自定义tabBar在`app.json` 中设置 `"custom": true,` 启动自定义tabBar组件导航navigator 标签url 属性

2020-07-23 15:50:59 257

原创小程序---初识

小程序---初识微信小程序---初始文档解构说明熟悉界面详情设置限制---必须知道小程序---开始了解app.json文件配置基础语法base.wxml文件---小程序布局的文件base.wxss文件---小程序样式的文件base.js文件---小程序的逻辑文件小程序的简单js语法小程序的条件渲染小程序的for循环---列表渲染默认渲染---就不能循环嵌套了自定义列表渲染---自定义item,indextemplate 模板---局部模板定义template模板调用模板template 模板---全局模板（

2020-07-21 17:36:23 247

原创 webpack-搭建Vue

webpack-搭建Vuewebpack搭建vue安装安装babel设置规则.babelrc文件入口文件配置vue-loader插件入口文件main.js的内容使用-组件组件内容多文件打包入口---entry出口---output插件配置---pluginswebpack搭建vue安装vue vue必须vue-loader 处理.vue文件vue-style.loader 处理vue style样式vue-template-compiler 编译模板文件vue-hot-reload-api

2020-07-21 14:21:02 168

原创 webpack-搭建React

webpack搭建Reactwebpack搭建React安装webpack配置React再webpack配置文件中配置关于react的规则创建关于react的配置文件`.babelrc`创建React---小案例导入React以及React-Dom创建React的App组件调用JS压缩安装配置webpack文件的压缩插件出错时显示错误地址使用代码分割---splitChunks--简单了解动态加载可以写在事件中环境变量关于目录配置文件配置入口文件webpack搭建React安装babel-load

2020-07-20 20:01:32 126

原创 webpack-初识

初识webpackwebpack 概念安装初始化项目安装webpack简单的构建---使用命令的方式构建项目使用webpack打包简单构建项目---使用配置文件的方式创建src文件夹创建配置文件---webpack.config.js在package.json文件中定义，运行指令webpack配置webpack配置文件package.json 配置安装html处理插件配置本地服务器---(等待扩展)安装---webpack-dev-server配置本地服务器配置运行指令处理css---loader安装配置w

2020-07-16 18:09:54 114

原创 git的使用

git的使用初始化git添加到暂存盘提交版本git 回撤查看文件的状态git 显示历史信息git 下载远程git 添加远程仓库git 提交远程git 从远程更新git 创建分支git 创建标签git 合并分支git 切换分支初始化gitgit init添加到暂存盘git add 文件 or .提交版本git commit -m "备注"git 回撤git reset --hard 回撤版本git checkout -文件名让提交到暂存的文件回退查看文件的状态git

2020-07-13 14:28:07 157

原创 vue-获取当前时间并格式化

yyyy-mm-dd hh:mm:ssVue.prototype.getNowFormatDate = function getFormatDate() { var date = new Date(); var month = date.getMonth() + 1; var strDate = date.getDate(); if (month >= 1 && month <= 9) { month = "0" + month;

2020-07-11 13:31:53 6492

原创 vue-组件双向绑定--v-model的原理

vue-组件双向绑定--v-model的原理v-model指令v-model指令@input =“value = $event":value="value"父组件<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <h1>年龄：{{age}}</h1> <!-- 使用v-model绑定一个事件，发送一个数据 --&

2020-07-10 17:15:50 391

原创 vue-使用js创建组件--render函数

vue-cli--使用js创建组件--render函数template 怎么被写成一个页面的一般使用组件我们也可以使用JS创建一个组件template 怎么被写成一个页面的template 被 vue-template-compiler 插件编译成一个render函数render函数再被创建成一个VNode（虚拟dom）一般使用组件创建组件，一般的我们再components文件夹中创建一个需要的组件导入：import 组件的名字 from '地址’// 导入一个其他的组件import

2020-07-10 16:56:01 3551 2

原创 vue-$nextTick-等待页面渲染完毕的回调

vue-$nextTickvue-cli中$nextTick的作用案例--切换标签内容第一种解决方法--使用定时器第二种方法（重要）---$nextTickvue-cli中$nextTick的作用作用：等待页面渲染完毕回调场景：操作dom的时候，数据修改，页面还没渲染完毕，就去获取数据，会有延迟，获取的是之前的数据案例–切换标签内容当我们需要切换标签的内容时，可能会因为没有渲染完毕，直接调用赋值时，会复制到最初没有改变的数据 <div class="home"> &

2020-07-10 14:57:34 8071

原创 vue-混合-mixin

vue---混合-mixin混合-mixin创建使用混合-mixin抽出各个组件的相同的业务逻辑和数据创建创建一个mixin文件夹，在里面定义一些公用的mixin方法定义export default {mounted(){}}export default { data() {return { user : {name : "momo",age : 18} }}, mounted() { console.log("组件被挂载了"); }, methods : { s

2020-07-10 11:08:03 202

原创 vue-cli-中的组件加载模式

vue-cli中的组件加载模式动态组件案例---动态改变组件异步加载组件案例---点击加载异步的组件动态组件导入组件注册组件调用组件时通过component标签以及属性is来进行识别需要加载的组件是什么案例—动态改变组件 <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <component :is="current"></component> &lt

2020-07-09 18:07:41 222

原创 vue-缓存

vue---缓存vue---缓存再需要的页面中路由中添加在展示页面显示进行处理---keep-alivevue—缓存再需要的页面中路由中添加meta : { keep : true} { path: '/', name: 'Home', component: Home, meta : {keep : true} },在展示页面显示进行处理—keep-alive<keep-alive> <router-view class="page" v-

2020-07-09 15:07:42 127

原创 JavaScript-dom节点操作

dom节点操作js 操作dom节点什么是dom过程DOM数--所有的东西都是节点节点的类型---nodeType节点的查找节点的创建节点关系子节点关系父节点关系兄弟节点关系节点的操作增删改复制插入获取节点rectjs 操作dom节点什么是domDOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。过程HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是

2020-07-09 10:54:36 261

原创 vue---vux详解

vue---vux详解VUEX 全局状态管理器什么样的数据需要放在vuex中？参数---详解`state``geeters``mutations``actions``modules`使用modules----state的使用及调用modules----getters的使用及调用modules----mutations的使用及调用modules----actions的使用及调用问题----如何在vuex中调用vuex中的方法或事件使用映射解构的方法在组件中直接调用对应事件，数据名等VUEX 全局状态管理

2020-07-07 19:33:28 4767 34

原创移动端-移动端事件

移动端事件移动端事件事件类型特touch 对应的event 对象触摸位置ios 手劳事件(两指触发)安卓多指事件封装移动端事件事件类型touchstart :触换开始(于指放在触摸屏上)touchmove :拖动(手指在触摸屏上移动)touchend :触摸结柬(手指从触摸屏上移开)touchenter：移动的手指进入一个dom元素touchleave :移动的手指高开一个dom元素。touchcancel，是在拖动中断时候触发。特touch 对应的event 对象touches:

2020-07-07 09:15:47 423

原创前端优化----技术

前端优化为什么要前端优化----可能会更新技术---雅虎军规为什么要前端优化----可能会更新加快页面渲染速度，提升用户体验技术—雅虎军规减少HTTP请求合并css，合并js，使用精灵图技术，使用base64图片格式压缩压缩图像 (tinypng 网站可以压缩png格式的图片)压缩js,css,html开启gzip懒加载首先加载首屏内容，其他内容通过Ajax获取其他的图片先加载默认，通过修改src来实现懒加载图片js内容可以懒加载预加载pre

2020-07-06 10:30:26 193

原创前端项目角色-项目流程

项目角色PM：产品经理(Project Manager)，项目主管或项目经理RD：研发(Research and Development)CRD：客户端;移动端(client Research and Development)FE：前端(Front-End) ;前端开发(Front-End Development)QA：测试(QUALITY ASSURANCE，中文意思是"质量保证”)UE：用户体验(User Experience,简称UX或UE)OP：运维(Ope

2020-07-03 08:56:45 3071

原创问题总结---偏向vue

问题总结为什么要封装axiosjsopn的原理什么是跨域同源策略跨域方法vue-cli中路由守卫方法有哪些组件内部路由独享全局路由守卫参数说明this说明$router与 $route区别vue组件有哪些传参方式cookie sessionStorage localStorage 区别js文档注释有哪些格式什么是promise为什么要封装axios实现默认配置如：baseURL,timeout…实现请求拦截:header添加（token、user）加载提示数据进行格式化响应拦截：关闭

2020-07-01 19:01:12 498

原创专业名词

专业名词B/S 架构C/S 架构to B 对公司to C 对消费者B2C---Businiess To CustomerB2B---Businiess To BusiniessC2C---Customer To CustomerO2O---Online To OfflineP2P---Person To PersonB/S 架构B/S （Browser/Server）（浏览器/服务器）C/S 架构C/S （Client/Server）（用户/服务器）to B 对公司技术要求较高技

2020-07-01 18:59:06 622

原创 Ajax---详解

AjaxHTTPhttp请求方式中的8中请求方式请求报文响应http请求/响应的步骤客户端链接到web服务器发送http请求服务器接收请求返回HTTP响应释放链接TCP链接客户端浏览器解析HTML内容http响应状态码GET与POST请求区别HTTP主要特点无连接无状态简单快速灵活支持B/S 与C/S原生的---Ajax什么是AjaxAjax的优势Ajax的缺点同步异步Ajax的实现步骤Ajax---GET方法案例Ajax---POST方法案例Ajax的方法中的名词解释文件上传jQuery中的---Ajax

2020-07-01 18:56:38 4527 39

原创 vue-问题

vue-问题为什么要封装axiosjsopn的原理什么是跨域同源策略跨域方法vue-cli中路由守卫方法有哪些组件内部路由独享全局路由守卫参数说明this说明$router与 $route区别vue组件有哪些传参方式cookie sessionStorage localStorage 区别js文档注释有哪些格式什么是promise为什么要封装axios实现默认配置如：baseURL,timeout…实现请求拦截:header添加（token、user）加载提示数据进行格式化响应拦截：

2020-07-01 10:07:31 462

原创 JavaScript-Promise的使用及详细解释

JavaScript-Promise的使用及详细解释案例使用多种方法实现以下案例第一种---setTimeout嵌套第二种---封装函数Promise详解小案例第三种---使用Promise来实现最开始的案例Promise---具体使用的案例第一版---点击按钮显示图片第二版---加载出第一张之后在加载其他，依次加载第三版---图片中谁先加载完成，谁就先显示第四版---等待图片全部加载完毕，所有图片一起显示封装Jsonp案例使用多种方法实现以下案例案例目标“你好”----2秒后输出“你笑起来真好

2020-07-01 09:22:29 2121 33

原创封装-Jsonp

封装-JsonpJsonpjsonp是什么？为什么使用jsonp?原理---jsonp的通俗讲解案例---使用script的src获取跨域数据封装Jsonp案例---获取qq.com中的城市信息与天气信息Jsonpjsonp是什么？通过script标签中的src属性没有同源限制的方法进行获取数据即通过script标签来跨域获取数据，名为JSON with Padding，或者就叫JSONP。JSONP的原理很简单，但需要服务器端给予相应配合。大致来说，JSONP的实现思路就是在客户端编程时作

2020-07-01 09:14:23 607

原创 vue-路由守卫

vue-cli---路由守卫组件内的路由守卫---局部`beforRouterEnter() {}`----进入路由前执行的方法案例---拦截，不登陆不能进入购物车，自动跳转到登录界面案例---显示隐藏tabs全局路由守卫案例---实现权限登录组件内的路由守卫—局部beforRouterEnter() {} 进入路由前执行的方法beforRouterLeave() {} 离开路由前执行的方法beforeRouterUpdate() {} 路由更新前执行的方法，如： produce/abc =

2020-07-01 08:55:26 665

原创 Vue-Axios的封装---登录注册---axios（二）

Vue-cli---Axios的封装简单的的登录与注册第一种---逻辑数据未分离注册登录用户页面获取用户数据信息以及注销第二种---逻辑数据分离---token封装Axios调用封装完毕的Axios---并在添加所需要的方法然后进行使用登录zai首页获取并显示用户信息及注销token的使用简单的的登录与注册第一种—逻辑数据未分离注册使用注册原型的方式的axios方法进行注：有后台更好<template> <div class="register"> <h1

2020-06-29 21:01:14 4935 39

原创 vue-axios（一）

vue-axios认识及使用Axios 简介Axios 引入方式安装 axios导入 axios使用 axios 的三种方法---GET,POST,FILEAxios 中 GET方法Axios 中 POST请求的三种方式POST的第一种----urlencoded方法POST的第二种----json数据方法POST的第三种----qs序列化Axios 中的---file方法--文件上传案例---上传文件，显示进度条通过axios 构造方法获取数据---就是直接使用axios不适用注册原型的方法Axios 配

2020-06-28 18:56:08 2278 31

原创 vue-跨域问题

vue-跨域问题同源策略什么是浏览器的同源策略什么是跨域，实现跨域的方法有那些跨域跨域的方法jsonp ,CRS 浏览器响应头信息允许跨域(`Access-Control-Allow-Origin : * `) 允许任何域名访问 --后端设置本地服务器代理跨域---proxy什么是jsonp服务器跨域的实现原理vue-cli 的代理跨域代理跨域的原理代理跨域的实现方法同源策略什么是浏览器的同源策略当前浏览器发起Ajax的时候要求,当前页面,和请求地址同源当前页面 : http://localho

2020-06-28 18:52:44 383

原创设计-前端设计尺寸与规范

设计尺寸---ios,粗略设计尺寸英寸像素(Pixel---px)---物理分辨率分辨率网点密度(DPI)像素密度(PPI)逻辑分辨率(pt--point),像素倍率前端与设计所用的尺寸设计尺寸的问题-iPhone的pt与px的倍率关系设计的常用尺寸---移动端（ios)设计师规则是用来打破的，不用称为一个个的模板设计尺寸英寸屏幕对角线的长度，一英寸~~3.多厘米像素(Pixel—px)—物理分辨率物理分辨率是硬件支持像素是图像的基本采样单位，是组成位图的最小单元不是一个具体的量，而是一

2020-06-28 11:02:10 2668

原创 vue-导入导出及路由相关

vue---导入导出及路由相关vue 导入与导出vue中 js模块的导入与导出匿名导出与匿名导入具名导出与具名导入补充---导入时：`.js`, `.vue` 这些可以隐藏（不用写），`index`，这个名字也可以省略案例---使用`省略index.js`的方法来简写多层级导出补充`console.log()`与`console.dir()`的区别动态的异步导入---懒加载动态的异步导入---prefetch，提前加载（将其加载到缓存中，等到所有文件加载完毕时，或者触发时才加载）导入图片vue 路由路由--

2020-06-27 20:20:10 3529 33

空空如也

空空如也