- 博客(25)
- 收藏
- 关注
RSS订阅
原创 react项目国际化 react-intl-universal 中文 api 使用方法
react-intl-universal是由阿里巴巴集团开发的React国际化软件包。特征不仅可以在React.Component中使用，还可以在Vanilla JS中使用。简单。只有三个主要的API和一个可选的帮助器。显示不同语言环境的数字，货币，日期和时间。多元化字符串中的标签。消息中的支持变量。在消息中支持HTML。支持150多种语言。在浏览器和Node.js中运行。消...
2019-12-20 15:25:11
3649
1
原创 微信小程序 SOTER 生物认证DEMO，指纹识别
今天项目尝试使用微信小程序指纹认证功能以下为测试demoindex.jsPage({ /** * 页面的初始数据 */ data: { isfingerPrint : false, //可否使用指纹识别 默认false isfacial: false, //可否使用人脸识别 默认false ...
2019-12-12 17:00:05
2471
3
原创 移动端基础-日常Review
1.1浏览器现状PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。1.2 手
2020-12-04 10:38:36
260
原创 vue history路由模式 部署Nginx
1、设置 路由模式为 history2、添加base （非常重要，否则首页加载白屏），路径是相对于域名映射的路径3、修改Nginx配置export default new Router({ mode: 'history', //设置mode base:'/web/bjsubway/', //设置base routes: [ { path: '/', redirect: '/map' }, { path: '/.
2020-11-26 18:36:50
994
原创 mac 电脑 多版本 nodejs管理以及安装
选用 n 作为多node版本的管理工具全局安装 n 工具。npm install -g n安装最新版本 nodejssudo n latest安装指定版本nodejssudo n 14.3.0查看/选择nodejs版本n使用上下方向键，选择使用版本截止2020-11-20日，nodejs 版本，以及发布日期列表：Version LTS Date V8 npm NODE_MODULE_VERSION[1] Node.js ...
2020-11-20 10:34:54
1864
1
原创 使用了bind 之后 removeEventListener 不生效
场景：(见代码) addBodyMove(){ this.bodyDom.addEventListener('touchmove',this.bodyMove.bind(this),{ passive: false }) } addBodyMoveEnd(){ this.bodyDom.addEventListener('touchend',this.bodyMoveEnd.bind(this),{ passive: false }) } removeBodyMove(
2020-11-17 18:32:38
545
原创 Unable to preventDefault inside passive event listener due to target being treated as passive 报错
报错：[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>场景：使用了 addEventListener “touchmove”解决办法：添加 { passive: false }bodyDom.addEventListener('touchmove',this.body...
2020-11-17 18:28:13
1879
1
原创 限制字符个数，中文输入法截断问题。
限制字符个数，中文输入法截断问题。情况：限制为7个字，英文没有问题，但是中文再输入最后几个字的时候，拼音过长被自动截断了。解决办法：使用compositionstart ，compositionendcompositionstart：当用户使用拼音输入法开始输入汉字时，这个事件就会被触发compositionend：当用户结束使用拼音输入法开始输入汉字时，这个事件就会被触发记录变量：cpLock //是否正在因为输入法中let _this = this; fo...
2020-11-12 17:21:29
494
原创 移动端 手势缩放拖拽功能实现
效果图：实现方式：基于 PinchZoom.js Version: 2.3.4修改源码添加如下功能1、增加初始化居中功能2、增加初始化缩放比功能TODO希望增加惯性滑动使用示例：<template><div> <div :style="'height:'+windowHeight+'px'"> <div id="map_img"> <img :src="...
2020-11-11 18:36:40
1487
4
原创 undefined is not a function wx.getLocalImgData 解决
使用wx.getLocalImgData 微信jssdk，大部分机型可以成功，有某些机型报错undefined is not a function如图所示：解决办法：1、wx.getLocalImgData 需要1.2.0以上版本的jssdk支持https://res.wx.qq.com/open/js/jweixin-1.2.0.jshttps://res.wx.qq.com/open/js/jweixin-1.3.0.jshttps://res.wx.qq.com/o..
2020-11-11 16:20:56
1438
原创 weex 动态class
weex 如何进行class 动态赋值示例： <text :class="[selectedTime != null ? 'selected-input-body-items-text-active' : 'selected-input-body-items-text']">{{selectedTime != null ? selectedTime : '填入凭证上的“打印时间”'}}</text>注意：class三目判断 要加[] 中括号，否则h5可以展示，io
2020-11-05 17:58:45
419
原创 weex dom.scrollToElement 滚动问题
使用weex 的dom.scrollToElement 兼容问题1、使用for生成的ref，在初始化获取ref节点时候需要有100ms延迟2、dom.scrollToElement 传入的 ref参数，需要使用this.$refs.ref[0] 方式取值 ，不然会出现ios 安卓 不生效，h5生效.setTimeout(()=>{ weexDom.scrollToElement(this.$refs.activeRef[0],{ offset:0, .
2020-11-04 16:30:14
3554
原创 for 循环生成的ref ,使用weex 的dom.scrollToElement 兼容问题
for 循环生成的ref ,使用weex 的dom.scrollToElement 兼容问题1、使用for生成的ref，在初始化获取ref节点时候需要有100ms延迟2、dom.scrollToElement 传入的 ref参数，需要使用this.$refs.ref[0] 方式取值 ，不然会出现ios 安卓 不生效，h5生效....
2020-11-04 16:27:37
493
原创 WEEX 初学者注意事项
weex注意事项1.weex中只支持单个class选择器或者id选择器，不支持设置100%，不支持继承2.不支持 display:none 即不支持 v-show，需要使用 v-if 来实现显示和隐藏。3.定位的层级是按顺序排列，没有z-index4.不支持背景图片，background-color background-image:linear-gradient()5.:class不能使用对象语法应该使用数组语法，数组写法:class="[type == 'index' ?...
2020-11-02 14:18:35
348
原创 WEEX h5文本样式与真机安卓苹果不一致
问题：WEEX h5文本样式与真机安卓苹果不一致查询许多文章未能得到解决办法，后多次是实验出一下结果：真机样式：H5 样式：解决方式： 在weex中 文本text标签不能折行，否则会被weex编译。<template> <div class="box" style=" flex-direction: row;"> <div><image :src="imIconImg" class="excessFare_list_hea
2020-11-02 14:09:13
361
原创 postcss-pxtorem 移动端 vant ui 适配 px自动转换rem
VUE v2.5 项目中 移动端适配 px自动转换rem安装amfe-flexiblenpm i -S amfe-flexible安装postcss-pxtoremnpm i -Dpostcss-pxtorem在项目根目录创建或编辑.postcssrc.js文件注意： rootValue:75, //本项目设计图宽度是750px。其他项目需自己换算 【设计图宽度/10】module.exports = { "plugins": { //...
2020-10-15 17:08:27
767
2
原创 vue vant ui + postcss-pxtorem rem适配移动端
vue vant ui +postcss-pxtorem rem适配移动端问题描述：移动端h5项目 需要进行适配不同机型分辨，选择使用rem方案进行适配（amfe-flexible + postcss-pxtorem），出现问题由于蓝湖设计图 750*1334 然而使用的vant ui 是320分辨设计，导致页面大小不一致。解决办法：在.postcssrc.js中配置postcss-pxtorem rootValue 匹配蓝湖设计图750/10=75 sel...
2020-09-29 16:44:52
942
原创 laravel项目启动报错Fatal error require() Failed opening required bootstrap/autoload.php
laravel 项目lnmp部署，访问主页提示Fatal error require() Failed opening required bootstrap/autoload.php 尝试解决办法使用过：1、重新composer install2、修改bootstarp 目录权限3、修改 vender目录权限以上办法全部无法解决问题，还是报错如此。突然发现项目根目录下多出一个.u...
2020-01-11 12:42:50
3850
1
原创 document.referrer 为空，导致微信h5支付失败，react框架
前端使用框架react+webpack路由：react-router-dom 4出现问题：集成微信h5支付，提示商家参数格式有误，请联系商家解决问题原因：document.referrer为空导致失败。解决思路：先在微信开放平台 授权h5支付安全域名 （域名需通过备案）在百度了各种方案无果例如：1、window.locaiton.href 跳转导致referrer为空2、使用...
2019-12-13 12:02:38
1904
原创 HTML5 draggable拖放属性与火狐兼容性问题
使用draggable属性拖动一个图片时,火狐上总会新开一个窗口，其他浏览器不会出现这种情况，怎样可以避免？在VUE的 created 状态中添加created() { document.body.ondrop = function (event) { event.preventDefault(); event.stopPropa...
2019-11-06 17:36:50
1053
原创 vue中使用v-for，出现告警！
在项目中运行v-for代码段时，<flexbox v-if="roleShow" style="padding:15px; box-sizing: border-box;"> <flexbox-item v-for="role in roles " > <x-button mini :type="role.type" style="paddi...
2019-11-06 17:35:32
454
原创 vue v-for key 问题，关于Diff算法
其实不只是vue，react中在执行列表渲染时也会要求给每个组件添加上key这个属性。要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。我们知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设：1...
2019-11-06 17:32:32
328
原创 360浏览器 a标签跳转页面失效
问题描述：在360浏览器内 点击a标签无效，页面不跳转。谷歌火狐浏览器没问题。发现问题：由于a标签父元素是button导致无法跳转页面<button type="button" class="btn btn-info"> <a href="{{asset('hotel/list')}}'" >返 回</a></button>解决办法：...
2019-11-06 17:14:42
878
原创 react 框架webpack 打包时候 使用antd-mobile 没有样式问题
问题描述：在react中使用antd 组件后页面没有样式。问题原因：因为组件的css 没有按需加载在 webpack 配置文件中，加入此行代码 重启后即可；整体webpack配置如下：const path = require('path');const webpack = require('webpack');const HtmlWebpackPlugin = require...
2019-11-04 17:38:54
1225
原创 react 页面回退redux-saga 不执行
redux-saga只执行一次action问题描述：在react中使用redux-actions，redux-sage， 只有在第一次进入页面才会执行action，其余操作无法触发action。发现问题：//代码片段function* watch_get_data_list() { const action = yield take(actions.SALARY_LIST_GET...
2019-11-04 13:50:40
386
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人