- 博客(70)
- 收藏
- 关注
RSS订阅原创 第三方登录
**第三方登录** 1. 点击qq或者微信的图标 2. 调用uni.login方法 3. 给login方法里面的provider属性设置当前是微信还是qq 4. 跳转到微信或者qq的授权页 5. 同意授权之后微信后台我们返回一堆数据 6. 调用我们自己的后台接口,将同意授权的一堆数据发送给我们自己的后台 7. 我们的后台拿到这一堆数据向微信的后台请求我们微信
2021-04-28 19:12:33
199
原创 git
git工作区文件推送到远程仓库第一种远程仓库未创建：1.在本地创建一个目录，git init初始化本地仓库2.将项目放进去3.git add . 添加文件到暂存区4.git commit -m ‘xxx’ 将添加文件提交到版本库5.git remote add origin 把本地库与远程库关联6.git push -u origin master //推送到远程仓库第二种远程仓库已创建：git clone xxxxxxxxxxxx关联远程git remote add
2021-04-27 20:19:05
158
原创 模仿网易云微信小程序
1.个人中心动画点击图片下面会有一个回弹的效果类型 触发条件touchstart 手指触摸动作开始touchmove 手指触摸后移动touchcancel 手指触摸动作被打断，如来电提醒，弹窗touchend 手指触摸动作结束tap 手指触摸后马上离开longtap 手指触摸后，超过350ms再离开let startY=0; //手指开始的位置let moveY=0; //手指移动的坐标let moveDistance=0; //手指移动的距离data：{ coverT
2021-04-17 12:58:55
330
原创 微信小程序支付实现
微信小程序的支付功能:支付的准备工作: 注册小程序的账号 (不能是个人号,个人号无法认证,并且无法开通微信支付) 进行小程序的认证 (300/年) 开通微信支付 (填写支付所需要的相关信息)前端业务: 1. 在小程序启动的时候,调用wx.login方法获取凭证(凭证也就是code码) 2. 调用获取openid接口,通过传递code码获取后台给返回的openid以及相关信息 3. 将openid和相关信息保存到本地 4. 当点击确认支付按钮的时候,调用统一下单接口
2021-04-16 10:39:08
1197
原创 小程序订单页
<view> <view class="pay_header" wx:for='{{ cart }}' wx:key='index'> <view class="pay_top"> <view>{{ item.title }}</view> <view>￥{{ item.price }}</view> </view> <view class="pay_bottom">x{..
2021-04-15 11:46:00
1023
原创 小程序使用class实现接口封装
class类封装api接口小程序项目中新建config.js 配置公共的请求接口地址以及其他全局参数const config = { //公共接口地址 api_base_url:'https://www.phpsq.cn'}export default{ config}utils文件夹下新建http.js 封装wx.request配置//引入公共接口地址import {config} from "../config"const tips = { "1" : "抱歉,
2021-04-12 14:36:39
195
原创 企业网盘项目
###网盘项目介绍您好，我给你介绍一下我最近做的一个项目，是我们公司内部的，类似一个百度网盘的产品， 它主要是使用vue框架结合ivewui和boostrap实现页面布局及功能，用到的技术还有vuexv-router,axios,本地存储,是俩个人共同开发的，用到的版本控制工具是git和gitlab项目前期我主要负责项目的搭建、路由的配置、接口的封装、跨域配置、公共方法的封装,以及常用功能组件的封装.我参与的模块主要是页面布局以及登录注册，主页的增删改查。我负责开发的功能有登录功能、注册功能、
2021-03-30 10:13:33
624
原创 vue的props传数组_vue中父传子props的使用
第一种传递一个数组props:[“cont”]第二种传递一个对象props:{uploadOption:{type:Object, 参数类型必须是一个对象required: true 这一种说明这个参数是必须的哈}}基础的类型检查 (null 和 undefined 会通过任何类型验证)props: { propA: Number, //如果不符合类型 控制台会警告 propB: [String, Number],// 必填的字符串propC: {typ
2021-03-13 19:53:05
2239
原创 功能实现
搜索功能如何做？首先给input框绑定v-module=‘search’ 点击搜索按钮获取搜索的接口判断数组中是否包含搜索的内容，包含就进行渲染网盘项目删除功能1.给删除按钮绑定del事件 ，绑定弹框2.点击确定的时候通过$emit(' 事件名',{})传递下标和对象this.$emit('on-event',{ type:'delete', item:this.item,
2021-03-12 14:50:54
580
原创 api封装，axios封装
封装axiossrc下新建一个utils文件夹新建request.jsimport axios from "axios"//2. 创建axios实例const request = axios.create({ //请求的公共接口地址 baseURL : "/api", //请求的超时时间 timeout : 5000,})//3. 配置请求拦截和响应拦截// 添加请求拦截器request.interceptors.request.use(function (config) {
2021-03-11 20:32:51
207
6
原创 vue最新版本创建项目配置
vue.config.jsmodule.exports={ davServer:{ port:8000, //端口号 open:true , //自动打开浏览器 https:false, //https host:'localhost', //端口号 }, // 关闭eslint lintOnSave:false}
2021-03-08 16:35:21
189
原创 vue排序
<li @click="changeSort"> 价格 <van-icon name="arrow-down" v-show="sortKey==1" /> <van-icon name="arrow-up" v-show="sortKey==2" /> </li>sortKey: 0, //0原始数据，1升序 2降序 computed: { //过滤函数的操作
2021-02-23 18:33:01
175
原创 vue之时间多久之前
<span class="right">{{ item.create_at | agoTime }}</span>// 多久之前 agoTime(dateTimeStamp) { dateTimeStamp = new Date(dateTimeStamp).getTime(); // 获取到时间的毫秒数 let result = null; var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示
2021-02-18 16:11:34
334
原创 Loading效果
common=》loading.vue<template> <div> <van-overlay :show="true" > <div class="wrapper" > <van-loading size="54px" vertical>加载中...</van-loading> </div> </van-overlay> </div&g
2020-12-30 17:54:02
126
原创 组件封装
pages=》HotGood.vue<template> <div> <div class="cy_title"> <van-nav-bar title="人气推荐" /> </div> <div class="hot_main"> <ul> <li v-for="(item, index) in Hotgood" :key="index
2020-12-26 13:53:26
111
原创 uniapp轮播图二次封装
<template> <view class="box"> <view class="uni-padding-wrap"> <view class="page-section swiper"> <view class="page-section-spacing"> <swiper class="swiper" :ind
2020-12-26 13:18:16
315
1
原创 微信小程序网络请求封装
新建http文件夹=》新建api.jsconst { request } = require('./request.js')//项目中用到的各种业务接口的封装module.exports={ //轮播图 getBanner: () => request('banner/list','GET',{},true),//九宫格接口getGoodsCate: () => request('shop/goods/category/all','GET','',true),//
2020-12-25 19:30:16
140
原创 一、router文件夹下的index文件中给每个path添加meta:{}：
export default new Router({ routes: [ { path: '/', name: 'index', component: index, meta: { title: 'title1' } }, { path: '/studentInfo', name: 'studentInfo', componen
2020-12-23 21:14:04
696
原创 表格增添该查注意的问题
list:[ {title:'mimi',date:'2028',num:'21'} ]add（）{ let { title,date,num }=this.obj 遍历然后拿到id math.max取最大的 let _id=Math.max(...this.list.map(item=>item.id))+1 this.list.push({ title:title, date:date, num:num, id:_id })
2020-12-22 10:50:48
97
原创 uniapp简单了解
uni-app 是一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。开放生态，是组件更丰富支持通过npm安装第三方包支持微信小程序自定义组件及sdk兼容mvpvue组件及项目App端支持和原生混合编码Dcloud将发布插件市场优点1.跨更多的平台2.用户体验感更好3.学习成本低，容易上手4.开放生态，使组件更丰富...
2020-12-22 10:25:48
464
原创 react练习手册
1、请描述一下你对react的理解react是一个用于构建用户界面的JAVACRIPT库， 很多人认为react是MVC中的V（视图）2、react的特点1.高效2.灵活3.Jsx4.单项数据流5.声明范式编写方式6.组件化开发3、列出React的一些主要优点它提高了应用的性能 可以方便地在客户端和服务器端使用 由于 JSX，代码的可读性很好 React 很容易与 Meteor，Angular等其他框架集成 使用React，编写UI测试用例变得非常容易4、什么是JSX
2020-12-19 19:16:34
485
1
原创 request.js
// 1.引入axios// 2.axios.create方法创建实例// 3.使用实例对象创建请求拦截器// 4.使用实例创建响应拦截器// 5.export抛出实例对象// 6.main.js中引入request文件对象import axios from 'axios'import store from '@/store/index'const Server =axios.create({ baseURL:'', timeout:3000})//使用Server创建请
2020-12-15 20:49:04
4065
1
原创 城市信息area.js
export default { province_list: { 110000: '北京市', 120000: '天津市', 130000: '河北省', 140000: '山西省', 150000: '内蒙古自治区', 210000: '辽宁省', 220000: '吉林省', 230000: '黑龙江省', 310000: '上海市', 320000: '江苏省',
2020-12-15 20:47:46
3061
原创 vue之本地存储封装
v// 本地存储封装const storage = { //设置本地存储 key，value isJson //isJson是否需要对数据进行json对象转换 set: function(key,value,isJson = false){ //设置的方法，先做判断，判断key和value是否为空 if(key.length == 0 || value.length == 0){ return false;
2020-12-15 20:45:45
228
原创 vue注册页面
<template> <div> <van-nav-bar title="用户注册" left-arrow @click-left="dot"/> <!-- 页面的主体css样式 --> <div id="login"> <van-form> <p class="login-head">新用户注册</p> <van-field pl.
2020-12-15 20:44:11
3554
1
原创 app登录界面
<template><div class='box'> <div><input type="text" placeholder="请输入用户名" v-model="user" maxlength="11"></div> <div><input type="password" placeholder="请输入密码" v-model="password" maxlength="6"></di...
2020-12-14 17:42:01
2374
1
原创 模糊查询js
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc
2020-12-13 11:38:42
159
原创 拖拽添加心愿
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc
2020-12-13 11:35:46
101
原创 自定义指令
//全局实现v-hide Vue.directive('hide', { update(el, binding, vnode) { if (binding.value) { el.style.display = 'none' } else { el.style.display = 'block' } }, componen
2020-12-13 11:29:35
102
原创 react创建项目报错
../vue-hackernews-2.0> yarnyarn install v1.12.3[1/5] Validating package.json...[2/5] Resolving packages...[3/5] Fetching packages...info fsevents@1.1.3: The platform "win32" is incompatible with this module.info "fsevents@1.1.3" is an optional dep
2020-12-13 10:42:24
292
原创 编写tabbar
<!-- 底部 --><template> <div class="footer"> <div v-for="(item, index) in footerlist" :key="index" v-jump="item.to" class="footer_item" @click="dot(index)" :class="activeIndex==index?'active':''"> <img :src
2020-12-10 14:32:06
129
原创 react的知识点
1.react组件创建的方式函数的方式Import React from ‘react’;function 组件名(props){return (<div className=“ ” style= {{ color:’red’ }} > { props.title } </div>)}export default 组件名在App中引入 import News from “。。/news/News” 渲染class的方式``import React, { Com
2020-12-08 19:34:55
183
原创 返回顶部组件
<template> <div> <h3>我是首页</h3> <div> <p>fdf</p> <p>dfdf</p> <p>dd</p> <p>fdf</p> <p>dd</p> <p>df</p> .
2020-12-08 12:36:12
154
原创 vue2.0与3.0共存
全局安装最新版的vue-cli，vue -V可查看vue脚手架的版本号；npm -g install @vue/cli创建一个文件夹vue3，局部安装vue-cli，vue -V查看版本号；npm install vue-cli@3.0.5修改vue3下的文件名称 找到安装vue的目录，然后找到 vue 和 vue.cmd 的位置。分别改名为 vue3 vue3.cmd编辑==》浏览===》确定最后修改Path变量 这一步才是最重要的 先找到Path的位置，然后编辑编辑Pat
2020-12-07 18:05:24
776
原创 tabbar实现
tabbar，element-ui实现底部<template> <div> <router-view></router-view> <div class="footer"> <van-tabbar route v-model="active" > <van-tabbar-item icon="home-o" to='/first'>首页</van-tabbar-item
2020-12-07 15:57:40
347
原创 前端笔记
BFC 布局方案盒子不定宽高设置水平垂直居中盒子设置绝对定位，使用translate(-50%,-50%)弹性盒子 设置左右垂直居中盒子定宽高设置水平垂直居中position结合margin设置水平垂直居中左侧固定右侧自适应布局左侧设置浮动，右侧设置margin-left值左侧设置绝对定位，右侧设置margin-left值右侧固定左侧自适应右侧绝对定位，左侧设置margin-right左侧设置margin-right 左侧做浮动，右侧右浮动
2020-12-07 15:52:27
386
原创 路由首卫
路由守卫全局前置钩子函数R.beforeEach((to,from,next)=>{ //TODO 代办事项})to: 代表的是你想要进入的路由配置对象from: 代表的是你从哪来调过来的next: 是否让to进入from next() next(false)全局解析钩子函数R.beforeResolve((to,from,next)=>{ //TODO})to: 代表的是你想要进入的路由配置对象from: 代表的是你从哪来调过来的next: 是否
2020-12-07 15:18:02
121
原创 webpack配置
webpack4.x1.什么是webpack？打包工具（静态资源管理工具）前端必备技能（使用webpack）2.webpack的作用？1.打包：解决js依赖关系，合并成一个js（复杂js依赖关系）2.转换：sass，less预编译的处理css，webpack可以帮你解决,(es6转换浏览器识别的js)3.压缩：图片压缩，css压缩，js压缩3.webpack四大核心1.entry: 入口文件2.output: 出口文件3.plugin: 插件
2020-12-07 14:27:56
68
原创 vue使用轮播
vue 使用swiper推荐使用 vue-awesome-swiper的使用使用步骤：1.cnpm install vue-awesome-swiper@3.1.3 -S2.进入maim.js文件import vueSwiper from ‘vue-awesome-swiper’import ‘swiper/dist/css/swiper.css’Vue.use(vueSwiper)3. <swiper :options="swiperOption">
2020-12-07 14:24:44
95
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人