cabinx的博客

将微信公众号的部分功能跳转至小程序。

进入ali-oss开发者平台

H5网页判断是否安装了某个APP，安装则跳转未安装则下载的方案总结1.需求背景最近开发的H5项目出了一个需求，即H5网页判断是否安装了某个APP，若安装则跳转至APP，若未安装则跳转至下载页面。解决方案调用以下函数即可：// androidDeal：安卓app协议，iosDeal：iOS app协议，androidUrl：安卓app下载链接，iosUrl：iOS app下载链接const openApp = (androidDeal, iosDeal, androidUrl, io

基于vue的H5项目动态换肤的功能的实现方法总结1.业务需求：最近在做一个基于vue的H5项目，其中设计到一个项目动态换肤的功能，为此在网上也查了一些相关的资料，但最后都没有用上，后来自己想到了一套相对比较简单且比较容易实现的方法，下面做一个简单的demo供大家参考，具体业务可以在此基础上自行进项拓展。效果如下：2.解决方案：第一步，我是在项目的home页上进行动态设置的HTML界面编写：<!--这是一个单选框，用于选择某一个颜色（checkColor：表示选取的颜色值）

基于vant的van-picker实现自定义的四层区域组件的封装方法总结1.业务需求：最近在做一个vue的H5项目，由于项目的需求，需要在项目中使用后端管理系统维护的区域在H5上面进行渲染并选择，注意这里的区域总共有4层，并且通过组件需要返回4层区域的全部信息。先展示一下最终的效果：2.解决方案：第一步：坑定是先找一个容器容纳这个组件，这里我们使用的vant的van-picker，HTML代码如下（其中：columns：表示组件数据，cancel：表示点击取消触发的函数，confirm：

微信JS-SDK使用chooseImage多选图片并上传方案总结需求描述:最近在H5项目中需要在上传图片时多选，但是由于在微信浏览器中上传多选时受微信系统、手机操作系统、手机品牌等因素的影响，导致部分手机在微信浏览器中并不能正常多选图片并上传。因此经过踩坑发现可以使用微信JS-SDK来解决上述问题，注意：本方法只能在微信浏览器中有效。解决方案:这里关于获取微信SDK的openID等相关信息的操作不再赘述，只讲多选图片并上传的操作，具体实现如下： // chooseImage操作

H5图片上传压缩方案总结需求描述:最近在H5项目中上传图片时考虑到部分用户上传的图片时手机实时拍摄的，这部分图片普遍偏大，而实际使用场景不需要这么大的图片也能预览的很清楚，所以在用户上传图片时使用压缩的方法来控制上传的图片的大小。解决方案:这里的图片压缩方法主要是通过canvas来实现，具体实现的方法如下： // base64 转 Blob 格式 和file格式 base64UrlToBlob (urlData) { let arr = urlData.split(

关于vue-cli3.0以上架构移动端rem适配方案总结1.需求描述：最近在做的一个VUE新项目需要适配H5，所以这里分享一下我使用的移动端适配方案，这里要达到的效果是开发的时候用px，在项目运行起来后在浏览器端自动转换成rem适配（注意：这里的方案只适用于vue-cli3.0以上版本）。2.解决方案：1.在已经搭建好的项目中安装px2rem-loader插件（阿里前端团队开源的插件，主要作用是px转换为rem），然后在vue.config.js中进行配置： chainWebpack

H5活动页面活动倒计时时间计算方案，已做兼容处理需求描述:H5项目活动页中，涉及到活动倒计时时间差值计算，倒计时时间的格式为：如果大于1天则显示天数（如：10天），如果小于一天则显示时分秒（如：05:15:25）。解决方案: // 活动结束时间为：endDate // endDate时间格式为：'2021-07-01 15:43:02'或'2021/07/01 15:43:02' let dateDown = '00:00:00' const end = endDate.i

H5区分手机浏览器类型方案总结需求描述:最近在H5的项目中需要区分手机浏览器的类型。解决方案:移动端手机浏览器类型的判断还是用到了userAgent属性，由于移动端的平台不同，浏览器的类型也很多，所以区分的方式如下：function mobileType() { const u = navigator.userAgent const t = {// 移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1, // IE内核

关于vue-cli项目在Safari浏览器中的兼容性处理方案总结需求描述:最近在vue-cli开发的H5项目中集成了微信JSSDK以解决项目中的一些需求，在项目测试的时候遇到了兼容性的问题：在android系统的微信浏览器以及PC端微信开发者工具中测试没有任何问题，但是在IOS系统的Safari浏览器中测试时发现，当到达指定页面时，页面中JSSDK鉴权需要使用当前页面的url信息，在此时刷新页面后取得的url信息不能及时更新，导致当前页面再使用url信息做鉴权操作时就会报鉴权失败；换一种方式，当在当前

关于vant3中vant-image使用lazy-load报错：Uncaught (in promise) TypeError: Cannot read property ‘deep’ of undefined解决方案问题描述:vant3中vant-image使用lazy-load出现以下报错：Uncaught (in promise) TypeError: Cannot read property 'deep' of undefined解决方案:上述问题的原因在于：vant

基于vant实现H5列表的上拉分页及下拉刷新功能总结1.业务需求：最近在做一个vue的H5项目，目前遇到一个需求是在一个list列表上由于数据量较大，所以要分页实现数据的加载，即根据用户的滑动，依次加载出不同页数的数据，并且要实现下拉刷新当前数据。这里我主要分享如何通过接口请求来实现列表的分页与刷新。2.解决方案：第一部分，HTML模版（refreshing：控制刷新，loading：控制加载，finished：控制是否完成；注意：声明上述变量的时候初始值都为false）： <