- 博客(53)
- 收藏
- 关注
RSS订阅原创 Warning: Received `true` for a non-boolean attribute `xxx`
在设置属性的值，使用了三元表达式<CreateForm isedit={props.isEdit ? true : false} />发现报错：Warning: Received `true` for a non-boolean attribute `isedit`. 接收到非布尔属性原因：React对boolean类型的attribute的识别方式问题解决方案：可以使用1和0的方式来代替true和false。githuab：https://github.com/...
2020-10-26 19:39:32
11995
原创 vue-cli3移动端适配 postcss-px2rem
设置页面根节点的字体大小，然后通过px2rem做转换，这样在写样式的时候，直接使用px就可以，不需要自己计算安装npm i postcss-px2rem项目配置文件中添加cssloadermodule.exports = { css: { loaderOptions: { postcss: [ require("postcss-px2rem")({ remUnit: 1
2020-07-21 15:31:56
798
1
原创 taro开发微信小程序 -- 下拉刷新和上拉加载
参考文档：https://taro-docs.jd.com/taro/docs/tutorial#%E9%A1%B9%E7%9B%AE%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84其实和微信小程序一样，只要设置页面配置信息并添加对应函数即可class Index extends Component { // 添加小程序页面配置信息 config: { enablePullDownRefresh: true, onRea.
2020-07-01 11:31:49
3020
原创 Taro多行文本省略不生效
使用Taro框架编译成小程序发现多行省略不生效。。。多行文本省略：.textHide { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; text-overflow: ellipsis; overflow: hidden;}经过Taro编辑后小程序端少了-webkit-box-orient:vertical; 这条样式属性应该是样式css被编译后某些样式..
2020-06-29 15:38:17
1328
2
原创 vue自定义全局组件 - 提示框组件
组件挂载在Vue原型上，通过调用方法显示隐藏提示框，并定义了三种状态：加载、警告及成功定义组件Toast.vue<template> <div class="toast-container" :class="{ 'toast-none-icon': icon=='none' }" v-if="show"> <template v-if="icon!=='none'"> <!-- 加载loading --> <
2020-05-14 22:43:38
1181
原创 饿了么el-upload上传图片限制图片尺寸、大小、格式
饿了么中的Upload组件已经提供了限制用户上传的图片格式和大小，在此又新加图片的尺寸<el-upload class="avatar-uploader" action="" :show-file-list="false" :before-upload="beforeAvatarUpload"> <img v-if="imageUrl" :src="im...
2020-03-15 21:52:45
8722
1
原创 vue-awesome-swiper自定义分页器样式
使用方法：https://www.npmjs.com/package/vue-awesome-swiper安装并注册（全局or组件内）<template> <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"> <!-- slides --> ...
2020-03-07 23:42:46
4569
原创 小程序-map路线规划
需求 获取出发点和目的地的距离、步行时间及路线规划原理采用微信小程序的map组件进行路线展示 腾讯地图的 微信小程序SDK 获取规划路线的坐标点wxml<view class="container"> <map longitude="{{longitude}}" latitude="{{latitude}}" polyline='{{polyl...
2019-12-19 15:44:07
732
原创 小程序父组件触发子组件方法
小程序中有一个横向导航菜单，点击不同选项去加载不同的自定义组件，有些菜单选项所对应的组件是相同的，这时候发现点击这些选项进行切换的时候数据并没有发生变化。原因：因为组件在上一次已经加载完成了，而组件中数据初始化操作（initData方法）是放在ready中的，所以并不会触发初始化解决：小程序官方文档中，生成的组件实例包含一些属性和方法，可以用selectComponent方法选中组件实例...
2019-10-30 18:00:15
4169
原创 小程序--模拟@人的功能
小程序需求：可以像微信群聊一样@某个人或多个人功能：输入框输入@符号（index.wxml），跳转至可以@人的页面（select.wxml）实现思路：1、监听input的输入，判断是否有@符号输入2、拿到选中人的名称3、设置input的光标位置代码：index.wxml<input placeholder='请输入文字' placeholder-class=...
2019-10-24 17:26:50
1220
1
原创 vue使用elementUI打包后字体图标丢失问题
vue+elementUI构建的项目，打包后发现弹窗信息的图标丢失了，控制台显示找不到字体文件解决方法：打包配置文件build目录下webpack.base.conf.js文件添加（vue-cli构建项目会有的）utils.js文件添加 publicPath:'../../'重新打包结果：...
2019-10-10 17:20:37
1994
原创 小程序左滑删除功能
很多列表信息都会存在左滑出现删除等操作，就像QQ里的一样实现方式：通过小程序中的触摸事件来改变对应列表的样式wxml<view class='team-list'> <block wx:for='{{memberList}}' wx:key=''> <view class='team-item {{item.isMo...
2019-09-28 18:46:21
363
原创 小程序自定义导航栏
小程序可以在页面的json文件中去配置导航栏相关的内容，如导航栏的标题等，但是这些内容是固定的。有时候我们需要其他的一些东西，比如下图，此时需要我们去自定义导航栏1. 在页面的json文件中添加属性navigationStyle为custom{ "navigationStyle": "custom"}2. 获取导航栏相关的值因为不同手机顶部部的系统状态栏的高度可能不...
2019-08-23 18:02:45
790
原创 小程序点击tabbar事件
对于小程序中的每个页面，都需要在页面对应的js文件中调用Page方法注册页面示例，指定页面的初始数据、生命周期回调、事件处理函数等。详细请看官方：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html其中页面事件中有onTabItemTap事件，表示点击tab时触发此事件，但是必须保证当前页是ta...
2019-07-26 13:52:22
14522
原创 小程序嵌套组件中孙子组件之间的传值
之前做了无限嵌套的树形结构的功能，其实就是自定义组件嵌套的原理，现在新增需求：点击树图的某项，显示一个祖先组件中已经隐藏了的选项结构。一开始想到了组件之间的传值，做了之后发现问题来了，点击第一层级的组件也就是子组件是没问题的，点孙子组件及其子代发现没有任何效果，通过打印发现根本就没有触发祖先组件中绑定的事件。原来小程序是不支持跨组件传值的，只能一层一层的传，子组件传递给父组件。比如A是引用嵌套...
2019-06-13 17:41:49
4366
4
原创 小程序实现树形菜单以及折叠效果
实现原理：利用自定义组件递归使用，也就是自定义组件自引用因为树状图的数据是从后台获取的，没有办法知道具体层级，但是他们的结构都是相同的，所以在自定义的组件中再去引用自身来实现需求1.先写好树形菜单的样式结构，可以自定义假数据，将静态写好2.自定义components，将写好的样式结构丢进去，子元素重复的结构就不需要了3.父组件传递数据，自定义组件进行操作可以去官网看看组件使用：...
2019-06-13 10:23:13
8319
6
原创 小程序实现书籍翻页效果
做的小程序中突然加了一个相册，要求相册可以点击实现翻页，web能实现这种翻页效果的插件有很多，如turn.js，类似这种插件基本都是基于jQuery的，但是小程序是不支持jQ的。参考了网上大佬的代码，实现了一个最简单的翻页效果基本结构：<view class='container'> <view class='page_first'>家谱相册，点击图片翻页...
2019-06-12 18:26:04
15896
17
原创 小程序动态设置导航栏标题
一个商城类的小程序，点击不同分类进入列表页面，但是每个列表的导航标题根据分类不同而改变。小程序提供了和导航栏相关的API（https://developers.weixin.qq.com/miniprogram/dev/api/ui/navigation-bar/wx.setNavigationBarTitle.html）Page({ data:{}, on...
2019-06-06 17:39:53
3022
原创 CSS文本溢出省略（单行和多行）
在页面中经常见到带省略号（...）形式的标题1、单行省略CSS中只需要添加3个样式属性就可以了.textHide1{ text-overflow:ellipsis; /* 文字溢出显示方式 */ white-space:mowrap; /* 空白符处理,nowrap禁止换行 */ overflow:hidden;}2、多行省略....
2019-06-06 10:47:57
220
转载 js判断用户有没有操作页面
用户有没有操作界面，我们可以从页面在规定时间内有没有触发事件去考虑。比如用户有没有点击，有没有按键，有没有滚动鼠标滚轴。用户有没有移动鼠标等等。如果用户没有进行这些操作，那么我们可以大概的认为用户没有操作页面。我们可以给一个定时器。来记录在规定时间内用户有没有触发这些事件。window.onload=function(){ // 将方法添加到window对象上 (func...
2019-06-04 18:39:41
5633
1
原创 小程序view和text组件自动换行
突然碰到的问题：小程序中view和text组件并不能让文本自动换行web页面经常是遇到不让文本换行，所以不能换行立刻想到强制换行word-break和word-wrap。只要在wxss给view和text加上word-break:break-all就可以实现自动换行了...
2019-05-28 18:41:05
14238
1
原创 小程序图片裁剪we-cropper的使用
小程序涉及到了用户上传头像的功能，用户可以手动选择裁剪区域。（1）上传头像页面选择图片，将得到的src地址传递到图片裁剪页面wx.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['album', 'camera'], success: function(res) { ...
2019-05-27 16:05:06
9276
12
原创 原生小程序，使用Promise简化接口
Promise是异步编程的一种解决方案，比传统的解决方案--回调函数和事件--更强大。而且通过ES6的Promise对象，可以将嵌套的异步操作，改为线性的展现形式，在逻辑上更为清晰。小程序的框架，如wepy框架，可以安装配置Promise，可以将所有的异步API Promise化，也就是说所有的异步API都可以使用Promise写法；而原生小程序内部已经引入了Promise，在开发工具中...
2019-05-21 15:10:57
703
原创 小程序切换tab页面不执行onLoad解决
用户一开始进入到小程序的首页，在首页列表中通过navigateTo跳转新页面进行一些操作，然后通过switchTab返回首页。发现跳转首页后数据并没有发生变化，在调试里面可以看到通过switchTab跳转到首页之后，页面并没有执行onLoad操作，所以数据和未授权之前相比是一样的。解决：（1）通过getCurrentPages（）获取页面栈来进行操作wx.switchTab({ ...
2019-04-04 14:33:39
14969
4
原创 setTimeout和setInterval的第三个参数
对于定时器来讲，在很多场景都会用到，比如在一秒后出现弹窗setTimeout(function(){ alert('弹窗');},1000)但是在看Promise对象的时候发现这样一段代码这里的 'done'参数搞得有点懵，而且执行代码后也打印出来done。找到setTimeout的用法，发现setTimeout不止两个参数定时器启动时，第三个及以后的参数是...
2019-03-25 17:39:35
752
原创 js中set和get方法
get和set的使用方法：1. get和set是方法，因为是方法，所以可以进行判断2. get一般是要返回的；而set是设置，不用返回3. 如果调用对象内部的属性约定的命名方式是变量名前加_var p={ _age:18, get age(){ return this._age; }, set age(val){ t...
2019-03-25 15:06:55
17258
原创 ES6特性：对象的扩展
对象（object）是JavaScript重要的数据结构，ES6对它进行了很大的改善。（1）属性的简洁表示法ES6允许直接写入变量和函数，作为对象的属性和方法。ES6允许在对象之中直接写变量。这时属性名就是变量名，属性值就是变量值。同时方法也可以简写，如果是Generator函数，前面需要加上星号。const foo='aa';const baz={foo};baz ...
2019-03-25 11:31:19
161
原创 ES6特性：数值新增方法
ES6在Number对象上，提供了新的方法去操作数值。（1）Number.isFinite（）：用来检测一个数值是否为有限的（finite），即不是Infinity。返回布尔值如果参数类型不是数值，一律返回false。Number.isFinite(15); // trueNumber.isFinite(NaN); // falseNumber.isFinite(In...
2019-03-19 17:52:22
260
原创 ES6特性：Map数据结构
Javascript的对象，本质上是键值对的集合，但是传统上只能用字符串当作键。ES6提供了Map数据结构，它类似于对象，也是键值对的集合，但是"键"的范围不限于字符串，各种类型的值（包括对象）都可以当作键。let m=new Map();let o={p:'key'};m.set(o,'aaa');m.get(o); // 'aaa'作为构造函数，Map也可以接受一个数...
2019-03-19 11:14:39
1299
原创 小程序自动更新版本
已经上线了的小程序，现在有新的版本上传，发现手机已经使用了该小程序的没有及时更新。看了一下官方的文档，发现有管理小程序更新的API。小程序启动会有两种情况，一种是【冷启动】，一种是【热启动】。假如用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台，这个过程就是热启动；冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程...
2019-03-15 16:45:19
5771
1
原创 ES6特性：Set数据结构
ES6提供了新的数据结构Set。类似于数组，但是成员的值是唯一的，没有重复的值。用法Set本身是一个构造函数，用来生成Set数据结构。Set函数可以接受一个数组（或者具有iterable接口的其他数据结构）作为参数const s=new Set();[1,2,3,1,1,4].forEach( v => s.add(v) );console.log(s); // {1...
2019-03-14 10:27:48
226
原创 ES6特性：Symbol类型
ES5中有6中数据类型：undefined、null、Boolean、String、Number、Object；ES6引入了一种新的原始数据类型：Symbol，表示独一无二的值。ES5的对象属性名都是字符串，这很容易出现属性名的冲突。如果你使用了一个别人提供的对象，现在想为这个对象添加新的方法，新方法的名字就有可能和现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的，这样就从根...
2019-03-13 14:35:29
370
原创 ES6特性：箭头函数
ES6允许使用"箭头"（=>）定义函数。基本语法：参数=>函数体var f = v => v; //等价于var f = function(v){ return v;};如果箭头函数不需要参数或需要多个参数，需要使用（）括起来var f = () => 1; //等价于var f = function () { return 1 }...
2019-03-12 18:01:32
393
原创 ES6特性：模板字符串
模板字符串相当于加强版的字符串，用单引号 ` 标识。它可以当作普通普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量或表达式。// 普通字符串let str=`hello'\n'world`; // hello// world// 多行字符串let str=`hello,this is a string`;// hello,// this is a stri...
2019-03-11 17:43:39
2035
原创 ES6特性：变量解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。他是一种针对数组或者对象进行模式匹配，对其中的变量进行赋值，只要等号两边的模式相同，左边的变量就会被赋值。解构模型解构的源，解构赋值表达式的右边部分；解构的目标，解构表达式的左边部分数组模型的解构let [a,b,b]=[1,2,3]; // a=1 b=2 c=3可嵌套let [a,[...
2019-03-06 16:44:07
154
原创 ES6特性：字符串新增方法
字符串识别ES6 之前判断字符串是否包含子串，用 indexOf 方法，ES6 新增了子串的识别方法。ES6新增三种方法（1）includes()：返回布尔值，判断是否找到参数字符串（2）startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部（3）endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部三个方法都可以两个参数 -- 需要查找的字符串...
2019-03-06 16:43:59
153
原创 ES6特性：let 和 const命令
ES6新增let命令，用来声明变量。（1）用法类似于var，但是let声明的变量，只在let所在的代码块内有效。{ var a=1; let b=2;}console.log(a); // 1console.log(b); // 报错 b is not definedfor (let i = 0; i < 10; i++) { }co...
2019-03-02 17:00:07
180
原创 ES6特性：Spread操作符
Spread操作符（...），又称展开操作符，可以将可迭代的（Iterable）对象展开例1：将数组A插入到数组B中，可以通过Spread操作符var A=[1,2,3];var B=["a","b",...A,"c"]console.log(B); // B为["a","b",1,2,3,"c"]通过Spread操作符对数组A进行展开，就可以将A数组中的元素变成B
2019-03-02 14:55:31
1042
原创 小程序富文本解析
项目中有很多地方需要解析后台填写的富文本内容，小程序提供了富文本解析的组件 rich-text ，但是有很多限制。（https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html）所以找到了wxParse插件解析html使用方法：1.在github下载 （https://github.com/i...
2019-02-22 16:12:15
526
原创 小程序分享功能
小程序提供了分享的功能，可以分享整个小程序，也可以自定义分享的内容onShareAppMessage在Page中定义了onShareAppMessage函数，可以设置该页面的分享信息只有定义了此事件处理函数，右上角菜单才会显示“分享”按钮 用户点击分享按钮的时候会调用 如果需要点击页面其他位置实现分享，需要使用button组件（设置open-type为share） 此事件需要 r...
2019-02-22 14:26:00
440
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人