HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

uni-app 选择车牌号

uniapp

uni-app 选择车牌号

github地址,喜欢的可以star下哦

插件预览图

使用教程

1.插件代码拷贝

  • 下载后把components目录下licensePlate/licensePlate.vue文件拷贝到自己项目目录下

2.插件使用

  • vue页面使用
<template>  
    <view>  
        <licensePlate :licensePlateDefault="licensePlateDefault" @success="licensePlateGet"/>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                licensePlateDefault:"",//默认车牌号  
            }  
        },  
        methods: {  
            // 获取车牌号  
            licensePlateGet(val){  
                uni.showToast({  
                    title:val+'',  
                    icon:"none"  
                })  
            }  
        }  
    }  
</script>
兼容性

uni-app项目中使用都兼容

继续阅读 »

uni-app 选择车牌号

github地址,喜欢的可以star下哦

插件预览图

使用教程

1.插件代码拷贝

  • 下载后把components目录下licensePlate/licensePlate.vue文件拷贝到自己项目目录下

2.插件使用

  • vue页面使用
<template>  
    <view>  
        <licensePlate :licensePlateDefault="licensePlateDefault" @success="licensePlateGet"/>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                licensePlateDefault:"",//默认车牌号  
            }  
        },  
        methods: {  
            // 获取车牌号  
            licensePlateGet(val){  
                uni.showToast({  
                    title:val+'',  
                    icon:"none"  
                })  
            }  
        }  
    }  
</script>
兼容性

uni-app项目中使用都兼容

收起阅读 »

uniapp地图定位插件分享

地图 定位 uniapp插件

近期老是有人问我怎么做一版较好的位置定位插件。所以为了照顾下做微信小程序的同学,选择用腾讯地图做了一版地图位置定位,滑动地图中心点获取位置信息,加入了城市选择器,关键字搜索等功能,希望大家支持该插件;

在移动应用开发中,地图定位是一项常见且重要的功能。无论是社交应用、出行导航还是在线订餐,地图定位都为用户提供了极大的便利。UniApp 作为一个高效的跨平台开发框架,提供了丰富的 API 来实现地图定位功能。本文将指导你如何在 UniApp 中实现获取地图定位的功能。

准备工作
在开始之前,确保你已经拥有以下几项准备:
1.阅读并理解 UniApp 官方文档关于位置相关 API 的说明。
2.在 manifest.json 文件中配置好地图和定位相关的权限。
3.安装并配置好地图服务SDK,比如高德地图或腾讯地图等。

使用方法
图片

图片

图片

注意:在h5前端的话要跨域否则获取不了定位的信息,微信小程序无需跨域。另外还需腾讯地图那申请mapkey(demo上是我自己申请的,如果该插件用在项目上,建议用户重新申请mapkey)
配置easycom规则后,自动按需引入,无需import组件,直接引用即可,目前只是做了个比较简单demo,后续会继续扩展;locPath这个是中心图片最好设置下,不设置图片路径视觉较差

如果想接入高端地图的话可以在评论区@我,如果需求量大的话我会做一版高德,帮大家解决问题;

效果预览
图片
图片
图片

支持平台
目前支持小程序, app, h5。

下载地址
插件地址

继续阅读 »

近期老是有人问我怎么做一版较好的位置定位插件。所以为了照顾下做微信小程序的同学,选择用腾讯地图做了一版地图位置定位,滑动地图中心点获取位置信息,加入了城市选择器,关键字搜索等功能,希望大家支持该插件;

在移动应用开发中,地图定位是一项常见且重要的功能。无论是社交应用、出行导航还是在线订餐,地图定位都为用户提供了极大的便利。UniApp 作为一个高效的跨平台开发框架,提供了丰富的 API 来实现地图定位功能。本文将指导你如何在 UniApp 中实现获取地图定位的功能。

准备工作
在开始之前,确保你已经拥有以下几项准备:
1.阅读并理解 UniApp 官方文档关于位置相关 API 的说明。
2.在 manifest.json 文件中配置好地图和定位相关的权限。
3.安装并配置好地图服务SDK,比如高德地图或腾讯地图等。

使用方法
图片

图片

图片

注意:在h5前端的话要跨域否则获取不了定位的信息,微信小程序无需跨域。另外还需腾讯地图那申请mapkey(demo上是我自己申请的,如果该插件用在项目上,建议用户重新申请mapkey)
配置easycom规则后,自动按需引入,无需import组件,直接引用即可,目前只是做了个比较简单demo,后续会继续扩展;locPath这个是中心图片最好设置下,不设置图片路径视觉较差

如果想接入高端地图的话可以在评论区@我,如果需求量大的话我会做一版高德,帮大家解决问题;

效果预览
图片
图片
图片

支持平台
目前支持小程序, app, h5。

下载地址
插件地址

收起阅读 »

欢迎加入uniapp |小程序 | App |H5 分享 交流

移动APP uniapp

如果想一起交流技术的/平时在项目中遇到问题bug要想解决的/想开发插件定制项目App的.....,欢迎大佬小白加入交流;

如果想一起交流技术的/平时在项目中遇到问题bug要想解决的/想开发插件定制项目App的.....,欢迎大佬小白加入交流;

使用hbuilder x创建的uniapp使用tailwind css

css uniapp HBuilderX

按照上图配置,即可在hbuilder x创建的uniapp中使用tailwind css了。

按照上图配置,即可在hbuilder x创建的uniapp中使用tailwind css了。

欢迎加入uniapp |小程序 | App |H5 分享 交流群

安卓 iOS uniapp

如果想一起交流技术的/平时在项目中遇到问题bug要想解决的/想开发插件定制项目App的.....,欢迎大佬小白加入交流;

如果想一起交流技术的/平时在项目中遇到问题bug要想解决的/想开发插件定制项目App的.....,欢迎大佬小白加入交流;

编程中最重要的是什么,答案:顺序

bug 顺序 编程顺序

因为顺序产生或者隐藏bug也超级难发现,记录自己踩过的坑!!!

因为顺序产生或者隐藏bug也超级难发现,记录自己踩过的坑!!!

每次升级,都有问题

已知bug

彻底放弃,回去apiclound!!!!有病的企业,开发个锤子!!!一堆垃圾!!!

彻底放弃,回去apiclound!!!!有病的企业,开发个锤子!!!一堆垃圾!!!

uniapp小程序开发运营交流群

uniapp小程序开发运营交流群
相互交流学习

uniapp小程序开发运营交流群
相互交流学习

高效准确的身份证号校验正则分享

正则

线上一直在使用的身份证校验, 经过线上问题反馈不断优化完善了以下几点。

  1. 年份的处理:第七位到第十位是年份,这两位可以是19或者20,处理了更早或更晚的年份。考虑到身份证的合法性,应考虑年份的合理范围,如1920-2099。
  2. 月份的处理:第十一位和第十二位是月份,处理01-12已经很完善。
  3. 日期的处理:第十三位和第十四位是日期,从01-31之间的数值,尚未处理2月份的闰年与平年及不同月份天数的情况。
  4. 正则表达式的简化:可以简化以提高可读性。

function checkIDCard(idcode) {  
    // 加权因子  
    var weight_factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];  
    // 校验码  
    var check_code = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];  

    var code = idcode + '';  
    var last = code[17]; //最后一位  

    var seventeen = code.substring(0, 17);  

    // ISO 7064:1983.MOD 11-2  
    // 判断最后一位校验码是否正确  
    var arr = seventeen.split('');  
    var len = arr.length;  
    var num = 0;  
    for (var i = 0; i < len; i++) {  
        num = num + arr[i] * weight_factor[i];  
    }  

    // 获取余数  
    var resisue = num % 11;  
    var last_no = check_code[resisue];  

    // 格式的正则  
    var idcard_patter =  
        /^[1-9]\d{5}(19\d{2}|20[0-9]{2})(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}(\d|X)$/;  

    // 判断格式是否正确  
    var format = idcard_patter.test(idcode);  

    // 容错  
    var failIdcard = '632721201307070036';  
    var result = failIdcard === idcode;  

    // 返回验证结果,校验码和格式同时正确才算是合法的身份证号码  
    return (last === last_no && format) || result;  
}  
继续阅读 »

线上一直在使用的身份证校验, 经过线上问题反馈不断优化完善了以下几点。

  1. 年份的处理:第七位到第十位是年份,这两位可以是19或者20,处理了更早或更晚的年份。考虑到身份证的合法性,应考虑年份的合理范围,如1920-2099。
  2. 月份的处理:第十一位和第十二位是月份,处理01-12已经很完善。
  3. 日期的处理:第十三位和第十四位是日期,从01-31之间的数值,尚未处理2月份的闰年与平年及不同月份天数的情况。
  4. 正则表达式的简化:可以简化以提高可读性。

function checkIDCard(idcode) {  
    // 加权因子  
    var weight_factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];  
    // 校验码  
    var check_code = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];  

    var code = idcode + '';  
    var last = code[17]; //最后一位  

    var seventeen = code.substring(0, 17);  

    // ISO 7064:1983.MOD 11-2  
    // 判断最后一位校验码是否正确  
    var arr = seventeen.split('');  
    var len = arr.length;  
    var num = 0;  
    for (var i = 0; i < len; i++) {  
        num = num + arr[i] * weight_factor[i];  
    }  

    // 获取余数  
    var resisue = num % 11;  
    var last_no = check_code[resisue];  

    // 格式的正则  
    var idcard_patter =  
        /^[1-9]\d{5}(19\d{2}|20[0-9]{2})(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}(\d|X)$/;  

    // 判断格式是否正确  
    var format = idcard_patter.test(idcode);  

    // 容错  
    var failIdcard = '632721201307070036';  
    var result = failIdcard === idcode;  

    // 返回验证结果,校验码和格式同时正确才算是合法的身份证号码  
    return (last === last_no && format) || result;  
}  
收起阅读 »

苹果web签网页应用发布

iOS打包 iOS

**如果你用的uniapp开发的app,如果你刚好适配了移动pc应用,如果你想使用ios访问应用,如果你因为苹果开发平台和99刀烦恼,
使用苹果网页签,桌面图标点进去就能运行你的网页应用,,, 联系我:563150499@qq.com

**如果你用的uniapp开发的app,如果你刚好适配了移动pc应用,如果你想使用ios访问应用,如果你因为苹果开发平台和99刀烦恼,
使用苹果网页签,桌面图标点进去就能运行你的网页应用,,, 联系我:563150499@qq.com

uniapp 如何实现视频通话小窗口功能

聊天 视频

需求:
视频通话小窗口

实现:
视频通话页面使用nvue。
视频流使用原生插件。
小窗口使用原生插件。
通话页面的隐藏/显示用 webview的show/hide

遇到的问题:
应用是底部4个 tab,当视频通话在第一个tab打开时,无法在其他三个 tab,实现webview的显示。

疑问:
uni针对底部tab,每个tab都是独立的页面栈。如何做到可以获取非当前tab的webview窗口?

欢迎大佬们在这里针对这个话题来讨论,最终解决问题的红包双手奉上...............

继续阅读 »

需求:
视频通话小窗口

实现:
视频通话页面使用nvue。
视频流使用原生插件。
小窗口使用原生插件。
通话页面的隐藏/显示用 webview的show/hide

遇到的问题:
应用是底部4个 tab,当视频通话在第一个tab打开时,无法在其他三个 tab,实现webview的显示。

疑问:
uni针对底部tab,每个tab都是独立的页面栈。如何做到可以获取非当前tab的webview窗口?

欢迎大佬们在这里针对这个话题来讨论,最终解决问题的红包双手奉上...............

收起阅读 »

关于uniappX启动图的踩坑(APP启动图)

记录自己的踩坑日记一:

图片来自网络,只是举例:
上图
图1是打包成功的画法

图2 图3 是错误的画法

图1的右边黑线和底部黑线是属于保护区,左边和上边属于拉伸区

记录自己的踩坑日记一:

图片来自网络,只是举例:
上图
图1是打包成功的画法

图2 图3 是错误的画法

图1的右边黑线和底部黑线是属于保护区,左边和上边属于拉伸区