微信小程序
童年的纸飞鸡~
努力提升自己,不想让未来遗憾
展开
-
小程序之如何优雅的通过命令行切换开发环境
前言因为项目原因,小程序上线到不同环境经常要切换不同的环境变量,参数一多,改起来非常的繁琐,而且还怕改错,特别是上生产环境,每次谨慎地检查好几遍,生怕改错配置参数,就领盒饭回家。所以,为了饭碗端稳一点,就使用node+npm的命令行方式来解放自己,自动切换不同环境参数,降低出错的几率。开始在根目录下创建几个文件, main.js、config文件夹,包含不同环境的配置config.xx.js和dist目录中config.js,该js文件在app.js中引入,执行命令行后会生成配置到config.j原创 2021-02-05 15:43:58 · 844 阅读 · 0 评论 -
微信小程序之自定义video组件
自定义video小程序项目中使用到video组件,并且根据需求自定义播放、进度条和全屏按钮,本次需求比较简单,没有涉及试看,指定时长等功能,仅是简单的播放,记录一下,以防遗忘。贴下video组件的文档链接:video大概效果:本文中用到的一些比较重要的属性和API- duration:指定视频时长(总时长)- controls:是否显示默认播放控件(播放/暂停按钮、播放进度、时间)- poster:视频封面- bindended:当视频播放到末尾触发- bindtimeupdat原创 2020-09-23 14:39:50 · 4107 阅读 · 0 评论 -
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 · 6120 阅读 · 2 评论 -
微信小程序之常见小问题总结
开启惯性滚动惯性滚动会使滚动比较顺畅,在安卓下默认有惯性滚动,而在 iOS 下需要额外设置-webkit-overflow-scrolling: touch的样式;避免使用伪类:avitve来实现点击态使用伪类:avtive来实现点击状态,很容易触发,并且滑动或者滚动时点击状态不会消失,可以使用小程序提供的内置组件的属性hover-class来实现保持图片比例大小图片若没有按原图比例大小显示,可能导致图片扭曲,不美观,甚至导致用户识别困难。可根据情况设置 image 组件的 mode 属性,以保持原创 2020-07-06 14:01:09 · 949 阅读 · 0 评论 -
微信小程序之搜索关键字高亮
最近项目中有个需求,就是搜索列表中,对应的搜索关键词要高亮,即显示不同的颜色。百度了一番加上自己的理解,实现了该功能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 · 2069 阅读 · 0 评论 -
微信小程序之使用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 · 2527 阅读 · 1 评论 -
微信小程序之将base64图片转为本地图片
开始最近项目中遇到个问题,就是生成海报的时候,需要画上小程序的二维码,然后后台返回的二维码图片是base64的格式,真机生成海报后二维码没有显示。所以就把后台返回的base64格式的二维码图片转为本地图片,主要的API有wx.getFileSystemManager和wx.getFileSystemManager().writeFileSync。wx.getFileSystemManager小程序通过wx.getFileSystemManager()可以获得全局唯一的文件管理器,所有的文件管理都通过原创 2020-07-05 18:01:37 · 5457 阅读 · 0 评论 -
微信小程序之版本检测更新
小程序的运行机制,分为冷启动和热启动,热启动:如果用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时小程序并未被销毁,只是从后台状态进入前台状态,这个过程就是热启动。销毁的时间一般是5分钟,但是销毁会受手机内存或者其他原因影响。冷启动: 如果用户首次打开,或小程序销毁后被用户再次打开,此时小程序需要重新加载启动,即冷启动。所以当用户热启动,下次打开的时候,也想去更新小程序,我们就可以使用下面的方法:可在onLaunch方法中调用如下方法// 获取小程序更新机制兼容 if (原创 2020-07-03 18:11:43 · 877 阅读 · 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 · 617 阅读 · 0 评论 -
小程序wx.getLocation,wx.openLocation地图相关的问题
前言最近在做小程序获取经纬度的功能,在使用getLocation遇到了一些问题。还有小程序判断GPS是否开启,系统是否给微信授予定位服务的功能,对于以上的问题做了一些总结。wx.geLocation小程序中通过使用wx.getLocation获取当前的地理位置,需要用户主动授予权限。具体参数可查看官方文档。wx.getLocation({ type: 'wgs84', // 返回Gps...原创 2020-04-08 13:32:15 · 2229 阅读 · 1 评论