- 博客(69)
- 收藏
- 关注
RSS订阅原创 setData 数据传输长度为 1482 KB，存在有性能问题！（非常规方法）
如果你试过其他博文的方法都不行的话，你看看你wxml绑定的办法中是否有用到类似的传参方式：<view bindtap="test(JSON.stringify({index:index,list:list}))"></view>我是通过uni-app编译成的小程序，写法如下<view>@tap="test(JSON.stringify({index:index,list:list}))"</view>其中list是数据列表，index是遍历list
2020-07-09 18:58:32
9182
原创 如何在普通Html中实现类似小程序中的 rpx 动态单位自适应效果
我们知道小程序 css 有个rpx单位，它是默认屏幕宽度是750rpx，不区分屏幕分辨率如何从设计稿的px转为rpx，计算方法是：css高度(rpx) = 设计稿高度/ (设计稿宽度/750)css宽度(rpx) = 设计稿宽度/ (设计稿宽度/750)同理：普通 html 中基准宽度是 100vw，那么css高度(vw) = 设计稿高度/ (设计稿宽度/100)css宽度(vw) = 设计稿宽度/ (设计稿宽度/100)字体也可以这样计算，单位都是vw，这里的vw效果跟小程序的rpx效果一
2020-06-18 14:29:22
3248
转载 js 正则提取地区/地址字符串中的省份、城市、区、县等信息
直接上代码，一看就懂， 一般国内地址返回Array前三项就是省市县，若要扩展到社区、街道等可自行扩展。var add1 = '四川省成都市都江堰市天马镇34号';var add2 = '北京市北京市东城区前门大街1号'var add3 = '新疆维吾尔自治区乌鲁木齐市天山区中山路479号';var add4 = '四川省成都市双流县幸福社区23号';var add5 = '香港特别行政区中西区尖沙嘴路';var reg = /.+?(省|市|自治区|自治州|县|区)/g;console.log
2020-05-13 19:16:28
9135
5
原创 css如何实现整体两边对齐，末尾元素左边对齐，类似九宫格最后少了一格
实现如下图效果（两边间距为0，中间有间隔）有两种方法：方法一：采用 flex 布局，然后最后少了补齐一个容器占位这里假如有5个项目，可以采用3n-1的计算方式来判断是否需要添加F盒子，这样不会导致最后两个元素左右对齐<view class="list-box"> <view class="item">A</view> <view class="...
2020-03-26 20:06:23
1323
原创 微信小程序中的Map结构使用Object.keys(map).length获取长度失效
普通 js 中的 Maplet a = new Map()a.set(1,{name:'cat'})console.log('1=',a) // 1= Map {_c: Map(1)}console.log('2=',Object.keys(a).length) // 2= 1console.log('3=',a.size) // 3= 1微信小程序中的 Maplet a = ne...
2020-03-25 22:42:27
2067
原创 如何将 swich 中的不同 case 合并，两种 case 执行的逻辑一样，以及范围取值
合并两种 case可以这样写：swich(n) { case 100: case 200: console.log('n 的值为 100 或 200 时会走这里'); break; case 300: // 其他逻辑 break;}判断取值范围 let a = 80 switch (true){ case a<60: console.log(...
2019-11-14 17:44:29
3167
原创 高性能JavaScript笔记之数据存取 （下）
什么是对象成员对象成员包括属性和方法。当一个被命名的的成员引用了一个函数，该成员就被称为一个“方法”，相反，引用了非函数类型的成员就被成为“属性”。对象成员可以分为两类，实例成员（也成为 own 成员）和原型成员，实例成员直接存在于实例成员中，原型成员则从对象原型继承而来。嵌套成员由于对象成员可能包含其他成员，例如不常见的写法：window.location.href。每次遇到点操作符，嵌套...
2019-10-20 22:07:40
263
原创 高性能JavaScript笔记之数据存取 （上）
四种基本的数据存储位置数据的存储位置会很大程度上影响其读取速度。JavaScript 有四种基本的数据存储的位置：字面量。字面量只代表自身，不存储在特定位置。JavaScript 中的字面量有：字符串、数字、布尔值、对象、数组、函数、正则表达式，以及特殊的 null 和 undefined 值。本地变量。开发人员使用关键字 var 定义的数据存储单元。数组元素。存储在 JavaScrip...
2019-10-07 22:01:10
214
1
原创 高性能 javascript 之无阻塞加载 script
执行javascript的代码会阻塞其他文件的下载<script>标签每次出现都会霸道地让页面等待脚本的解析和执行，无论当前的javascript代码是内嵌还是包含在外链文件中，页面的下载和渲染都会停下来等待脚本执行完成。例如：这些看似正常的代码实际上有十分严重的性能问题：在<head>中加载三个javascript文件。由于脚本会阻塞页面渲染，...
2019-09-25 23:17:00
505
原创 微信小程序插件本地缓存失效？
可能原因：使用插件的第三方小程序使用了 wx.clearStorage(Object object)，该接口可以清除插件的缓存。
2019-09-20 10:31:56
727
转载 前端面试题：JS中的let和var的区别
最近很多前端的朋友去面试被问到let和var的区别，其实阮一峰老师的ES6中已经很详细介绍了let的用法和var的区别。我简单总结一下，以便各位以后面试中使用。ES6 新增了let命令，用来声明局部变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，而且有暂时性死区的约束。先看个var的常见变量提升的面试题目：题目1：var a = 99; ...
2019-09-18 18:29:16
358
原创 淘宝接口 http://ip.taobao.com/service/getIpInfo.php?ip=myip 获取不到手机ip地址
客户端在请求头加上User-Agent试试：header: { 'User-Agent': 'Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
2019-09-18 18:15:56
11253
1
原创 微信小程序插件基本概念
微信插件所有者小程序指的谁微信插件所有者小程序指的是和插件的 appid 一样的小程序，只有一个，不是指使用插件的小程序如何激活插件功能页在插件所有者小程序的 app.json 里配置，不是使用插件的小程序中配置，需要上线后生效{ "functionalPages": { "independent": true }}用户信息功能页用户信息功能页可以获取 code，用...
2019-09-06 18:33:05
496
原创 js 实现微信小程序接口 wx.setStorage(Object object)
首先创建一个 api.js 文件里面的代码如下：// api.jsvar wx = { setStorage: function(object) { let key = object.key, data = object.data localStorage.setItem(key, data) let result = localStorage.getItem(key)...
2019-08-28 18:44:32
975
原创 transform 、transition 和 animation 的区别
transform是静态属性，设置了就会立马生效，比如给容器设置 transform: scal(0.8) , 渲染的时候会直接使容器变小具体用法transitiontransition 属性是一个简写属性，用于设置四个过渡属性：transition-propertytransition-durationtransition-timing-functiontransition-d...
2019-07-23 18:28:29
155
原创 如何给通过 uniapp 生成的 h5 通过 url 传递参数
需求描述：外链的 h5 是通过 uniapp 生成，然后将此 h5 内嵌在 uni-app 的 webview 中，通过在该 h5 链接拼接上参数传递给 h5在 h5 中提取 url 参数的办法：onLoad() { let name = this.getQueryString('name')}methods: { getQueryString(name) { var re...
2019-06-27 20:20:13
10112
1
转载 uniapp 如何禁止或监听默认返回事件
页面生命周期有个 onBackPress 方法，可以监听返回事件onBackPress(event) 返回 event ={form: backbutton | navigateBack}Android 实体返回键 (from = backbutton)顶部导航栏左边的返回按钮 (from = backbutton)返回 API，即 uni.navigateBack() (from = ...
2019-06-19 09:45:18
29225
5
原创 uniapp 之 uniapp 填坑之路 —— 静态图片在 nvue 页面不显示，vue 页面正常
原因： nvue 页面不支持本地图片绝对路径，vue 都支持解决方法：只需要将绝对路径改为相对路径即可
2019-06-14 19:00:47
7804
原创 uniapp 之 nvue 填坑之路 —— 如何去掉 nvue 页面 ios 下拉刷新时自带的回弹效果
uniapp 文档有以下这句话，这句话是我向官方提了 bug 后加上去的.nvue 页面仅支持 titleNView 配置，其它配置项暂不支持其实 bounce 配置也起作用，只需要设置 “bounce”: “none”, 再加上 “enablePullDownRefresh”: false 或者不配置该项即可禁止掉 ios 下拉自带的回弹效果...
2019-06-14 18:50:39
6213
2
原创 uniapp 之 nvue 填坑之路 —— 在 ios 真机运行时在 page.json 下给 nvue 页面配置 pullToRefresh 下拉刷新会导致 app 卡死
在 ios 真机运行下，给 nvue 页面配置 pullToRefresh 会导致 app 卡死退出，其他情况正常，即 android 真机运行环境以及 vue 页面正常解决方法：去掉 nvue 页面的 pullToRefresh 配置即可...
2019-06-14 18:41:59
2331
原创 .nvue 转换成 vue 页面
将 nvue 的代码 copy 到 vue 页面将 nvue 独有的标签换成相对应的 vue 页面标签，比如 div --> view，slider --> swiper，还要加上 swiper-item，看具体用法css 中，将所有 px 直接换成 upx，测试过基本样式不变因为 weex 默认 div 是 flex 布局，且 flex-derection 值...
2019-05-31 19:19:26
5337
原创 uniapp app 端调微信支付接口
uni-app 官方文档支付接口如下：uni.requestPayment({ provider: provider, // wxpay、alipay orderInfo: 'orderInfo', //微信、支付宝订单数据 success: function (res) { console.log('success:' + JSON.stringif...
2019-05-31 18:57:17
20057
4
原创 weex 中如何写一个全屏遮罩层
.mask { position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; background-color:rgba(0,0,0,0.2);}
2019-05-31 09:33:46
1127
原创 uniapp app 端调起支付宝支付接口
orderInfo 的格式类似下面的代码中的长字符串支付宝支付接口传送门沙箱调试客户端let orderInfo = 'app_id=2016091600525569&biz_content=shike&charset=utf-8&method=alipay.trade.app.pay¬ify_url=http%3A%2F%2F112.74.68.252...
2019-05-30 18:33:46
17262
2
原创 微信小程序或 uni-app 的 swiper 组件的自定义指示点，可以在轮播图外显示指示点，样式自定义
自定义指示点组件// swiperDot.vue<template> <view class="dot-main"> <view :class="['dot-item',current==index?'active':'']" v-for="(item,index) in list" :key="index"></view> </...
2019-05-29 16:20:12
14442
3
转载 支付宝支付接口客户端调试工具使用教程
支付宝支付接口客户端调试工具使用教程 作为一个苦逼的服务端开发对接支付宝接口需要客户端的同学配合测试才能知道自己的请求参数是否没毛病。如果客户端的同学没时间或者不在，可能还要自己自己搭建环境进行进行测试。现在您只需要使用一部Android手机就可以完成客户端支付测试，后面可以轻松的说一句这个唤不起支付或支付报错的锅服务端不背。下面我们来了解一下如何使用这个工具吧说明&n...
2019-05-23 18:32:26
8421
1
转载 js 实现事件分发系统,要求包含三个最基本功能 on (监听事件), off (移出事件), emit (触发事件)
封装 EventEmitterclass EventEmitter { constructor() { this._events = {}; } on(event,callback) { //监听event事件,触发时调用callback函数 let callbacks = this._events[event] || []...
2019-05-15 21:15:17
1764
原创 weex 中如何设置 text 宽度自适应文本宽度
weex 中 text 组件目前还不支持自适应宽度，经过自己摸索，有两个方法可以尝试方法一：通过给 text 添加样式 {align-self: flex-start / center / flex-end}，三个值看需求选，就可以实现宽度自适应方法二：通过给 text 的父级容器设置相对定位，然后给自己设置绝对定位，就可以实现宽度自适应...
2019-05-07 14:56:01
3864
原创 Vue 中 computed、methods 和 watch 的区别
computed 能根据依赖进行缓存，将要计算的属性进行计算然后 return 计算后的值methods 用于一定触发条件，比如点击事件、事件互相调用等watch 用于监听某些属性的变化，然后根据变化来执行相应的逻辑，不需要返回值...
2019-05-07 12:52:40
232
原创 在 weex 中定位元素超过容器边界，在 Android 下，超出部分将不可见
原因原因在于 Android 端元素 overflow 默认值为 hidden，但目前 Android 暂不支持设置 overflow: visible。解决办法不影响布局的情况下，将容器的高或宽加长到覆盖定位元素超出部分...
2019-05-07 11:36:39
1381
原创 uniapp项目中，在page.json中配置app-plus 配置，在app侧不生效，不管是下拉刷新还是不显示滚动条
nvue页面目前仅支持 titleNView 相关配置暂不支持配置下拉刷新，滚动条等，当同时存在页面 a.vue 和 a.nvue 时， 在 pages.json 中设置 app-plus 配置，编译成 app 时优先使用 a.nvue 页面，且 app-plus 二级页面配置中只有 titleNView 有作用，pullToRefresh 、scrollIndicator、bounce 设置...
2019-05-06 18:37:45
8931
原创 .nvue 页面使用 uni.request 接口，请求时不传 url 会使 APP 闪退，不提示错误
.nvue 页面使用 uni.request 接口，请求时不传 url 会使 APP 闪退，不提示错误在任何一个 .nvue 页面使用 uni.request 接口请求时，不传 url 会使 App 闪退，编辑器也没有提示错误，在 .vue 页面会有提示错误， app 也不会闪退解决方法使用 uni.request 方法时判断 url 不为空...
2019-05-06 18:35:03
1611
原创 weex 或 nvue 中如何将不同分辨率设计稿的 px 或者 dp 标注单位适配为宽为 750px 的标注
weex 项目中，将一个元素宽设为 750px，就代表宽占满屏幕宽度，不管是用什么分辨率的屏幕，weex 会根据基于 750 像素宽自动调整尺寸适应不同分辨率屏幕，根据这个可以得出不同分辨率设计稿转换成 weex 项目中的实际尺寸就可以这样计算：实际编写尺寸（px）= 设计稿标注尺寸（px）*( 750 / 设计稿宽 )假设设计稿是 1080*1920，标注一张图片宽 160px *100...
2019-04-11 18:45:50
2678
原创 uni-app 的 nvue 页面如何调试
方法一：基于 weex 网页编辑器将 nvue 的内容拷贝到 weex 网页编辑器 ，删除 uni 相关的方法，手机使用 weex playground 扫描屏幕二维码即可在 weex 网页调试器进行调试方法二：全局安装 weex-toolkit 进行调试全局安装 weex-toolkit，安装 weex-toolkit创建工程，$ weex create my-project用 un...
2019-04-10 18:28:44
6765
1
转载 HbuilderX Node插件[sass]安装失败，可在命令行中使用'npm install'命令进行重新安装
如图所示：解决办法在HBuilderX目录下，进入plugins 、compile-node-sass目录，打开终端，手动执行npm install原文链接
2019-03-28 22:01:52
12290
1
转载 针对 npm ERR! cb() never called! 问题
在开发项目安装依赖时（npm install） 往往会报 npm ERR! cb()never called!的错误如图： 解决方法：一、首先要以管理员模式打开cmd清除你的npm缓存 : npm cache clean -f二、清除完缓存后，安装最新版本的Node helper： npm install -g n 注意：如果出现n...
2019-03-28 21:48:02
2524
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人