- 博客(39)
- 收藏
- 关注
RSS订阅原创 使用dumi2开React组件库
5、src/index.tsx中导出新增的button组件。3、项目初始化完成后，npm start。Button文件夹中新建demos文件夹。src目录下新建Button文件夹。Button文件夹中新建组件相关文件。Button/index.md中使用。1、新建项目 f-react-ui。2、选择对应的模板，初始化项目。4、新增button组件。7、在组件示例中引入组件。6、自定义导航栏及分组。
2023-04-02 23:24:30
483
原创 H5上传从微信保存的图片提示格式不对
问题描述：第三方后台接口要求只能上传jpg或png图片，所以前端做了图片格式校验，使用文件名后缀去判断是不是jpg或png图片。手机拍照的图片、手机本地图片上传都正常，但从微信聊天窗口中保存下来的图片在上传的时候提示格式不对。问题分析：在手机中打开保存的图片，发现格式是jpg的，但上传的时候提示格式不对。在手机浏览器中打印出上传的文件名发现文件名没有后缀。解决方法：上传的时候去掉格式校验...
2020-04-02 12:27:57
2311
原创 小程序mock模拟数据
1、安装mock包npm install @shymean/mock-server -g2、在项目根目录下新建api文件夹，里面新建_mock.js文件，里面放模拟的接口Mock.mock('/api/test/test.htm', { errcode: 0, data: { test: 'test' }, message: 'success'});...
2020-04-01 12:56:24
1414
原创 iOS11打开小程序页面空白
问题描述：部分苹果手机打开小程序页面空白分析定位：使用调试模式打开小程序，发现控制台有报错,且只在iOS11系统下有问题。cant find variable:_wxAppCode_unexpected EOF进一步定位发现是协议文件中有大段文本段落引起的，段落文本中有换行等特殊字符；解决方法：每段文本使用一个单独的标签包裹。...
2020-03-31 12:31:47
2189
原创 小程序开发中如何测试
一、测试微信小程序（1）使用本地二维码测试在微信开发者工具中点击预览，使用微信扫描二维码在手机上测试。优点：可以抓包。缺点：外网无法访问、二维码会过期（25分钟）。（2）使用体验版测试在微信开发者工具中，点击上传。上传代码成功后，在小程序管理后台，设置体验版，然后使用微信扫描体验版二维码测试。优点：外网可以访问、二维码不会过期。缺点：不能抓包。二、测试企业微信小程序（1）使用本...
2020-03-19 23:59:45
4326
原创 微信小程序审核问题整理
一、在微信中使用的小程序审核被驳回1、如果是需要登录才能访问的小程序审核时需要提供测试账号，否则会审核不通过；2、不符合微信小程序的规范被驳回，按照驳回的原因进行修改后重新提交审核；二、仅用于企业微信的小程序，直接在微信小程序管理后台提交审核会审核不通过。审核被驳回时，需要在企业微信里面联系企业微信客服，提交相关资料，然后再提交审核。资料清单如下：1、审核结果的截图；2、5张小程序运...
2020-03-19 23:14:28
1038
1
原创 canvas截图问题
1、截图空白问题描述：使用canvas截图，截图是空白。解决方法：图片地址跨域导致的，设置 useCORS:true,可以解决。2、截图有偏移问题描述：截图页面正中间一块内容的时，结果截取到的是从页面（0，0）位置开始截取，只不过除了中间位置，其他地方是透明解决方法：translate() 方法重新映射画布上的 (0,0) 位置。var rect = $canvas.offs...
2020-01-17 10:24:45
441
原创 H5图片压缩上传图片基本思路及注意事项
H5图片压缩上传图片基本思路：1、使用FileReader 读取本地上传的文件，然后使用 new Image生成图片；2、使用canvas绘制图片，并压缩图片let canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'),ctx.drawImage(img, 0, 0,...
2019-12-23 21:35:38
380
原创 H5调起摄像头拍照上传
<input type="file" accept="image/*" capture=”user”>1、浏览器中设置capture=”user”，则只会调起摄像头；不设置capture=“user”，则会弹窗让选择相册或拍照。2、webview 中设置capture=”user”，在IOS中只会调起摄像头，但Android中会弹窗让选择文件或相机，因为安卓会忽略captu...
2019-12-08 22:31:45
959
1
原创 移动端兼容性问题
1、iOS10.2.1系统中，屏幕滚动的时候，元素的fixed定位会失效；解决方案：给要滚动的元素加上以下样式.content｛ height:100vh; overflow:auto;｝2、iOS中页面底部元素的margin-bottom失效；解决方法：（1）使用空白div撑起高度;（2）使用padding-bottom。3、行内元素使用flex:1在部分手机上...
2019-12-08 22:12:01
152
原创 微信小程序登录与企业微信小程序登录
在微信（或企业微信）中登录小程序，可以分为两种：第一种是使用微信授权登录，第二种使用账号密码登录（如某些非开放的系统）；一、使用微信登录小程序微信中调用wx.login()（企业微信中调用wx.qy.login()）获取临时登录凭证code，然后调用wx.request调用开发者后台接口，将code传给后台；后台调用auth.code2Session,使用code换取openid和sess...
2019-11-16 21:15:43
7597
原创 elment-ui表单校验
一、基本用法<el-form :model="form" :rules="rules" ref="testForm"><el-form-item label="姓名" prop="name" ref="validateName"> <el-input v-model.trim="form.name"></el-input></el...
2019-11-14 22:31:56
214
原创 webstorm 中使用ESLint细节
1、格式化代码后，import右边位置， ESLint提示缩进错误解决方法：（1）、更改webstorm设置，不让内容缩进，不推荐，因为会更改页面的默认风格，且不美观；（2）、修改ESLint设置，关闭Vue 文件中的script标签缩进（推荐使用）rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'er...
2019-11-10 15:27:38
436
原创 扫码支付原理
一、主动扫码1、网页上购物后扫码支付二维码对应的URL中有商家信息及订单信息，扫码后通过我们的支付宝或微信把钱转给商家账户。网页端在二维码展示出来的时候，轮询调用后台接口查询支付结果。2、用自己的手机扫别人的收钱码二维码中有别人的账户信息和订单信息，扫码后通过我们的支付宝或微信把钱转给对方账户。二、被动扫码1、别人用手机扫我们自己的收钱码或扫码枪扫我们自己的收钱码二维码上是我们的账...
2019-10-27 22:21:05
5230
原创 APP扫码登录原理
1、每个二维码对应一个URL，这个URL会带有一个表示的参数（ID）；2、用户打开手机APP扫描二维码的时候，会提示是否确认登录；3、用户在APP上点击确认登录后，APP客户端会将用户账号和上一步扫描得到的ID一起传给服务器端，在服务器端将该用户和ID相互关联，表示该ID对应的用户在网页端是已登录状态；4、网页端通过轮询的方式带着ID调后台接口,获取用户状态，如果拿到给ID对应的用户是已登录...
2019-10-27 21:38:54
652
原创 uni-app小程序升级为自定义组件模式注意事项
manifest.json文件中“usingComponents” : true 自定义组件模式， false 非自定义组件模式1、自定义组件模式编写组件时，避免使用tagName, ID, attribute 三种选择器；2、$emit非自定义组件：中划线连接或驼峰连接都可以vue 官网推荐emit的函数名用中划线链接this.$emit('upload-image', dat...
2019-10-13 18:26:47
1347
原创 小程序页面中的toast一闪而过的问题
问题：请求后台接口后，接口返回错误，前台提示错误信息的toast一闪而过，设置了1秒的延迟消失。原因：在公共的请求中加了loading, 请求前调用了wx.showLoading，结束后调用了 wx.hideLoading，当后台返回错误的时候，有调用了 wx.showToast ；导致页面中同时显示了wx.showLoading 和 wx.showToast，所以loading关闭的时候...
2019-09-28 11:24:57
1609
原创 在webstorm中开发小程序注意细节
webstorm不识别rpx单位，会导致下面两个问题：1、代码中rpx单位的位置报错；2、格式化代码之后，会在数字与rpx之间加空格（100rpx -> 100 rpx）,导致样式不生效；解决方法：定义sass函数：@function rpx($value) { @return $value * 1rpx;}使用：.test{ width:rpx(200);}...
2019-09-28 11:10:00
541
原创 uni-app正确设置页面背景色
如果要给页面设置背景色，应该如下方法设置page{ background-color:#ddd;}如果要设置窗口的背景，则可以在pages.json中设置 ，如下{ "pages": [ { "path": "pages/index/index", "style": { “backgr...
2019-09-28 10:55:06
27262
原创 uni-app开发微信小程序注意细节
1、跳转到tabBara页面需要使用uni.switchTab,使用uni.navigateTo无效；2、tabBar页面底部才会展示tabBar；3、字体图标的使用(1)使用远程地址@font-face{ font-family:"iconfont"; src:url("https://..........");}(2)使用本地字体文件@font-face{ font-fa...
2019-09-28 10:37:28
1036
原创 Vue父子组件生命周期
父组件中嵌套子组件后的生命周期如下：beforeCreate（父组件）–> created（父组件）–> beforeMount（父组件）–> beforeCreate（子组件）–> created（子组件）–> beforeMount（子组件）–> mounted（子组件）–> mounted（父组件）...
2019-08-31 23:56:39
106
原创 使用uni-app创建小程序项目的两种方式对比
方法一，使用HBuilderX创建特点：简单、可视化界面操作，但需要依赖HBuilderX创建步骤：文件 > 新建 > 项目创建成功后目录结构如下：微信小程序运行方法如下图，会自动打开微信小程序开发者工具；方法二：通过vue-cli脚手架创建特点：通过命令行创建项目、安装插件，支持所有编辑器；创建项目的方法：1、全局安装vue-cli 3.x npm insta...
2019-08-25 20:55:06
1907
原创 export、export default； module.exports、exports的异同点及使用方法
相同点：export、export default； module.exports、exports都是导出变量或方法，对外提供接口；不同点：1、export和export default是属于ES6的语法，导出的模块需要用import引入；2、module.exports和exports是属于CommonJS模块规范，导出的模块需要用require引入；使用方法：1、export导出...
2019-08-11 22:49:48
206
原创 Fiddler抓取https，安装证书的方法
一、手机端1、手机浏览器中输入 安装fiddler的电脑的IP+fiddler中设置的监听端口；如：10.1.1.1：8080；打开页面，点击FiddlerRoot certificate，下载安装证书。二、PC端1、将生成的证书导出到桌面；2、通过以下步骤导入证书， 控制面板-》Internet选项-》内容-》证书-》导入-》证书类型选择“受信任的根证书颁发机构”。...
2019-08-04 21:05:19
443
原创 获取时间戳注意事项
var now = new Date(), year = now.getFullYear(), month = now.getMonth(), day = now.getDate(), hour = now.getHours(), minute = now.getMinutes(), second = ...
2019-07-28 18:26:33
147
原创 文字走马灯的几种实现方式
使用css实现：设置滚动内容的父元素绝对定位，通过animation来添加动画，改变元素的left值。animation:6s scrollLeft infinite linear; @keyframes scrollLeft { 0%{ left: 0; } 100%{ left: -100%; }}使用js实现：设置滚动元素的父元素positio...
2019-07-21 12:01:20
819
原创 win10 系统中安装nvm
win10 系统中安装nvm1.下载nvm包https://github.com/coreybutler/nvm-windows/releases2.将现在下来的nvm-noinstall.zip解压到D:\nvm目录下3.在D:\nvm文件夹里面创建了settings.txt文件，内容如下：root: D:\nvmpath: D:\nodejsarch: 64proxy: none...
2019-07-14 20:54:18
1129
原创 在页面展示时保留后台传给前台的换行符
在页面展示时保留后台传给前台的换行符文本中换行，在前端展示的时候需要将文本中的换行和回车转换为 ;descStr = descStr.replace(/(\r\n|\n|\r)/gm,’’);\r是回车，\n是换行，Enter是\r\n/g全局查找所有匹配到的/m多行查找...
2019-07-06 18:41:23
1636
原创 require.context的理解
对下面这段代码的理解const srcContext = require.context('../../src', true, /\.(vue|js)$/);srcContext.keys().forEach(srcContext);第一行代码，定义的常量 srcContext返回的内容如下：var map={"./components/test/test.vue": "./src/...
2019-06-30 16:35:29
739
原创 如何给旧项目添加单元测试
如何给旧项目添加单元测试如果你的项目是用vue-cli 2.x搭建的，且初始化项目的时候没有添加单元测试模块，后面需要手动引入，可按下面的方法添加。1、在build目录下新建webpack.test.conf.js文件，内容如下：'use strict';const utils = require('./utils');const webpack = require('webpack'...
2019-06-23 16:06:32
805
原创 Git基本命令
Git基本命令克隆远程仓库git clone <仓库地址>配置用户名和邮箱设置全局的用户名和邮箱git config --global user.name “test”git config --global user.email “[email protected]”如果要在某个项目中使用单独的用户名和邮箱，可以在该项目下，执行下面命令git config user.name ...
2019-06-09 20:14:16
105
原创 Flutter构建Android发布版的APK注意事项
Flutter构建Android发布版的APK注意事项1、创建keystore（1）执行keytool命令的时候，提示：‘keytool’ 不是内部或外部命令，也不是可运行的程序解决方法：运行命令：flutter doctor -v 可以找到keytool.exe 所在的路径C:\Program Files\Android\Android Studio\jre\bin在该目录下就可以正...
2019-06-01 15:24:37
869
原创 Webstorm 2019 细节设置
Webstorm 细节设置Webstorm 设置1、开启允许手机连接2、设置修改后未保存的文件名后面加个星号（*）3、设置文件自动换行4、搜索后，将光标放在输入框中，然后点击Esc，可以关闭搜索窗口...
2019-06-01 15:06:04
4557
1
原创 Chrome中调试node
Chrome中调试node1、 全局安装supervisor npm install supervisor -g2、 chrome 地址栏输入http://127.0.0.1:9229/json/list 回车，可以看到类似于下面的内容3、将上图中的devtoolsFrontendUrl 对应的值复制出来，放入chrome浏览器地址栏中，回车。就可以看到对应页面下的node.js文件。可...
2019-05-21 20:00:16
215
原创 移动端1px边框
移动端1px边框/*高清屏 1px border*/.border-1-px, /*1px 边框*/.border-1-px-radius, /*1px 圆角边框*/.border-1-px-top, /*1px 上边框*/.border-1-px-right, /*1px 右边框*/.border-1-px-bottom, /*1px 下边框*/.border-1-px-left ...
2019-05-20 21:24:47
212
原创 移动端适配
移动端适配1、html2、适配JS(function (doc, win) { let docEl = win.document.documentElement; let resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize'; /** * 设置根元素fon...
2019-05-20 21:11:37
215
原创 搭建Flutter环境常见问题及解决方法
搭建Flutter环境常见问题及解决方法1、模拟器运行不起来，可能是Android SDK版本的问题；解决方法：升级Android Studio,升级SDK。2、打开模拟器的时候报错，emulator-5554；解决方法：在Android/sdk/platform-tools目录运行，adb kill-server。关闭掉那个模拟器就OK了。3、连接真机，安装APP的过程中提示手机系统阻...
2019-05-19 09:50:59
453
原创 window7下搭建Flutter环境
window7下搭建Flutter环境1、安装git；2、安装Flutter(1)下载Flutter SDK(https://flutter.dev/docs/development/tools/sdk/releases#windows);(2)将安装包zip解压到你想安装Flutter SDK的路径（如：C:\src\flutter；注意，不要将flutter安装到需要一些高权限的路径...
2019-05-19 09:35:09
959
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人