weixin_46337813的博客

原创 记录。。。。

1、token的增删查的封装，在一个js文件中getToken、setToken、removeToken有的是Cookies存储，有的是localStorage的存储，都是本地存储，所以对token的存储都是对本地存储的一种操作import Cookies from 'js-cookie'const TokenKey = 'Admin-Token'export function getToken() { return Cookies.get(TokenKey)}export

原创 前端 后台管理项目 路由权限控制

1、封装获取token做法import Cookies from 'js-cookie'const TokenKey = 'Admin-Token'export function getToken () { return Cookies.get(TokenKey)}export function setToken (token) { return Cookies.set(TokenKey, token)}export function removeToken () {

原创 封装switch组件

参数支持：v-model、name、activeClolor、inactiveVColor事件支持：change1、使用v-model封装，通过props接受value，当点击switch时触发事件进行切换handelClick(){ this.$emit('input',!this.value)}2、修改开关颜色：mounted的时候和修改value的时候setColor(){ if(this.activeColor||this.inactiveColor){ let

原创 微信网页开发配置右上角分享朋友

微信网页开发，使用js/sdk刚进入网页，请求一个接口获取参数配置wx.config async getSDK() { let href = window.location.href.split("#")[0] let { data, errors } = await JssdkConfig(href) if (!errors) { wx.config({ debug: false, appId: data.Jssdk

原创 封装input组件的示例

<template> <view> <view> <input :type="type" :value="value" :name='name' :disabled="disabled" :placeholder="placeholder" @input="handelInput" @focus='focus' @blur='blur' @confirm='confirm' />...

原创 封装dialog组件思路记录

封装对话框结构：最外面的div是遮罩层，固定定位，有个透黑的底色，在遮罩div的里面是对话框，对话框的结构是头部、内容部分和底部，是上中下的结构。动态控制对话框的宽度和距离顶部的位置：组件通过props接收width(默认50%)和top(15vh) :style='{width,marginTop:top}'头部结构：分为左右，左边是标题，右边是关闭按钮.动态控制头部标题，有俩个方案：传入title，动态改变标题，第二是传入动态的标签，所以需要预留一个slot占位符（插槽），name为ti

原创 前端公众号有个功能要实现保存到通讯录

要实现保存信息到通讯录功能，需要后端遵循vcard格式生成一张二维码，识别二维码跳转到第三方页面，点击保存可以实现保存到通讯录的功能关于vcard的介绍可以看看这篇文章二维码名片的格式 - vcard_祝紫山（大可山人）博客[GDI+,WPF, .Net图形图像]-CSDN博客...

原创 vue前端路由总结

1、router-link组件：属性：1、to='/home'跳转的路径或者路径对象2、:replace='true' 压栈3、active-class='router-link-active'在router的配置对象中配置类名linkActiveClass:'current'默认类名：.router-link-active{}2、js代码进行路由跳转1、router.push()2、router.replace()3、动态路由：路由配置：当前路由对象..

原创 前端路由模式

hash模式：浏览器url上有#取地址栏的东西：location对象href属性进行获取和页面跳转和刷新页面借助 location.hash='/home' 可以改变#后面的路径借助hash进行路径的跳转，实现无页面刷新改变路径优点：1、兼容性好，兼容到ie8及以上2、刷新不会进行http请求history模式：浏览器url上没有#利用h5新推出的api：有入栈出栈压栈history.pushState(data，title，url)history.replace

原创 uniapp 微信小程序端echarts扇形图

github地址：https://github.com/yah0130/echarts-wx-uniapp插件地址：echarts-for-wx - DCloud 插件市场具体流程参考github或者插件文档效果图主要代码：<template> <view> <uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-c...

原创 记录发现：富文本

小程序富文本能力的深入研究与应用 | 微信开放社区

原创 关键词高亮/搜索结果高亮

参考插件：关键词高亮/搜索结果高亮 - DCloud 插件市场

原创 推荐：uniapp 搜索+选择组合框

下拉搜索选择组合框 - DCloud 插件市场

原创 v-model封装自定义组件可以实现prop的双向数据

1、在子组件的props接收value，在修改value值的方法上触发this.$emit('value',新的值)2、在父组件使用v-model来传值

原创 vue .sync 修饰符

自定义事件 — Vue.js.sync修饰符2.3.0+ 新增在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件两侧都没有明显的变更来源。这也是为什么我们推荐以update:myPropName的模式触发事件取而代之。举个例子，在一个包含titleprop 的子组件中，我们可以用以下方法表达对其赋新值的意图：this.$emit('update:title', newTitle...

原创 修改组件样式：css深度选择器

scss的深度选择器：::v-deepless的深度选择器：/deep/css的深度选择器：>>>用法：在css的类名之前直接添加深度选择器示例：::v-deep .box { height: 330rpx; background: #FFFFFF;}

原创 uniapp 微信小程序日历显示日程

记录一下

原创 微信小程序跳转公众号

步骤： 新建一个页面使用web-view组件链接到公众号的文章微信规则只有小程序关联的公众号里的文章可以长按识别二维码<template> <view> <!--微信规则只有小程序关联的公众号里的文章可以长按识别二维码--> <web-view src="https://mp.weixin.qq.com/s/YLGcDiWp8_asnQTb_tDtLQ"></web-view> </view>&lt

原创 微信小程序 map地图使用

以下代码是主要的代码片段<!-- 地图部分 --> <!-- enable-traffic 显示路况 --> <view class="map_container"> <map id='customerMap' class="map" :longitude='longitude' :latitude='latitude' :scale='scale' :markers='markers' :controls="controls" :...

原创 uniapp 微信小程序端选择exec文件

uni.chooseMessageFile({ count: 1, type: 'file', success: (res) => { const path = res.tempFiles[0].path let size = res.tempFiles[0].size; let filename = res.tempFiles[0].name; if (filename.indexOf(".xls") == -1) { uni.showModal({ title.

原创 wx.openDocument()如何设置标题

关键： 在downloadFile api添加参数filePath: wx.env.USER_DATA_PATH + "/" + this.data.filename,uni.downloadFile({ url: url, filePath: wx.env.USER_DATA_PATH + "/" + '客户数据导出.xlsx', success: function(res) { console.log('downloadFile', res); ..

原创 微信小程序使用腾讯地图

　官方文档：http://lbs.qq.com/qqmap_wx_jssdk/index.html步骤：申请开发者密钥（key）：申请密匙 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.0 安全域名设置，需要在微信公众平台添加域名地址https://apis.map.qq.com 小程序示例 // 引入SDK核心类var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');var qqmapsdk;

原创 safe-area-inset-bottom

顺序不要乱padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);

原创 微信小程序报错：request:fail url not in domain list

原创 微信网页开发 /JS-SDK说明文档

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#2

原创 HTML5 Canvas

<canvas> 标签定义图形，比如图表和其他图像，必须使用脚本来绘制图形。什么是 canvas?HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。浏览器支持IE 9、Firefox、Opera、Chrome 和 Safari 支持 <canvas> 标签

原创 关于微信公众号 h5端视频部分机型不能自动播放的讨论

https://segmentfault.com/q/1010000022492677

原创 uniapp 使用百度ai智能识别保单文档

https://cloud.baidu.com/doc/OCR/s/Wk3h7y0eb

原创 富文本解析器uParse优化版

插件地址：https://ext.dcloud.net.cn/plugin?id=1279

原创 uniapp 获取当前的地理位置

1、在 manifest.json中配置 permission"permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" }}, // 获取经纬度 uni.authorize({ scope: 'scope.userLocation', success() { uni.getLocation({ type: 'gcj02', //返回可以用于uni.openLocat.

原创 收藏：头像上传裁切/剪切组件

插件地址：https://ext.dcloud.net.cn/plugin?id=5784效果图

原创 hbuilder 格式化时 遇到花括号的代码会换行

菜单【工具】【插件配置】【format】【jsbeautifyrc.js】 修改brace_style，为collapse,preserve-inline 重启HBuilderX

原创 scroll-view里的元素设置margin-top属性，出现滚动条

<scroll-view scroll-y="true" style='height:{{winHeight - 100}}px' class='scrollcolumn'> <view style="content: ''; overflow: hidden;"></view>//由margin-top 垂直方向塌陷导致的，加一个空元素就好了 <view></view> </scroll-view>...

原创 uniapp h5端tab页有input当它获得焦点，安卓底部的导航栏被弹起的解决办法

resize() { this.clientHeight = `${document.documentElement.clientHeight}px`; window.onresize = () => { const clientHeight = `${document.documentElement.clientHeight}px`; const tarbar = document.getElementsByClassName('uni-tabbar')[0].

原创 2021/08/09 工作纪录

1、 头像裁剪组件https://ext.dcloud.net.cn/plugin?id=24982、踩坑：H5复制uniapp有个方法uni.setClipboardData()是用来剪切复制文本内容的，但是我们会发现没办法兼容H5我们需要用到新的写法:export const h5copy=(content,showtoast)=>{ let result let textarea = document.createElement("textarea") textare.

原创 微信小程序 选择地址

原创 前端：浏览器工作流程梳理

一次完整的HTTP服务过程1、对网址进行DNS域名解析，得到对应的ip地址2、根据IP地址，找到对应的服务器，发起TCP的三次握手3、建立TCP连接后发起HTTP请求4、服务器响应HTTP请求，浏览器得到html代码5、浏览器解析html代码，并请求代码中的资源（如js、css、图片等）6、浏览器对页面解析渲染呈现给用户7、服务器关闭TCP连接浏览器解析html代码，并请求代码中的资源（如js、css、图片等）浏览器拿到html文件后，就开始解析其中的html代码..

原创 2021-07-22 es6梳理

介绍：技术问题：1、js深浅拷贝、事件代理事件委托事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。window.onload = function(){ var oBox = document.getElementById("box"); oBox.onclick = function (ev) { var ev = ev || window.event;

原创 JavaScript 严格模式(use strict)

JavaScript 严格模式(use strict)JavaScript 严格模式（strict mode）即在严格的条件下运行。使用 "use strict" 指令"use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。"use strict" 的目的是指定代码在严格条件下执行。严格模式下你不能使用未声明的变量。注意 支持严格模式的浏览

原创 uniapp 内容区域距离底部的距离

官网文档：https://uniapp.dcloud.io/frame?id=css%e5%8f%98%e9%87%8f示例css样式：.nologinmask { position: fixed; top: 260rpx; bottom: var(--window-bottom); left: 0; right: 0; z-index: 999; }效果：...