- 博客(51)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 微信小程序 - 生成二维码
前言：通过小程序端生成二维码也是很有必要的，可以为后台减压。本文介绍三个插件，其中各有不同，各有优点。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
887
原创 浏览器在线预览 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
604
原创 React跨域
方案一：package.json配置："proxy": "http://www.zhangxuwei.top/" // 注意，目前最新版本不支持对象方案二：使用中间件 http-proxy-middleware安装：npm install http-proxy-middleware -d新建 src/setupProxy.jsconst proxys = require('http-proxy-middleware')const proxy = pro.
2020-06-19 23:42:14
321
原创 瀑布流排版
let leftHeight = 0; // 左侧列表高度 let rightHeight = 0; // 右侧列表高度 const query = wx.createSelectorQuery() query.select('#leftList').boundingClientRect() // 查询左侧节点 query.select('#rightList').boundingClientRect() // 查询右侧节点 query..
2020-06-19 18:00:19
548
原创 mpvue
mpvue是一个使用 Vue.js 开发小程序的前端框架。主要特性：彻底的组件化开发能力：提高代码复用性 完整的 Vue.js 开发体验 方便的 Vuex数据管理方案：方便构建复杂应用 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload 支持使用 npm 外部依赖 使用 Vue.js 命令行工具 vue-cli 快速初始化项目 H5 代码转换编译成小程序目标代码的能力快速开始：环境先决条件：node > v8.9.0 npm >..
2020-06-11 16:11:22
2024
原创 propTypes 类型检测
自 React v15.5 起，React.propTypes已移入另一个包中，需要引入prop-types库使用。如果没有安装，请执行以下命令安装依赖：npm install prop-types --save引入使用：import propTypes from 'prop-types'简单使用示例：import React from 'react';import PropTypes from 'prop-types'; // 引入prop-types库class Pa
2020-06-10 23:20:51
656
原创 状态管理器 - MobX
MobX 是一个经过战火洗礼的库，它通过透明的函数响应式编程使得状态管理变得简单和可扩展。React 和 MobX 是一对强力组合。React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而MobX提供机制来存储和更新应用状态供 React 使用。...
2020-06-10 16:38:05
292
原创 Yarn - 安装与基本使用
yarn是javascript库的包管理工具。yarn相对于npm具有 速度快、安全、稳定的特性。一、安装安装前先确认已安装node.js，Node 版本支持:^4.8.0 || ^5.7.0 || ^6.2.2 || >=8.0.01、通过下载软件程序在windows上安装：下载msi后缀安装程序：点击下载运行安装程序根据引导安装即可2、通过npm命令安装：目前node.js环境一般自带npmnpm install yarn -g // 全局安装yarn.
2020-06-07 17:11:33
1503
原创 状态管理器 - Redux
Redux 是 JavaScript 状态容器，提供可预测化的状态管理。Redux通常结合react一起使用，但除了react还可以与其他框架一起使用，如：angular、vue等；
2020-06-03 11:02:18
241
原创 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
293
原创 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
259
原创 微信小程序 - 自定义tabBar
微信小程序默认的tabBar只能提供给开发者修改下颜色，然后就没了。有的人想要最求个性化的tabBar，比如想要在tab中间加一个巨大的扫码按钮，这是很常见的。那么这时候，自定义tabBar就派上用场了。做过小程序的应该都知道，定义默认样式的tabBar可以在app.json 的tabBar 属性中定义配置tabBar，如下：{ ... "tabBar": { "color": "#666666", "selectedColor": "#4d8970",
2020-05-23 10:29:59
1116
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
13567
8
原创 css 预编译处理器 - Stylus
stylus 是三大css预编译处理器之一！一、基础语法1、语法特性stylus是一个提倡简洁写法的语言，代码可省略花括号{}，冒号 ：，引号 ；，当没有使用花括号，需使用缩进进行编写，成为‘python’式书写。2、变量变量可以是一个值，也可以是一个表达式。color = red // 直接赋值定义变量border = 1px solid grey // 赋值一个表达式作为变量值h1 border border // 引用变量// 编..
2020-05-19 15:37:20
881
原创 css 预编译处理器 - Less
Less 是三大css 预编译处理器之一！一、基础语法1、变量@test: red; // 定义变量h1{ color: @test; // 引用变量}// 编译后h1 { color: red;}
2020-05-19 00:18:44
297
原创 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
305
原创 axios 学习笔记
什么是 axios？Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。特性从浏览器中创建XMLHttpRequests 从 node.js 创建http请求 支持PromiseAPI 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御XSRF安装使用 npm:np...
2020-05-06 18:23:41
250
原创 uni-app省市区地址选择器
前言：uni-app原生选择器并不支持H5，因此需要引入外部组件。组件：支持h5 小程序 app组件下载地址：https://pan.baidu.com/s/1G6N2vHnaOLyR79yc0B9qog 提取码：7nr2效果图：代码示例：<template> <view class="content"> ...
2020-02-12 10:29:49
9059
7
原创 Node 学习笔记
一. 第一个node服务器var http = require('http');http.createServer(function (request, response) { // 发送 HTTP 头部 // HTTP 状态值: 200 : OK // 内容类型: text/plain response.writeHead(200, {'Content-Type': 'text...
2019-12-23 01:56:14
195
原创 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
459
原创 Git 学习笔记
此为个人笔记，了解更多更详细的git教程推荐阅读 -- 廖雪峰官方网站git教程一、git配置配置本地git用户邮箱：git config --global user.email <邮箱号>配置本地git用户名：git config --global user.name <用户名>查看本地已配置用户邮箱：git config user....
2019-09-13 19:35:15
267
原创 commonJS规范、AMD规范、CMD规范、ES6模块化
这三个规范有什么用：这三个规范可以帮助你加载各个模块，完成各个模块的作用域独立那么模块是什么，作用域又是什么？1、作用域：作用域指在一个区域内有效的区域。熟悉javascript的应该知道，javascript是函数级作用域，在函数内可以访问到函数外的变量，而函数外不能访问到函数内的变量，这个就是函数的作用域。在函数外的变量会变成全局变量。一个比较大的项目需要很多变量命名，...
2019-09-06 23:46:44
305
原创 使用 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
245
原创 使用 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
309
原创 使用 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
951
原创 使用 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
193
原创 项目自动化构建工具 - 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
150
原创 项目自动化构建工具 - webpack
Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。多个引入的模块打包成为一个文件。webpack认为每一个文件都是一个模块，包括：js，css, less, json等等。当前博文使用的是 webpack3.6.0 版本， 会对比当前最新版本 4.39.1的差异。一、安装webpack首先全局安装webpack...
2019-08-15 01:53:41
253
原创 项目自动化构建工具 - grunt
Grunt是一个自动化的项目构建工具。 如果你需要重复的执行像压缩， 编译， 单元测试， 代码检查以及打包发布的任务。 那么你可以使用Grunt来处理这些任务， 你所需要做的只是配置好Grunt， 这样能很大程度的简化你的工作。使用grunt前需要安装node，npm。一、安装grunt需要全局安装grunt-clinpm install -g grunt-cli局部安装前需...
2019-08-13 22:17:58
199
原创 项目自动化构建工具 - 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
196
原创 使用nginx解决浏览器跨域问题
通过使用ajax方法跨域请求是浏览器所不允许的，浏览器出于安全考虑是禁止的。警告信息如下：不过jQuery对跨域问题也有解决方案，使用jsonp的方式解决，方法如下：$.ajax({ async:false, url: 'http://www.mysite.com/demo.do', // 跨域URL ty...
2019-06-11 23:19:33
1067
原创 微信小程序 - 菜单左右联动示例
今天记录一个个人写的二级联动示例。下面是效果图：功能实现关键是使用控件scroll-view，下面直接上示例代码。页面对应的js文件：Page({ data: { select_index:0, scroll_height:0, left: [{ id: 1, title: '选项一' }, ...
2019-05-06 23:31:27
4212
5
原创 微信小程序 - 授权登录和授权用户信息总结
简述：记录 微信授权登录 与 微信授权获取用户信息一、微信授权登录用途：用于识别微信用户的身份流程：1、小程序客户端需请求官方接口获取到 code ，并向开发者服务器提交 codewx.login({ success(res) { if (res.code) { // 发起网络请求 wx.request({ url: '提交...
2019-04-30 15:51:31
3019
原创 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
1056
原创 javascript实现获取中文汉字拼音首字母
今天分享一个日常开发中可能会用到的一个小功能，简单说就是输入中文汉字可转换得到中文汉字拼音首字母。当然我可写不出这样的功能，源码来自于其他民间大神的分享，博主在此记录一下功能demo，方便日后复用，同时方便需要此功能的各位。如下输入名字张三。点击按钮获取，得到中文拼音首字母博主整理了一下代码可阅读性，下面直接上代码。<!doctype html><ht...
2019-04-05 23:10:10
13348
5
原创 mui子页面与父页面的方法互相调用
描述：在子页面中想要触发父页面的方法改变状态说明：父页面与子页面的关系有两种。1、子页面是通过mui.openWindow()的方法打开，两个页面并不在同一个视图窗口。2、子页面是通过plus.webview.create(）创建合并插入到父页面，父页面与子页面同一个窗口。一、第一种模式的方法互相调用。1、子页面调用父页面的方法// 方法一var webview ...
2019-03-16 00:40:43
2149
原创 mui实现APP在线更新版本（mui文件下载）
功能描述：实现mui框架开发的app能够在线检测是否有新版本，如果有新版本提示用户进行更新。实现原理：通过判断当前app版本与网络最新版本进行提示更新。步骤：一、获取本地当前App版本。mui.getJSON("配置文件路径，如：‘../manifest.json’", null, function(manifest){ versionName = manifest.versi...
2019-03-15 23:51:26
8424
5
原创 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
1101
1
原创 js实现图片选中马上显示功能，选择后可以预览，即选即显
此demo实现input选中图片后，通过js获取图片并显示出来，选中立马显示功能，即预览功能。代码不多，直接上代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> &
2019-02-20 22:37:05
8057
1
原创 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
7857
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人