2020年07月_qq_36437172

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 02月 01月

原创 Taro 常见规范和语法特性、常用 API 以及避坑指南

一、Taro 规范在 Taro 组件中会包含类静态属性、类属性、生命周期等的类成员，其书写顺序最好遵循以下约定（顺序从上至下）。static 静态方法 constructor componentWillMount componentDidMount componentWillReceiveProps shouldComponentUpdate componentWillUpdate componentDidUpdate componentWillUnmount 点击回调或者事件回调

2020-07-26 21:47:01 1311 2

原创 Taro 全局数据状态管理

我们一说到全局数据状态管理时，对于 Vue 框架，或许你想到的是 Vuex；对于 React 框架，或者你想到的是 Redux；在微信小程序中，globalData 内定义全局使用变量；而在 Taro 小程序中，使用 Redux 进行全局变量管理时，但是对于一些小型的应用，Redux 就可能显得比较重了。使用对象做全局状态管理其实就是跟本地 storage 设置缓存和获取缓存是一个道理。你可以定义一个对象来使用全局变量，代码如下：const globalData = {};export co

2020-07-26 16:45:06 6048

转载前端常用的工具方法

1.邮箱export const isEmail = (s) => { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)}2.手机号码export const isMobile = (s) => { return /^1[0-9]{10}$/.test(s)}3.电话号码export const isPhone = (s) => {...

2020-07-19 22:28:00 777

原创 Vue2.4 v-bind=“$attrs” 和 v-on=“$listeners“ 实现多级组件嵌套通信

生活需要时时的小惊喜，代码需要常常的新想法。给波澜不惊的生活，增加了一丝绚丽多彩的意义。需求描述：在功能设计开发过程中，message 组件是 list 组件的父组件，list 组件是 item 组件的父组件。我们从 message 组件中传递一个属性到 list 组件，再由 list 组件中传递给 item 组件。对于这种组件嵌套多层的数据传递如何避免一层一层地传递呢？在父子组件间进行数据通信，父组件通过 props 传递数据给子组件，子组件通过 emit 发送事件传递数据给父组件，这两种方.

2020-07-19 17:58:22 677

原创 webSocket 实现消息推送、心跳、已读消息、加载更多等功能

beforeMount生命周期内，初始化webSocket信息。initWebSocket方法中，初始化webSocket。this.socket=newSocket('ws://192.168.11.198:12000/msg',{userId:store.getters.userInfo.userId,token:Cookies.get(ACCESS_TOKEN),sysCode:'000',})在文件中，引入socket.js文件（webS...

2020-07-18 00:12:38 3534

原创 Vue 视图不更新问题

问题描述：当我们数据改变时，对应的视图没有改变，Vue 2.x 提供this.$set 进行强制更新视图。由于在页面回显 select 组件数据时，我们对 select 组件进行下拉修改数据时，页面好像出现了卡顿，数据在页面中无法更新，使用 this.$set 后，页面中的数据依然没有更新。解决方案：运用this.$forceUpdate() 强制刷新页面，进行视图层重新渲染即可。...

2020-07-14 23:33:23 296

原创 element-ui 表单校验之根据不同的选项，动态添加校验不同的表单项

需求描述：根据不同的运输方式，添加不同的校验字段。那么我们如何添加校验规则呢？首先我们可以根据不同的运输方式，把对应的校验字段显示在页面上。<el-formref="form":rules="getRules":model="baseForm"label-width="120px"><el-row:gutter="20"><el-colv-if="baseForm.assignTransportType===...

2020-07-14 23:10:34 3426

转载 element-ui 表单报错 Cannot read property ‘clearValidate‘ of undefined“

因为 Dom 没有加载完成，导致获取不到refs元素，报错 Cannot read property ‘clearValidate‘ of undefined“。可用以下方法解决this.$nextTick(()=>{ this.$refs['addForm'].clearValidate();})

2020-07-14 22:13:58 7373 3

原创 JS 读取本地 excel 文件转为 base64 上传至服务器

需求描述：一般使用multipart/form-data 请求头上传文件，由于上传服务器在内网的限制，配合后端的同事要求，需要将文件转换为 base64 字符后上传至服务器。首先来介绍 element-ui 的 upload 上传组件。<el-upload ref="upload" action="placeholder" accept="xtl" :http-request="handleHttpRequest" :before-upload="handleBefor.

2020-07-13 23:36:16 4210 2

原创 element-ui 循环表单，根据不同的条件，添加动态表单校验功能

需求：根据用户的选择的运输方式，动态改变输入框的输入条件，并且整个表单是可以循环添加多项，实现对数据批量校验。效果图如下：首先，表单可以新增加，则是一个循环表单；给 el-form-item 加上 prop 属性，对每一组中的这一项都进行校验。<div v-for="(k,index) in formData.lists"> <template> <el-form-item label="运输方式" :prop="'list

2020-07-12 21:43:00 3757 4

原创高德地图的开发和常用 API 的使用

1.引入高德地图的API文件<scripttype="text/javascript"src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>2.创建地图容器在你想要展示地图的页面中，创建一个div容器，并制定id标识：<divid="container"/>同时制定容器大小。#container{width:300px;height:...

2020-07-12 17:34:58 1558

原创小程序如何实现订阅消息

小程序消息推送小程序模板消息接口将于2020年1月10日下线，开发者可使用订阅消息功能。步骤一：获取模板ID在微信公众平台手动配置获取模板ID：登录https://mp.weixin.qq.com获取模板，如果没有合适的模板，可以申请添加新模板，审核通过后可使用。步骤二：获取下发权限wx.requestSubscribeMessage({tmplIds:['FSwmRTbgz5by1sNZwtr6mpTSAPmVyLJurpQ_qlHgSB4'],...

2020-07-12 16:57:15 3163

转载 Visual Studio Code 装饰器提示“experimentalDecorators”的解决办法

对修饰器的实验支持功能在将来的版本中可能更改。在 "tsconfig" 或 "jsconfig" 中设置 "experimentalDecorators" 选项以删除此警告。

2020-07-07 22:59:27 544

转载 Expected the Promise rejection reason to be an Error 的解决方法

问题描述：使用 eslint 出现Expected the Promise rejection reason to be an Error 的问题。handleGeocoder(address){ returnnewPromise((resolve,reject)=>{ geocoder.getLocation(address,(status,result)=>{ if(status==='complete'&&re...

2020-07-07 22:11:43 12100 2

原创高德地图点击不同的标记，动态传入参数创建信息窗体

varstartMarker=newAMap.Marker({position:path[0],icon:getOriginIcon(),map:mapMethods,})varendMarker=newAMap.Marker({position:path[path.length-1],i...

2020-07-06 22:32:19 3030

转载 Vue Route 路由的使用

使用路由的时候有两个必要的知识：<router-link/>：这个相当于a标签，点击的切换时候的按钮<router-view/>：这个就是你加载过来的组件放的位置使用方法：1、cnpminstallvue-router--save下载路由2、在main.js里面引入路由：importrouterfrom'./router'导出路由：newVue({ el:'#app', router, rend...

2020-07-05 23:19:58 540

原创上传图片到阿里云 OSS

1.在 index.html 中引入 OSS。<scriptsrc="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js" />2.配置参数说明1）AWconfig为阿里云图片地址配置，基本结构如下，注意至少要包含一个键名为'aliyunConfig'的对象：{ "aliyunConfig": { "endpoint":"https://example1.aliyuncs.com/", "b..

2020-07-05 23:04:07 922

转载 Taro 修改对象中某个属性的值

方法一：this.setState((preState)=>{ preState.current=e.detail.value; }, () => { console.log(this.state.current);})方法二：let data = { ...this.state.data, name:'zhangyunlei'}this.setState({ data})

2020-07-05 22:30:42 1455

原创基于阿里云 OSS 下载图片跨域问题

问题描述：我们通过 URL 图片连接下载图片至本地，产生图片请求异常：No 'Access-Control-Allow-Origin' header is present on the requested resource。我们通过 XMLHttpRequest 加载外部图片文件//图片下载download(row){const$that=thisconstimgUrl=row.fileUrlletxhr=newXMLHttpRequest()x...

2020-07-05 19:28:20 4665

原创 element-ui Table 组件点击一行展开

询报价管理列表修改对element-uiTable组件进行展开/收缩icon添加到状态为报价中的选项中。1.首先取消点击展开/收缩icon，改为点击整行列表进行展开/收缩。添加整行点击事件row-click:<el-tableref="enquiryUnfinished"border:data="searchList.rows":row-class-name="tableRowClassName"...

2020-07-05 16:39:44 2392

原创 Taro 小程序路由跳转传参问题

点击列表返回到上一页，并且传参。src/packageCarrier/pages/addConsignee/index.jsclassClientextendsComponent{render(){constlist=this.state.listconsttype=this.state.typereturn(<View><ViewclassName="list"...

2020-07-05 16:39:08 5324

转载 element-ui message 显示重叠问题

问题描述：在同一个方法中，触发了多个 message 组件提示信息时，会出现消息重叠的问题。解决方案：将方法定义为async异步函数，然后使用await等待执行。async checkLogin () { if (this.username === '') { await this.$message.warning('请输入用户名') } if (this.password === '') { await this.$message.warning('请输入用户...

2020-07-05 16:37:38 7894 8