前端
关注
分享
扫一扫
master'z
一切献给未来的自己
展开
-
微信小程序 - 生成二维码
前言：通过小程序端生成二维码也是很有必要的，可以为后台减压。本文介绍三个插件，其中各有不同，各有优点。1、可以生成带图标的二维码图示：下载：链接: https://pan.baidu.com/s/198L7DrILfc5M7nQ_il179g 提取码: peuw示例：// index.wxml<canvas canvas-id="qrcode" style="height: 200px;width: 200px"></canvas>// in..原创 2020-07-15 11:50:02 · 930 阅读 · 0 评论 -
浏览器在线预览 PDF
此文章说明如何在浏览器上实现 在线预览 pdf 文件，本教程使用 pdf.js 插件实现。一、下载 pdf.js百度云地址：https://pan.baidu.com/s/1lgw-pxb6c_vJw9fLHPoPzg提取码：hp2v解压后结构如下（注意：结构请勿更改）：build包含 js 文件web包含html文件二、使用示例将解压后的整个目录结构放置您的项目目录下<!DOCTYPE html><html> <he..原创 2020-07-01 17:16:16 · 639 阅读 · 0 评论 -
状态管理器 - Redux
Redux 是 JavaScript 状态容器，提供可预测化的状态管理。Redux通常结合react一起使用，但除了react还可以与其他框架一起使用，如：angular、vue等；原创 2020-06-03 11:02:18 · 262 阅读 · 0 评论 -
React-Router 学习笔记
React Router 是一个基于React之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。不使用react-router时的路由跳转方案：import React from 'react';// 引入页面import Index from './pages/Index'; // 首页import Article from './pages/Article'; // 文章页import About from './pages/Abou..原创 2020-06-01 15:07:34 · 347 阅读 · 0 评论 -
React 学习笔记
查看更详细教程，请阅读 React官方文档一、搭建环境1、方式1：在网站中直接引入使用<script src="//www.w3cschool.cn/statics/assets/react/react.min.js"></script><script src="//www.w3cschool.cn/statics/assets/react/react-dom.min.js"></script><script src="//www.w3原创 2020-05-29 17:10:20 · 287 阅读 · 0 评论 -
微信小程序 - 自定义tabBar
微信小程序默认的tabBar只能提供给开发者修改下颜色，然后就没了。有的人想要最求个性化的tabBar，比如想要在tab中间加一个巨大的扫码按钮，这是很常见的。那么这时候，自定义tabBar就派上用场了。做过小程序的应该都知道，定义默认样式的tabBar可以在app.json 的tabBar 属性中定义配置tabBar，如下：{ ... "tabBar": { "color": "#666666", "selectedColor": "#4d8970",原创 2020-05-23 10:29:59 · 1220 阅读 · 1 评论 -
微信小程序 - 暗黑模式（深色模式）
最近暗黑模式成为了潮流，微信小程序也推出了暗黑模式适配，下面来记录一个下适配暗黑模式。一、实现1、开启暗黑模式在 app.json 中配置 "darkmode":true// app.json{ ... "darkmode": true}2、配置主题文件在根目录新建主题配置文件 theme.json, 并在 app.json 中配置路径引入// app.json{ ... "themeLocation": "theme.json"}.原创 2020-05-20 23:46:44 · 14218 阅读 · 8 评论 -
css 预编译处理器 - Stylus
stylus 是三大css预编译处理器之一！一、基础语法1、语法特性stylus是一个提倡简洁写法的语言，代码可省略花括号{}，冒号 ：，引号 ；，当没有使用花括号，需使用缩进进行编写，成为‘python’式书写。2、变量变量可以是一个值，也可以是一个表达式。color = red // 直接赋值定义变量border = 1px solid grey // 赋值一个表达式作为变量值h1 border border // 引用变量// 编..原创 2020-05-19 15:37:20 · 928 阅读 · 0 评论 -
css 预编译处理器 - Less
Less 是三大css 预编译处理器之一！一、基础语法1、变量@test: red; // 定义变量h1{ color: @test; // 引用变量}// 编译后h1 { color: red;}原创 2020-05-19 00:18:44 · 326 阅读 · 0 评论 -
css预编译处理器 - Sass
sass是三大css预编译处理器之一！一、基础语法：1、变量变量声明：定义一个名为test的变量$test: red;变量引用：给h1标签引用定义的test变量作为color属性的值h1{ color: $test;}tips: 变量名 test-name 与 test_name 可以互相通用。2、嵌套css子元素嵌套h1{ h2{ color: red; } h3{ color: green;原创 2020-05-18 16:10:18 · 332 阅读 · 0 评论 -
axios 学习笔记
什么是 axios？Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。特性从浏览器中创建XMLHttpRequests 从 node.js 创建http请求 支持PromiseAPI 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御XSRF安装使用 npm:np...原创 2020-05-06 18:23:41 · 284 阅读 · 0 评论 -
uni-app省市区地址选择器
前言：uni-app原生选择器并不支持H5，因此需要引入外部组件。组件：支持h5 小程序 app组件下载地址：https://pan.baidu.com/s/1G6N2vHnaOLyR79yc0B9qog 提取码：7nr2效果图：代码示例：<template> <view class="content"> ...原创 2020-02-12 10:29:49 · 9165 阅读 · 7 评论 -
Vue 学习笔记
一、路由1、安装vue-routernpm install vue-router --save-dev2、引入并使用import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)3、定义路由映射new Router({ routes:[ {path: '路由',name:'路由别名...原创 2019-09-15 14:22:09 · 509 阅读 · 0 评论 -
commonJS规范、AMD规范、CMD规范、ES6模块化
这三个规范有什么用：这三个规范可以帮助你加载各个模块，完成各个模块的作用域独立那么模块是什么，作用域又是什么？1、作用域：作用域指在一个区域内有效的区域。熟悉javascript的应该知道，javascript是函数级作用域，在函数内可以访问到函数外的变量，而函数外不能访问到函数内的变量，这个就是函数的作用域。在函数外的变量会变成全局变量。一个比较大的项目需要很多变量命名，...原创 2019-09-06 23:46:44 · 334 阅读 · 0 评论 -
使用 angular-cli 创建一个augular项目
一、安装 angular-cli 脚手架安装之前需要电脑上已安装node和npm。首先，全局安装angular脚手架：npm install @angular/cli -g进度条走完后可以输入以下命令确认是否安装成功：C:\Users\SmallBag\Desktop\study\angular_test>ng version _ ...原创 2019-08-21 11:54:54 · 292 阅读 · 0 评论 -
项目自动化构建工具 - webpack4.0
一、安装由于webpack4.0以后，webpack-cli被分离出来了，所以需要全局安装webpack-clinpm install webpack-cli -g局部安装npm install webpack --save-dev二、使用方式webpack3.0的传统终端打包方式：webpack ./entry.js ./dist/bundle.js但是在4...原创 2019-08-15 12:48:22 · 171 阅读 · 0 评论 -
mui获取经纬度和地址信息（百度地图 javascript api）
首先，介绍实现的原理：通过使用百度地图提供的api进行开发。参考的是百度地图官方的javascript api文档。点击进入官方文档地址在这之前，首先得获得百度地图api 的秘钥，头部引入需要：<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥"></s...原创 2019-02-23 14:53:51 · 1162 阅读 · 1 评论 -
js实现图片选中马上显示功能，选择后可以预览，即选即显
此demo实现input选中图片后，通过js获取图片并显示出来，选中立马显示功能，即预览功能。代码不多，直接上代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> &原创 2019-02-20 22:37:05 · 8233 阅读 · 1 评论 -
javascript实现获取中文汉字拼音首字母
今天分享一个日常开发中可能会用到的一个小功能，简单说就是输入中文汉字可转换得到中文汉字拼音首字母。当然我可写不出这样的功能，源码来自于其他民间大神的分享，博主在此记录一下功能demo，方便日后复用，同时方便需要此功能的各位。如下输入名字张三。点击按钮获取，得到中文拼音首字母博主整理了一下代码可阅读性，下面直接上代码。<!doctype html><ht...原创 2019-04-05 23:10:10 · 13747 阅读 · 5 评论 -
javascript使用经纬度实现两地距离计算（函数例子）
记录一个计算两地距离的函数。说明：通过两者的经纬度进行计算两者距离。下面直接上计算距离的方法（函数）。 // 计算两地之间的距离 function space(lat1, lng1, lat2, lng2) { console.log(lat1, lng1, lat2, lng2) var radLat1 = lat1 * Math.PI / 18...原创 2019-04-23 00:02:36 · 1089 阅读 · 0 评论 -
使用nginx解决浏览器跨域问题
通过使用ajax方法跨域请求是浏览器所不允许的，浏览器出于安全考虑是禁止的。警告信息如下：不过jQuery对跨域问题也有解决方案，使用jsonp的方式解决，方法如下：$.ajax({ async:false, url: 'http://www.mysite.com/demo.do', // 跨域URL ty...原创 2019-06-11 23:19:33 · 1124 阅读 · 0 评论 -
项目自动化构建工具 - gulp
gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。使用gulp前需要安装node，npm。一、安装gulp：1、全局安装gulpnpm install gulp -g2、局部安装（项目内）npm install gulp --save-dev二、gulp项目配置文件在项目下新建 gulpfile.js配置基本内容：...原创 2019-08-13 21:30:26 · 253 阅读 · 0 评论 -
项目自动化构建工具 - grunt
Grunt是一个自动化的项目构建工具。 如果你需要重复的执行像压缩， 编译， 单元测试， 代码检查以及打包发布的任务。 那么你可以使用Grunt来处理这些任务， 你所需要做的只是配置好Grunt， 这样能很大程度的简化你的工作。使用grunt前需要安装node，npm。一、安装grunt需要全局安装grunt-clinpm install -g grunt-cli局部安装前需...原创 2019-08-13 22:17:58 · 257 阅读 · 0 评论 -
使用 vue-cli 脚手架构建 vue 项目
在构建项目之前，需要电脑已安装node。构建项目之前需要安装vue-cli，全局安装：npm install vue-cli -g创建一个基于webpack模板的新项目:vue init webpack 项目名称回车之后需要输入配置：C:\Users\SmallBag\Desktop\study\vue_test>vue init webpack vue_...原创 2019-08-19 12:12:01 · 216 阅读 · 0 评论 -
使用 create-react-app 脚手架构建 react 项目
使用 create-react-app 脚手架构建 react 项目前需要电脑上已安装node。首先，需要react的脚手架create-react-app，全局安装：npm install create-react-app -g安装成功后，接下来创建项目：create-react-app 项目名称创建完成项目后：cd 项目名称运行：npm star...原创 2019-08-19 23:32:50 · 331 阅读 · 0 评论 -
使用 babel 将 ES6 转换为 ES5
ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。Babel 主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。一、安装 babel：安装前需要电脑已安装node。需要局部安装 babel-cli ，不要全局安装b...原创 2019-08-19 23:25:49 · 1028 阅读 · 0 评论 -
项目自动化构建工具 - webpack
Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。多个引入的模块打包成为一个文件。webpack认为每一个文件都是一个模块，包括：js，css, less, json等等。当前博文使用的是 webpack3.6.0 版本， 会对比当前最新版本 4.39.1的差异。一、安装webpack首先全局安装webpack...原创 2019-08-15 01:53:41 · 306 阅读 · 0 评论 -
js模板（template.js）实现循环渲染列表
template.js是由纯JavaScript编写的第三方模板引擎。点击https://github.com/yanhaijing/template.js可进行下载。实现效果：我们希望通过一串json数据来进行渲染出数量等于json长度的列表。一、引入模板文件<script src="你的模板文件路径/template.js"></script>二、实现...原创 2019-02-04 11:54:38 · 7942 阅读 · 0 评论