weixin_45847120的博客

原创 微信公众号二维码海报生成并识别 保存

<img :src="imgUrl" alt @touchstart="start" /> <vue-canvas-poster :widthPixels="300" :painting="painting" @success="success" @fail="fail" v-show="!imgUrl" ></vue-canvas-post...

原创 微信公众分享功能实现(小白专用)

1.微信分享当然要引入微信JS-SDK　微信JS-SDK说明文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp14211411152.封装一下微信分享的功能，如下weixinApi.jsimport wx from "weixin-js-sdk";//安装下载import { Toast } from "vant";export default { wxChat: ($vue, param) => {

原创 获取url？后面的所有参数

在项目在使用 window.location.search没有实现var url = window.location.href;var querys = url.substring(url.indexOf("?") + 1);

原创 Window Location方法使用

window.location方法获取URL统一资源定位符 (Uniform Resource Locator, URL)完整的URL由这几个部分构成：scheme://host:port/path?query#fragmentscheme:通信协议常用的http,ftp,maito等host:主机服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。port:端口号整数，可选，省略时使用方案的默认端口，如http的默认端口为80。path:路径由零或多个"/"符号隔开的字符串，

原创 微信小程序-wxs实现手机号码中间四位显示为*号

直接写到微信wxml里面<!-- 使用wxs 手机号码中间四位显示为*号 --><wxs module="phone">var toHide = function(array) { var mphone = array.substring(0, 3) + '****' + array.substring(7); return mphone;}module.exports.toHide = toHide;</wxs>在页面中就可以直接使用了&lt

原创 微信小程序 防止用户重复点击按钮

场景在使用小程序的时候会出现这样的一些情况：当网络出现卡顿的情况下，使用者会认为点击无效而进行多次点击，最后出现多次跳转页面的情况解决办法然后从 轻松理解js函数节流和函数防抖中找到了解决办法，就是函数 节流：函数在一段时间多次触发只会执行第一次，在这段时间结束前，不管触发多少次也不会执行函数/utils/utils.js//使用函数节流防止重复点击function throttle(fn, gapTime) { if (gapTime == null || gapTime == undef

原创 display:none,visibility:hidden和opactiy:0之间的区别

1.空间占据display:node隐藏后不占额外空间，它会产生回流和重绘，而visibility:hidden和opactiy：0元素虽然隐藏了，但他们仍然占据着空间，他们俩只会引起页面重绘。2.子元素继承display：none不会被子元素继承，但是父元素都不在了，子元 素自然也就不会显示了visibility:hidden会被子元素继承，可以通过设置子元素visibility：visible使子元素显示出来opactiy：0也会被子元素继承，但是不能通过设置子元素opactiy：0使其重

原创 移动端调用高德地图app和百度app

1、h5调用高德、百度地图App//高德地图 百度地图 使用a标签跳转<a href="https://uri.amap.com/marker?position=经度,纬度&name=所在的位置名称">高德地图</a><a href="http://api.map.baidu.com/marker?location=纬度,经度&title=所在位置名称&content=所在位置的简介（可选）&output=html">百度

原创 vue 使用高德地图进入页面获取用户位置

需求：当用户进入程序页面获取用户当前位置1.创建高德地图的key值2.安装依赖npm install vue-amap --save3.新建一个amp.jsexport default function MapLoader () { // <-- 原作者这里使用的是module.exports return new Promise((resolve, reject) => { if (window.AMap) { resolve(window

原创 vue手机验证倒计时

效果图：1.htmli<van-form> <van-field v-model="userphone" name="手机号" label="新手机号" placeholder="请填写手机号" /><van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码"> <template #button&

原创 vue 树形结构

1.html触发 <el-button size="small" type="success" @click="handlecaidan(scope.row.id)">分配菜单</el-button> <!-- 分配菜单 --> <el-dialog title="分配菜单" :visible.sync="handlecaidanis" width="40%"> <!-- 树 --> <el-tre

原创 微信小程序 轮播图高度自适应

1.wxml 文件 <block wx:for="{{data.gallery}}" wx:key="index"> <swiper-item> <image class="wh" src="{{item.image_url}}" bindload="setContainerHeight" /> </swip

原创 js中将 对象转化为数组

前言如何把一个对象{'未完成‘：5，‘已完成’：8，“待确定”：4，“已取消”：6} 转化为[{"未完成“：5}，{“已完成”：8}，{“待确定”：4}，{“已取消”：6}]对象的两种取值方式let obj = {name：'yang'};console.log(obj.name);//yangconsole.log(obj['name'];//yang这里要注意中括号里面要么是变量，要么是字符串，如果对一个已知的对象来说，几乎没有什么区别将对象转化为数组首先看我们的例子在这里插入代码片

原创 localStorage存对象

什么是localStorage在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。localStorage的优势1、localStorage拓展了cookie的4K限制2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的

原创 vant 省市区三级联动

需求：每次当前选中的id值拿去请求下一个接口html部分 <van-field readonly clickable name="picker" :value="value" label="地区选择:" placeholder="点击选择省市区" @click="region" class="nav" /> <van-popup

原创 vue 导航守卫

路由设置：router/index.jsexport default new Router({ routes: [ { path: '/selfcenter', name: 'selfcenter', meta: { requireAuth: true // 配置此条，进入页面前判断是否需要登陆 }, component: selfcenter } ]})main.js：/* eslint-disab

原创 vue海报含二维码

封装好的 子组件<template> <div class="container"> <img v-if="posterDataUrl" :src="posterDataUrl" style="width:300px;height:720px" /> <div id="poster" v-show="!posterDataUrl" style="position: relative;width:300px;height:720px">

原创 vue 父子组件传值正确 页面内容不更新

在父组件创建的时候，已经创建了相关的子组件，该子组件已经缓存在内存中，在通过其他事件改变父组件传给子组件的值是不生效，需要先销毁子组件再重新加载。<pro v-bind:path="path" v-bind:bgsrc="bgsrc" v-if="flag"></pro>data中定义flag 为false在点击事件执行下面代码 this.flag = false; this.bgsrc = this.bgsrc

原创 vue引入高德地图实现方法

功能需求：用户输入具体详细位置点击查询 出现地图展示位置信息 点击确定之后 显示经纬度使用的文档：https://lbs.amap.com1.申请一个key值2.安装依赖npm install vue-amap --save...

原创 vue 引用网络图片报错403

解决方法：在头部添加meta标签，不发送HTTP Referer首部<meta name="referrer" content="no-referrer">

原创 vue 百度地图根据详细地址获取经纬度

前言业务需求：根据用户输入详细地址，获取地址的经纬度传给后台，但是不要地图。准备内容1.安装josnp，解决跨域，不安转会报跨域问题执行命令：npm install vue-jsonp --save入口文件main.js添加：import VueJsonp from 'vue-jsonp'Vue.use(VueJsonp)基本使用方法：this.$jsonp(地址, 传参参数对象{} ).then(json => {　　// 返回的内容 console.log(jso

原创 vue 分页写法

<el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange" :page-size="pagesize" :current-page="pagenum" ></el-pagination> //data中定义下..

原创 vue使用js时间格式化

js格式转换1.中国标准时间转换为正常格式： let date = this.start_timestamp; let date_value = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();转换后格式为：2020-6-20 10:00:

原创 一个数组当中有对象 怎么才能去掉含有相同属性值的对象

原创 Vue项目中src路径不成功

在做Vue项目的时候，由于项目需求，需要动态绑定img的src时，突然发现如果说是直接请求后台接口的图片地址就能显示，但是直接动态绑定img的src的图片的相对路径或者是绝对路径的时候，图片不能显示，控制台也不报错html代码： <img :src="MyimgSrc" alt="">js代码： this.MyimgSrc = '../../assets/jd/market/img/temp/icon_yj.png'但是浏览器不报错，而且f12查看元素的时候

原创 Unknown custom element el-image did you register the component correctlyFor recursive compone

全局引入element-ui报上面的错误是因为element-UI中el-image是2.11之后的版本,需要更新element-UI的版本首先卸载element-UI : npm uninstall element-ui更新为最新的版本: npm i element-ui -S更新为制定版本: npm install element-ui @2.12.0 -S...

原创 Less 介绍

Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。做为 CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们...

原创 git相关命令

git config --global user.name //配置姓名git config --global user.email //配置邮箱git config --list //查看配置信息git init //初始化本地仓库git status //查看文件状态git add 文件名 //添加某个文件到暂存区，如果写 . 代表当前文件夹下所有的文件、git co...

原创 23.vue脚手架-介绍并安装3.x版本的vue脚手架

1. 安装 vue clinpm install -g @vue/cli2. 查看 vue cli 的版本vue -V

原创 22.单文件组件-webpack打包发布

1. 添加 build 命令在 package.json 的 scripts 中添加 build 命令"build": "webpack -p"2. 运行 打包命令npm run build3. 查看生成的文件4. 预览效果双击 dist/index.html 预览效果 页面显示正常...

原创 21.单文件组件-在webpack项目中使用vue

1. 安装 vuenpm i -S vue2. 在 index.html 中加入控制区域 el<div id="app"></div>3. 在 index.js 中加入 vue 的代码通过 render 函数渲染 App 根组件// 1. 导入 Vue 构造函数import Vue from 'vue'// 2. 导入 App 根组件import ...

原创 20.单文件组件-配置.vue文件的loader加载器

1. 在 index.js 中引入 App.vueimport App from "./components/App.vue"2. 预览浏览器 发现出错了提示缺少合适的loader3. 安装 vue-loadernpm i -D vue-loader vue-template-compiler4. 配置 webpack.config.js 文件const path = re...

原创 19.单文件组件-单文件组件的组成结构

1. 创建 components/App.vue 文件2. 完善 App.vue 组件的内容<template> <div> <h1>这是 App 根组件</h1> </div></template><script>export default { data() { ret...

原创 18.webpack加载器-打包处理js文件中的高级语法

1. 在index.js中添加 es6语法的代码class Person { static info = "aaa"}console.log(Person.info)2. 打开浏览器 效果3. 安装 babel 核心和loadernpm i -D babel-loader @babel/core @babel/runtime4. 安装 babel 语法和插件`npm...

原创 17.webpack加载器-打包样式表中的图片和字体文件

1. 修改 index.html 添加 div 层<div id="box"></div>2. 修改 1.css 文件 添加样式#box { width: 580px; height: 340px; background-color: pink; background: url("../images/1.jpg");}3. 添加图片素材复...

原创 16.webpack加载器-配置postCSS

1. 在index页面中添加input输入框<input type="text" placeholder="ceshi" />2. 在1.css中添加样式::placeholder { color: red;}3. 预览效果chrome浏览器 提示文本为红色 显示正常ie浏览器 提示文本为红色 显示不正常4. 安装postcssnpm i -D post...

原创 15.webpack加载器-打包处理scss文件

1. 创建 src\css\1.scss 文件ul { font-size: 12px; li { line-height: 30px; }}2. 在 index.js 中引入 1.scss 文件import "./css/1.scss"3. 自动打包的时候提示了错误提示缺少一个合适的 loader 来处理 .scss 文件4. 安装 loadernp...

原创 14.webpack加载器-打包处理less文件

1. 创建 src\css\1.less 文件body { margin: 0; padding: 0; ul { margin: 0; padding: 0; }}2. 在 index.js 中引入 1.less 文件import "./css/1.less"3. 自动打包的时候提示了错误提示缺少一个合适的 loader 来处理 .less 文...

原创 13.webpack加载器-打包处理css文件

1. 创建 src\css\1.css 文件li { list-style: none;}2. 在 index.js 中引入 1.css 文件import "./css/1.css"3. 自动打包的时候提示了错误提示缺少一个合适的 loader 来处理 .css 文件4. 安装 loadernpm i -D style-loader css-loader5. 解...

原创 12.webpack-配置自动打包相关的参数

修改启动脚本打开 pageage.json 文件 修改 dev 的配置"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"关闭并重新运行每次修改了 webpack 的配置文件 webpack.config.js 文件 都需要重新运行npm run dev浏览器会自动打开...