- 博客(19)
- 收藏
- 关注
RSS订阅原创 小程序之如何优雅的通过命令行切换开发环境
前言因为项目原因，小程序上线到不同环境经常要切换不同的环境变量，参数一多，改起来非常的繁琐，而且还怕改错，特别是上生产环境，每次谨慎地检查好几遍，生怕改错配置参数，就领盒饭回家。所以，为了饭碗端稳一点，就使用node+npm的命令行方式来解放自己，自动切换不同环境参数，降低出错的几率。开始在根目录下创建几个文件, main.js、config文件夹，包含不同环境的配置config.xx.js和dist目录中config.js，该js文件在app.js中引入，执行命令行后会生成配置到config.j
2021-02-05 15:43:58
770
原创 使用react-devtools后出现Uncaught TypeError: Cannot read property ‘forEach‘ of undefined的解决方法
在开发环境，使用到react-devtools来方便查看react dom，按github上react-devtools项目中下载的v3分支代码，一顿操作后运行项目，发现控制台报了react-refresh-runtime.development.js:465 Uncaught TypeError: Cannot read property 'forEach' of undefined这看的我一脸懵逼啊，各种在网上找解决方法，然鹅，基本都是v3版本的。经过一番挣扎，终于看到曙光，好家伙，就是版本的问题
2021-01-20 17:29:39
3116
5
原创 微信小程序之自定义video组件
自定义video小程序项目中使用到video组件，并且根据需求自定义播放、进度条和全屏按钮，本次需求比较简单，没有涉及试看，指定时长等功能，仅是简单的播放，记录一下，以防遗忘。贴下video组件的文档链接：video大概效果：本文中用到的一些比较重要的属性和API- duration：指定视频时长（总时长）- controls：是否显示默认播放控件（播放/暂停按钮、播放进度、时间）- poster：视频封面- bindended：当视频播放到末尾触发- bindtimeupdat
2020-09-23 14:39:50
3765
原创 uni-app之微信小程序转h5
开始最近有个需求，需要将微信小程序中一些页面和功能改成h5，这次功能开发的时间有点紧，而且重新写一套有点来不及。考虑到微信小程序与uni-app有着一些共通之处，所以打算直接转成uni-app。uni-app官网上也有从微信小程序项目转uni-app的教程：https://github.com/zhangdaren/miniprogram-to-uniapp ，不过我这里直接用上了大佬开源的miniprogram-to-uniapp转换工具。github: https://github.com/zha
2020-07-31 14:54:48
5520
1
原创 uni-app踩坑之旅之uni-app介绍篇
前言最近自己搞了一个微信小程序的项目，既然是自己搞，技术栈什么的都是自由发挥啦，所以在了解并啃了一遍uni-app的文档和相关介绍之后，决定就用它了，接下来就是含着泪也要开发的踩坑之旅~开始uni-app是一个使用vue.js来开发跨平台应用的框架，写一套代码，可以同时发布到ios，Android、h5、以及各种小程序。快速上手，提高开发效率。对会vue和小程序的小伙伴来说，这个框架就简单很多了，但是因为是跨平台开发，在不同平台还是会有些差异，所以在开发中还是需要注意一些。使用HbuilderX开
2020-07-10 17:33:28
820
原创 微信小程序之常见小问题总结
开启惯性滚动惯性滚动会使滚动比较顺畅，在安卓下默认有惯性滚动，而在 iOS 下需要额外设置-webkit-overflow-scrolling: touch的样式；避免使用伪类:avitve来实现点击态使用伪类:avtive来实现点击状态，很容易触发，并且滑动或者滚动时点击状态不会消失，可以使用小程序提供的内置组件的属性hover-class来实现保持图片比例大小图片若没有按原图比例大小显示，可能导致图片扭曲，不美观，甚至导致用户识别困难。可根据情况设置 image 组件的 mode 属性，以保持
2020-07-06 14:01:09
855
原创 微信小程序之搜索关键字高亮
最近项目中有个需求，就是搜索列表中，对应的搜索关键词要高亮，即显示不同的颜色。百度了一番加上自己的理解，实现了该功能wxml:<view class="search-box"> <view class="input-box"> <image mode="widthFix" src="images/search.png"/> <input class="searchInput"
2020-07-06 11:11:24
1916
原创 微信小程序之使用Promise.finally()
Promise.prototype.finally()无论上一个promise成功还是失败，都会执行finally里的回调。用法示例：let promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('成功') }, 1000)}).then(res => { console.log('success')}).catch(err => { console.log(err)})
2020-07-06 09:29:36
2464
1
原创 微信小程序之将base64图片转为本地图片
开始最近项目中遇到个问题，就是生成海报的时候，需要画上小程序的二维码，然后后台返回的二维码图片是base64的格式，真机生成海报后二维码没有显示。所以就把后台返回的base64格式的二维码图片转为本地图片，主要的API有wx.getFileSystemManager和wx.getFileSystemManager().writeFileSync。wx.getFileSystemManager小程序通过wx.getFileSystemManager()可以获得全局唯一的文件管理器，所有的文件管理都通过
2020-07-05 18:01:37
5253
原创 微信小程序之版本检测更新
小程序的运行机制，分为冷启动和热启动，热启动：如果用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态，这个过程就是热启动。销毁的时间一般是5分钟，但是销毁会受手机内存或者其他原因影响。冷启动： 如果用户首次打开，或小程序销毁后被用户再次打开，此时小程序需要重新加载启动，即冷启动。所以当用户热启动，下次打开的时候，也想去更新小程序，我们就可以使用下面的方法：可在onLaunch方法中调用如下方法// 获取小程序更新机制兼容 if (
2020-07-03 18:11:43
850
3
原创 微信小程序之分包加载的那些事
微信小程序中使用分包加载，可以优化首次启动加载时间。小程序对包大小的限制为：单个包或者主包的大小不能超过2M；整个小程序所有分包的大小不能超过8M；项目结构├── app.js├── app.json├── app.wxss├── packageA│ └── pages│ ├── A│ └── B├── packageB│ └── pages│ ├── C│ └── D├── pages│ ├── index
2020-07-03 17:52:41
577
原创 grunt的学习之旅
概述官网文档： https://www.gruntjs.net/api/grunt定义： grunt是一个基于javascript项目命令行构建工具，可以快速的创建项目，合并、压缩和校验css，js等。安装grunt是通过npm来安装的。所以请确保当前的环境已经安装好node和npm全局安装cli，安装cli不等于安装grunt，grunt可以直接安装在项目中。npm install ...
2020-04-10 16:03:40
150
原创 小程序wx.getLocation，wx.openLocation地图相关的问题
前言最近在做小程序获取经纬度的功能，在使用getLocation遇到了一些问题。还有小程序判断GPS是否开启，系统是否给微信授予定位服务的功能，对于以上的问题做了一些总结。wx.geLocation小程序中通过使用wx.getLocation获取当前的地理位置，需要用户主动授予权限。具体参数可查看官方文档。wx.getLocation({ type: 'wgs84', // 返回Gps...
2020-04-08 13:32:15
2102
1
原创 使用webpack构建react项目
开始前webpack：一个前端资源加载/打包工具项目中需要处理的文件一般会使用的插件：html: html-webpack-plugin (把html单独打包成文件，把对应的脚本和样式插入到合适的位置)、html-loader脚本： babel+babel-preset-react (解析ES6,JSX)样式：css-loader+sass-loader图片、字体： url-load...
2020-01-17 13:57:35
401
原创 internal/modules/cjs/loader.js:638异常问题解决
在使用webpack安装插件，运行项目internal/modules/cjs/loader.js:638抛出异常信息，具体原因不知。解决：1、删除node_module文件，删除package-lock.json文件2、重新npm install3、重新运行，没有再报异常...
2020-01-16 17:57:41
15573
原创 关于用雪碧图做动画并且自适应的问题
最近做了一个h5的下项目，里面涉及到的动画效果比较多，其中有一个就是用雪碧图加css3做动画。一开始遇到的问题就是雪碧图必须得用绝对坐标去获取图片的位置，但是我们需要做到的是自适应不同的屏幕针对这种情况，作出了以下的解决方案：上面的图片是我需要实现效果的雪碧图，规格是1*5，一般我们需求填充到整个背景的时候是使用background-size:100% 100%;不过这也不是我们想要的。那...
2019-10-24 16:15:24
512
转载 移动端rem横竖屏的适配以及华为等机型rem失效的问题
横竖屏的适配平时在做移动端的适配时，会经常用到rem单位来适配屏幕，大多数都是竖屏的情况，正常都能满足我们的需求。但是最近遇到了一个h5的小项目，是需要固定横屏，之前的js只是对竖屏进行了适配，横屏的时候由于宽高比例的转换，计算rem的算法也需要稍微改进一下，以750px的设计稿为例：(function (doc, win) { var docEl = doc.documentElem...
2019-10-11 17:51:41
2391
原创 诸葛IO埋点的使用
诸葛IO埋点的使用概述前言概念解析事件开始使用功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入概述最近项目中需要埋点...
2019-10-08 15:49:38
3911
1
原创 学习vuex（一）：理解...mapActions,...mapMutations，...mapState
当一个组件需要获取多个状态的使用，我们通常会使用到mapState，然后我们经常可以看到项目中会写…mapState，…mapActions,…mapMutations有的小伙伴会对…mapState的写法有疑惑。其实这是使用了ES6的扩展运算符，因为mapState、mapMutations、mapActions函数返回的都是一个对象，computed计算属性接收的也是一个对象，所以当我们想和...
2019-10-08 11:29:31
1145
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人