- 博客(42)
- 收藏
- 关注
RSS订阅原创 底部购物车(美团外卖效果)
1、实现列表数据和底部购物车数据共享: (1)vuex的state添加一个属性,用来存储购物车列表的数据,购物车列表的每一项都是商品对象 (2)当点击增加按钮时,往当前商品对象中添加count数据: 利用vuex,当点击增加/减少按钮时,将当前物品对象中添加一个count属性, 因为是对象的引用关系,如果vuex之前的state状态中已经存在商品列表的数据,无需再添加额外的state状态, 当前对象改变属性(利用Vue.set,将对象的新属性交给vue来动态绑定数据),商品列
2020-05-30 22:33:39
1864
原创 上下展开元素(未知元素高度的情况)
.wave-enter,.wave-leave-to{ //刚进去和离开最后一刻,消失 transform:translateY(100%) //消失即向下位移自身高度 } .x-enter-to,.x-leave{ //进入的最后一刻和刚离开,高度最高 transform:translateY(0) //即元素原本高度 } .wave-enter-active,.wave-leave-active{ transition: tran...
2020-05-30 20:27:35
285
原创 vuex 改变vuex管理的数据
当使用v-for遍历、props接收、{es6方式对象解构} vuex管理的数据时,即使是其内部的数据,只要改变,就会使得vuex管理的该数据改变
2020-05-30 15:40:23
355
原创 vue 将属性变成响应式方案
在已经数据绑定的数据,添加新的属性后,该属性不会被数据绑定,即改变该数据,不会触发vue的渲染机制如给一个已经存在的对象添加新属性后,新属性更新不会引起界面更新解决方法: Vue.set(对象名,'属性',属性的值); 设置一次后,该属性就会被vue数据绑定代码示例: if(food.count) { food.count++; }else{ Vue.set(food,'count',1); //让对象新增的数据能够被vue数据绑定,动态
2020-05-30 15:37:22
1935
原创 列表滑动对应分类列表也变化(如微信联系人、商家餐品列表)
思路:要想左侧分类对应的标题样式和右侧内容滑动到标题对应内容时选中这里采用better-scroll来实现滚动在数据更新后,界面更新时($nextTick) 1、通过ref获取右侧每个列表块的高度(每个li) 2、实时获取当前滚动条的y坐标 3、利用计算属性(数据变化就会执行)返回当前y坐标应该对应的index 如li高度为100，200，300，当y为220时,应返回坐标1 4、将index和左侧列表的index对比选中样式代码示例:<template> //左侧分
2020-05-29 23:14:04
465
原创 登录(实时验证手机格式、验证码)
思路:动态验证手机号格式: 利用计算属性会根据内容的变化而调用的特点,将表单绑定v-model，在 计算属性中,利用正则不断检验手机格式,正确返回true 验证码: 当手机号格式正确时,点击才有效,利用时间制造三元运算符改变验证码的文本内容,且倒计时期间,再次点击无效代码示例:<template> <div class='login'> <p @click='$router.back()'><</p> <di
2020-05-26 22:16:19
1560
原创 vuex 应用模板
actions.js中的请求数据方法,越早调用越好,比如在App.vue中的生命周期函数中调用1、安装cnpm install vuex --save2、src下创建store文件夹，在store文件夹下创建index.js3、将主入口index.js文件挂载到vue实例,在main.js中import store from './store'new Vue({ el: '#app', router, store, components: { App }, templat
2020-05-26 17:53:39
504
原创 根据评分显示星星个数(全星、半星、空星)
思路:将评分转换成数组,根据数组1，0.5，0来判断显示什么内容 let arr=[]; let m=Math.floor(this.score); //整数部分 let n=this.score-m; //小数部分 方式一: for(let i=0;i<m;i++) //全星 { arr.push(1); } if(n>=0.5) //最多出现一个半星 { arr.pus...
2020-05-26 17:30:18
1292
原创 vue watch+$nextTick界面更新渲染数据
$nextTick,在数据修改后,界面更新时立即调用回调的内容watch,监测数据改变,数据改变后此时数据更新,但界面未更新wathc+$nextTick,实现数据更新后,界面更新时重新渲染数据watch:{ xx(value){ this.$nextTick(()=>{ 进行诸如拿到数据再创建实例等操作 }) }}...
2020-05-26 15:37:08
2936
原创 koa 脚手架
1、安装 cnpm install koa-generator -g 2、创建项目 koa xx 3、安装依赖 cnpm install 4、启动项目,启动无提示,3000端口打开 npm start
2020-05-23 16:38:50
288
原创 koa session
1、安装 cnpm install koa-session --save 2、引入 const session=require('koa-session');3、配置session app.keys = ['some secret hurr'];const CONFIG = { key: 'koa.sess', maxAge: 86400000, autoCommit: true, /** (boolean) automatically commit head
2020-05-22 11:24:27
969
原创 koa cookie
1、设置cookie ctx.cookies.set('键名',键值,{ maxAge:5000, 过期时间戳毫秒 path:'/news' 配置可以访问cookie的路径,非必须,默认为全部页面 }) 2、获取cookie ctx.cookies.get('键名')3、解决中文乱码 存储时将中文转换成base64存储 读取时将base64转换成中文 代码示例:const Koa=require('koa');const Router
2020-05-22 10:52:05
278
原创 koa art-template模板引擎
优势:速度极快,能接近js的极限速度1、安装 npm install --save art-template npm install --save koa-art-template 2、引入 const render = require('koa-art-template'); const path=require('path');3、配置模板引擎 render(app, { root: path.join(__dirname, 'views'), //配置模板引擎路径
2020-05-22 10:14:53
284
原创 koa static静态资源
1、安装cnpm install koa-static --save2、引入const static=require(‘koa-static’);3、配置中间件可配置多个静态资源app.use(static(‘static’)); 即外部文件可直接写static下的路径引入4、使用引入static下的路径,而非绝对路径代码示例:server.js:const Koa=require('koa');const Router=require('koa-router');const vi
2020-05-22 09:18:40
403
原创 koa 获取post数据
方式一:1、安装 cnpm install koa-bodyparser --save 2、引入 const bodyParser=require('koa-bodyparser'); 3、使用中间件 app.use(bodyParser()); 4、获取post数据 ctx.request.body.键名方式二:原生封装异步方法: exports.Posts=function(ctx) { return new Promise((resolve,reject)=
2020-05-22 08:53:04
2276
4
原创 koa ejs模板引擎
1、安装 cnpm install koa-views --save cnpm install ejs --save2、配置模板引擎 需要在路由启动之前设置 方式一: 文件后缀必须为.ejs app.use(views('html文件所在文件夹路径',{extension:"ejs" })); 方式二: 文件后缀为.html app.use(views('views',{map:{html:'ejs'}})); 3、渲染 await ctx.render
2020-05-21 18:27:49
219
原创 koa 中间件
Koa中的中间件无论写在什么地方都会优先去匹配await next()/next() 会执行下一个路由,再返回来执行后续代码应用中间件: app.use(async (ctx,next)=>{ ... await next() ... })路由中间件:相同路由会先匹配第一个,第一个若无返回值会报404的错误 router.get('/x',async(ctx,next)=>{ ... await next(); }) router.get
2020-05-21 16:40:09
131
原创 koa 路由以及动态路由
1、引入Koa类和路由类 const Koa=require('koa'); const Router=require('koa-router'); 2、实例化两个类 const app=new Koa(); const router=new Router(); 3、启动路由及其方法 app.use(router.routes()) . use(router.allowedMethods());4、创建get路由 方式一:链式创建多个路由 router.get('/x',
2020-05-21 15:43:05
694
原创 验证token
1、获取服务器返回的token2、将token缓存在本地 wx.setStorageSync('token',token); 3、发送请求时携带token 通过本地缓存获取token 携带token方式 (1)cookie(不推荐) (2)作为参数在url中 (3)发送网络请求时放在请求头 header:{ authorization:token } 4、服务器从本地获取token并验证token身份 let t
2020-05-20 17:13:35
609
原创 将appid和sessionKey加密生成token返回
1、利用jsonwebtoken加密代码示例:router.get('/getOpenId',async (ctx,next)=>{ let code=ctx.query.code; let appid='xx'; let appSecret='xx'; let url=`https://api.weixin.qq.com/sns/jscode2session?appid=${appid}&secret=${appSecret}&js_code=${code}&
2020-05-20 16:25:06
1150
原创 flyio
支持多平台、所有js环境的网络请求方式node使用实例:let Fly=require("flyio/src/node")let fly=new Fly;get请求： fly.get(url) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); post请求: fly.p
2020-05-20 15:43:16
1251
原创 小程序 login登录、checkSession检验登录态、获取openid和session_key
1、获取用户的临时登录凭证: 在App.vue生命周期函数中 wx.login({ success:(res)=>{ res.code; } }) 2、将临时凭证传给后台,让后台请求腾讯服务器 (1)获取传递的临时凭证 (2)获取appid (3)获取AppSecret(小程序密钥),在微信程序后台开发处获取 (4)拼接请求url appid、secret、js_code放入对应的数据 let url=`https:
2020-05-20 15:38:48
2520
原创 mpvue 用户授权登录
1、button按钮添加属性 open-type='getUserInfo'2、button绑定事件监听 @getuserinfo="回调"3、回调的第一个参数即为登录信息 x.mp.detail.userInfo;4、生命周期函数中判断是否已授权登录 第一次授权后,再次编译时,数据将不再显示,且不再弹出授权窗口,使用如下方法,将授权后的信息显示 wx.getUserInfo({ success:(res)=>{ res.userI
2020-05-20 09:42:09
965
原创 node koa配置模板
1、安装 cnpm install koa koa-router2、引入koa和router路由 let koa =require('koa'); let koaRouter=require('koa-router');3、生成应用以及路由器实例 const app=new koa(); const router=new koaRouter(); 4、使用路由及其方法 app.use(router.routes()) //声明使用路由 .use(router.al
2020-05-19 21:54:47
294
原创 rem布局
原理:通过修改html根元素的大小,使得整体元素大小使得改变1、创建js文件 (function(){ function resize() { let baseFontSize=100; //设计稿100像素相当于1rem,满屏就算7.5rem let designWidth=750; let width=window.innerWidth; //屏幕宽度 //750/100,等到整个屏幕整体的re
2020-05-14 18:49:55
170
原创 svg 动态描边时间戳
思路:动态设置时间边框运动:文字不设置填充度,设置边框,将边框设置为虚线,动画中设置移动虚线实现多色:因为一个文字只能设置一种颜色,所以设置多个相同文字,每一个文字设置不同颜色,通过延迟各个动画开始的时间(相当于错位开始运动),达到边框多色显示stroke-dashoffset: xx; 完成边框运动;animation-delay:ns; 完成多个动画错位开始运动代码示例:css:*{ padding: 0; margin: 0;}html{ height: 100%;}
2020-05-13 16:36:03
427
1
原创 uniapp 安卓打包发布
1、在项目的manifest.json中(1)基础配置登录获取应用标识(2)App图标配置选择图标后,点击自动生成所有图标并替换(3)App启动图配置(4)AppSDK配置将应用中的如百度地图等sdk配置(5)App权限配置将应用所要的权限配置(6)hbuilderX点击发行原生App云打包->点击安卓包->点击使用自有证书，也可使用公共测试->根据文档生成自由证书->点击打包(7)使用二维码生成器,将地址复制生成(8)手机扫描下载...
2020-05-13 10:40:04
5099
原创 electron 复制板的使用
1、引入 const {clipboard}=require('electron').remote;如复制文字: 事件触发后,ctrl+v就可输出复制的内容 还能复制图片等...,调用的方法改名 clipboard.writeText('内容‘);代码示例:const {net,Menu,shell,clipboard}=require('electron').remote...
2020-05-04 15:08:04
854
原创 electron 网络连接提醒
1、监听网络连接 window.addEventListener('online',()=>{ alert('有网'); }) 2、监听网络断开 window.addEventListener('offline',()=>{ alert('断网'); })
2020-05-04 14:19:29
1061
原创 electron 点击链接通过浏览器打开
默认点击链接打开在electron的窗口1、引入 const {shell}=require('electron').remote;2、在事件中设置 e.preventDefault(); 阻止窗口打开的默认事件 let href=a.href; shell.openExternal(href); 通过url在浏览器打开代码示例:const {net,Men...
2020-05-04 11:03:00
3863
原创 electron 右键弹出菜单
1、监听右键,回调中弹出 window.addEventListener('contextmenu',回调);代码示例:const {net,Menu}=require('electron').remote;var view=document.querySelector('.wb');var sp=document.querySelector('.sp');var btn=doc...
2020-05-04 10:50:44
3300
2
原创 electron 集成react
1、创建react项目npx create-react-app 项目名称2、安装electroncnpm i electron --save3、在package.json 中添加“main”: “main.js”,“homepage”: “.”,4、在package.json的script中添加脚本命令“electron-dev”: “electron . dev”,“elec...
2020-05-03 21:37:42
1807
原创 electron 集成react
1、下载git clone --depth 1 --single-branch --branch master https://github.com/electron-react-boilerplate/electron-react-boilerplate.git xx自定义工程名 若不是网络原因的下载失败,如: Cloning into 'electron-'... remote: ...
2020-05-03 16:59:47
225
原创 electron 网络请求
1、引入 主进程:const {net}=require('electron'); 渲染进程:const {net}=require('electron').remote;2、get请求 let request=net.request(url地址) request.on('response',(response)=>{ 监听响应 console.log...
2020-05-03 15:48:45
9984
原创 electron 类似右键的弹出菜单
1、引入 主进程:const {Menu,MenuItem}=require('electron'); 渲染进程:const {Menu,MenuItem}=require('electron').remote;2、设置菜单项 使用MenuItem设置的菜单项和直接对象设置的菜单项是一样的 let xx=[ {label:'内容'}, ...
2020-05-03 15:06:34
1087
原创 electron 主进程和渲染进程通信
1、主进程引入 const {ipcMain} = require('electron')2、渲染进程引入 const {ipcRenderer}=require('electron'); 3、通信 (1)两个进程互相通信 主进程: 接收:ipcMain.on('主进程名‘,(event,ans)=>{ ans为渲染进程发送的数据 ...
2020-05-02 17:15:15
1708
1
原创 electron 注册系统快捷键
1、引入 主线程:const {globalShortcut} = require('electron'); 渲染进程:const {globalShortcut} = require('electron').remote;2、注册热键 CommandOrControl:Command为linux下的常用,Control为windows下的快捷键常用 globalShortcut....
2020-05-02 16:01:00
1287
原创 electron 弹出框
1、引入弹出框 主线程:const {dialog}=require('electron'); 渲染进程:const {dialog}=require('electron').remote; 2、每个弹出框都有同步和异步打开方式 是否在末尾添加Sync 同步:可以直接接收返回值 异步:弹出框为promise对象,.then或await获取,参数为内容对象(1)文件选择框 di...
2020-05-02 15:27:17
12211
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人