HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

'PDRCore.h' file not found

常见问题

我将最新的IOS SDK下载解压之后,然后将HBuilder-Hello项目拷贝到其他目录,然后通过xcode打开运行的时候就会报:'PDRCore.h' file not found。

我将最新的IOS SDK下载解压之后,然后将HBuilder-Hello项目拷贝到其他目录,然后通过xcode打开运行的时候就会报:'PDRCore.h' file not found。

社区团购生鲜商城软件开发

微信小程序

社区团购是目前生鲜电商优的商业模式。
简单讲,社区团购的整个交易链条有三个角色,平台、团长和消费者。
平台提供的商品多为生鲜类,消费者挑选自己需要的商品在线下单。一般当日下单,隔日提供商品,
而商品后一公里的服务由在客户附近的「团长」完成。团长多为小区周围的便利店店主或者小区里的宝妈等。
团长解决了后一公里的配送和仓储,又因为偏「个人」的属性大大降低了交易的信任成本,同时优秀的团长还部分解决了平台 c 端用户获取和复购的问题。
国内社区团购的生意并非今天才开始兴起。
2018 年,国内批社区团购的创业公司开始在不同的省份跑圈地,而资本也差不多是在那个时间里开始下注。当时头部平台的标准都是月交易额过亿,这场在初创公司之间的小战役,只打了一年的时间。
后,以十荟团收购你我您而阶段性结束。
进入 2020 年,一场突如其来的疫情打乱了所有人的准备。疫情期间的特殊场景,让电商生态进一步渗透。
而相较于已经成熟的传统电商品类,很多用户是真的在 2020 年次尝试在线买菜。一次被动的,但较大规模用户习惯的刺激,使得社区团购这一目前生鲜电商优的商业模式再次得到了快速发展。

继续阅读 »

社区团购是目前生鲜电商优的商业模式。
简单讲,社区团购的整个交易链条有三个角色,平台、团长和消费者。
平台提供的商品多为生鲜类,消费者挑选自己需要的商品在线下单。一般当日下单,隔日提供商品,
而商品后一公里的服务由在客户附近的「团长」完成。团长多为小区周围的便利店店主或者小区里的宝妈等。
团长解决了后一公里的配送和仓储,又因为偏「个人」的属性大大降低了交易的信任成本,同时优秀的团长还部分解决了平台 c 端用户获取和复购的问题。
国内社区团购的生意并非今天才开始兴起。
2018 年,国内批社区团购的创业公司开始在不同的省份跑圈地,而资本也差不多是在那个时间里开始下注。当时头部平台的标准都是月交易额过亿,这场在初创公司之间的小战役,只打了一年的时间。
后,以十荟团收购你我您而阶段性结束。
进入 2020 年,一场突如其来的疫情打乱了所有人的准备。疫情期间的特殊场景,让电商生态进一步渗透。
而相较于已经成熟的传统电商品类,很多用户是真的在 2020 年次尝试在线买菜。一次被动的,但较大规模用户习惯的刺激,使得社区团购这一目前生鲜电商优的商业模式再次得到了快速发展。

收起阅读 »

uni-app 启动页方案

启动页

在pages.json 里面 配置条件编译 首页
在启动页面 判断是否登录 (这种方式不影响h5打包 而且app 不会一闪 启动页可以随意编辑)

在pages.json 里面 配置条件编译 首页
在启动页面 判断是否登录 (这种方式不影响h5打包 而且app 不会一闪 启动页可以随意编辑)

uni.request 没有返回全部 response Headers

RequestHeader

出现这个情况是在跨域请求中才会有的。
只需要在后端响应头中添加一个属性 Access-Control-Expose-Headers: [属性名] 即可获取到你要想的属性
我这里使用的 php 想要获取到自定义 token,如下

前端正常获取

值得一提,这个其实在 uniapp 文档中有提过一句,只是当时没仔细看,导致自己摸索大半天。还要不是跨域的情况下不需要这样配置。

继续阅读 »

出现这个情况是在跨域请求中才会有的。
只需要在后端响应头中添加一个属性 Access-Control-Expose-Headers: [属性名] 即可获取到你要想的属性
我这里使用的 php 想要获取到自定义 token,如下

前端正常获取

值得一提,这个其实在 uniapp 文档中有提过一句,只是当时没仔细看,导致自己摸索大半天。还要不是跨域的情况下不需要这样配置。

收起阅读 »

云函数,云数据库,云存储应该全部走云服务商的内网,不然相比传统毫无优势

uniCloud

现在都走外网所以慢。
这个不论规模大小,阿里云应该都能实现的。
默认走内网吧,实在找不到什么理由默认走外网哦。

现在都走外网所以慢。
这个不论规模大小,阿里云应该都能实现的。
默认走内网吧,实在找不到什么理由默认走外网哦。

想做一款小程序,小程序与APP相比有什么优缺点?

微信小程序

微信小程序的优势小程序的特点小程序的开发周期小程序适合什么样的用户怎样运营自己的小程序能给自己带来什么?

小程序有哪些优势?

对于用户来说,小程序与APP相比,用户不用下载,想使用的时候直接打开就可以了,不用的时候直接关掉,即用即走,不占没存,不需要安装卸载。
小程序主要的样式代码都封装在微信小程序里面,打开速度相对h5来说更加的快速,并且已经很接近原生APP。
微信小程序可以添加到手机桌面,看上去效果和APP是差不多的,用户在使用时可以直接在桌面上找到,以及直接消除,可以说非常的方便。当然这点仅限于安卓手机。
运行速度和APP差不多,可以实现APP90%的功能,要比h5强太多,开发成本和h5差不多,要比APP节省一部分开发成本。
能够调用通讯录、蓝牙等深度系统权限,应用体验比H5页面更流畅。
小程序有哪些缺点?

首当其先的就是小程序的推送能力,小程序目前只能通过分享将其分享至好友列表的好友,不能转发到朋友圈,这对于一些需要借助朋友圈人脉网络裂变式扩散的需求,就显得不太好了。
小程序不支持随意跳转外链,每个外链都需要到后台“开发设置”里添加业务域名,所以间接地影响到了小程序的开放性,这样就限制了其他支付方式以及功能的接入,这也决定了基于小程序,难以构建起信息整合、分发的一站式平台。
微信小程序只有2M大小,这就导致无法开发一些大型的小程序。所以目前你会看到很多小程序很小很简单。如果追求品质、细节的复杂应用,建议在APP上进行。
小程序需要像APP一样上架,相比于h5的即做即发要麻烦点,并且小程序每次提交版本都需要微信团队的审核,更新频繁的话确实是很麻烦。
所以,选择开发小程序或者APP要根据自己的需求进行,取其长而避其短,透过外表看本质你才能更进一步知道你做小程序或者是APP的目的,想怎样推广引流,想怎样运营,需要避开一些小程序无法实现的,或是不容易实现的,根据这些来判断自己是否要做小程序。

继续阅读 »

微信小程序的优势小程序的特点小程序的开发周期小程序适合什么样的用户怎样运营自己的小程序能给自己带来什么?

小程序有哪些优势?

对于用户来说,小程序与APP相比,用户不用下载,想使用的时候直接打开就可以了,不用的时候直接关掉,即用即走,不占没存,不需要安装卸载。
小程序主要的样式代码都封装在微信小程序里面,打开速度相对h5来说更加的快速,并且已经很接近原生APP。
微信小程序可以添加到手机桌面,看上去效果和APP是差不多的,用户在使用时可以直接在桌面上找到,以及直接消除,可以说非常的方便。当然这点仅限于安卓手机。
运行速度和APP差不多,可以实现APP90%的功能,要比h5强太多,开发成本和h5差不多,要比APP节省一部分开发成本。
能够调用通讯录、蓝牙等深度系统权限,应用体验比H5页面更流畅。
小程序有哪些缺点?

首当其先的就是小程序的推送能力,小程序目前只能通过分享将其分享至好友列表的好友,不能转发到朋友圈,这对于一些需要借助朋友圈人脉网络裂变式扩散的需求,就显得不太好了。
小程序不支持随意跳转外链,每个外链都需要到后台“开发设置”里添加业务域名,所以间接地影响到了小程序的开放性,这样就限制了其他支付方式以及功能的接入,这也决定了基于小程序,难以构建起信息整合、分发的一站式平台。
微信小程序只有2M大小,这就导致无法开发一些大型的小程序。所以目前你会看到很多小程序很小很简单。如果追求品质、细节的复杂应用,建议在APP上进行。
小程序需要像APP一样上架,相比于h5的即做即发要麻烦点,并且小程序每次提交版本都需要微信团队的审核,更新频繁的话确实是很麻烦。
所以,选择开发小程序或者APP要根据自己的需求进行,取其长而避其短,透过外表看本质你才能更进一步知道你做小程序或者是APP的目的,想怎样推广引流,想怎样运营,需要避开一些小程序无法实现的,或是不容易实现的,根据这些来判断自己是否要做小程序。

收起阅读 »

拼拼有礼商城模式定制开发

小程序

多人拼团一人中奖、三人拼团一人中奖、五人拼团一人中奖系统、十人拼团三人中奖模式、三十人拼购3人中奖、百人拼团N人中团的软件、小程序、公众号、H5手机网页版版本、APP版本的均可制作、开发流程?
现在拼团是短时间内通过价集中人气吸引购买的营销活动,通常以较少的商品数量和较低的价格作为噱头,限定开始购买的时间后,会在以秒为单位的时间内被抢购一空。这一营销功能在第三方商城平台上的应用也已非常普遍了。与拼团一样,拼团也能在活动期间聚集大量人气,为拼团拼团小程序商城引流。
丰富的营销活动,、团购、限时抢购,天天都有新玩法。
一键转发,图文分享,拉新拓客,快速起量,抓住更多流量,先人一步抢占市场。
舒适的用户体验,性能快速流畅,不卡顿,用户不流失。
快速实现企业规模扩张,脱颖而出,得到资本市场的青睐!
会员下单,团长收益立即可见,总部结算,自由。
订单到货自动通知,一键取货快捷操作。
团长销售排名,经营数据,清晰展现,随时掌握团长动态。
团长分级,差异化佣金管理,多劳多得,深度绑定,互利双赢!

继续阅读 »

多人拼团一人中奖、三人拼团一人中奖、五人拼团一人中奖系统、十人拼团三人中奖模式、三十人拼购3人中奖、百人拼团N人中团的软件、小程序、公众号、H5手机网页版版本、APP版本的均可制作、开发流程?
现在拼团是短时间内通过价集中人气吸引购买的营销活动,通常以较少的商品数量和较低的价格作为噱头,限定开始购买的时间后,会在以秒为单位的时间内被抢购一空。这一营销功能在第三方商城平台上的应用也已非常普遍了。与拼团一样,拼团也能在活动期间聚集大量人气,为拼团拼团小程序商城引流。
丰富的营销活动,、团购、限时抢购,天天都有新玩法。
一键转发,图文分享,拉新拓客,快速起量,抓住更多流量,先人一步抢占市场。
舒适的用户体验,性能快速流畅,不卡顿,用户不流失。
快速实现企业规模扩张,脱颖而出,得到资本市场的青睐!
会员下单,团长收益立即可见,总部结算,自由。
订单到货自动通知,一键取货快捷操作。
团长销售排名,经营数据,清晰展现,随时掌握团长动态。
团长分级,差异化佣金管理,多劳多得,深度绑定,互利双赢!

收起阅读 »

uniapp + 纯nuve开发的一个app, 推荐给大家




句馆是一款基于文艺生活为兴趣匹配交友的社区,本社区以经典句签、短视频、动态分享、匹配交友、兴趣圈子等为核心功能。简洁化的设计风格,是复杂社会难能可贵的心灵净土。句子虽短,总能入心,我们致力于打造纯净化交友社区,在句馆,遇见有趣的灵魂。

【句签】汇聚海量美句,收录数万作者,感悟生活,品读经典

【视频】情感、读书、影视等各大领域达人入驻,指尖精彩触手可及

【动态】用心生活,记录美好,你的每个精彩动态都会遇到一次心动

【联系句馆】
官方邮箱:kf@juguanapp.com
官方网站:www.juguanapp.com

各大应用市场均已上架 搜索 句馆
应用宝下载地址:https://a.app.qq.com/o/simple.jsp?pkgname=vip.juguan
下载地址

继续阅读 »




句馆是一款基于文艺生活为兴趣匹配交友的社区,本社区以经典句签、短视频、动态分享、匹配交友、兴趣圈子等为核心功能。简洁化的设计风格,是复杂社会难能可贵的心灵净土。句子虽短,总能入心,我们致力于打造纯净化交友社区,在句馆,遇见有趣的灵魂。

【句签】汇聚海量美句,收录数万作者,感悟生活,品读经典

【视频】情感、读书、影视等各大领域达人入驻,指尖精彩触手可及

【动态】用心生活,记录美好,你的每个精彩动态都会遇到一次心动

【联系句馆】
官方邮箱:kf@juguanapp.com
官方网站:www.juguanapp.com

各大应用市场均已上架 搜索 句馆
应用宝下载地址:https://a.app.qq.com/o/simple.jsp?pkgname=vip.juguan
下载地址

收起阅读 »

解决打不开内置浏览器的问题(提示:[WARNING:] error : "无法加载库XX\builtincef3browser.dll:找不到指定的程序。")

内置浏览器

上个月在官网中提了这个问题,虽然官方及时回复,但没解决问题。空下来网上搜了一些,又尝试了一番,有两个解决办法:
1、在网上找到的方法:只需要将 bin目录下的 libcef.dll、cef.pak、icudtl.dat、natives_blob.bin、snapshot_blob.bin 文件剪切(或复制、软链接)到 Hbuilder.exe 同目录下即可解决。
2、如果你和我一样是完美主义患者,不想动bin下的文件(因为升级时很有可能重新下载),那也简单,只需在运行 HBuilderX.exe 前将环境变量PATH中加入 bin 目录的绝对路径即可,具体操作如下:
a、新建一个批处理 run.bat,并编辑。
b、加入:
set PATH=HBuilderX的安装路径\bin;%PATH%;
start "" HBuilderX.exe的路径
比如我的:
set PATH=%~dp0HBuilderX\bin;%PATH%;
start "" HBuilderX\HBuilderX.exe
这样就可以解决了。
看来官方在运行HBuilderX.exe时并没有把bin添加进环境变量中,希望官方能解决一下这个问题(Qt中也就一句代码的事)。

继续阅读 »

上个月在官网中提了这个问题,虽然官方及时回复,但没解决问题。空下来网上搜了一些,又尝试了一番,有两个解决办法:
1、在网上找到的方法:只需要将 bin目录下的 libcef.dll、cef.pak、icudtl.dat、natives_blob.bin、snapshot_blob.bin 文件剪切(或复制、软链接)到 Hbuilder.exe 同目录下即可解决。
2、如果你和我一样是完美主义患者,不想动bin下的文件(因为升级时很有可能重新下载),那也简单,只需在运行 HBuilderX.exe 前将环境变量PATH中加入 bin 目录的绝对路径即可,具体操作如下:
a、新建一个批处理 run.bat,并编辑。
b、加入:
set PATH=HBuilderX的安装路径\bin;%PATH%;
start "" HBuilderX.exe的路径
比如我的:
set PATH=%~dp0HBuilderX\bin;%PATH%;
start "" HBuilderX\HBuilderX.exe
这样就可以解决了。
看来官方在运行HBuilderX.exe时并没有把bin添加进环境变量中,希望官方能解决一下这个问题(Qt中也就一句代码的事)。

收起阅读 »

最高检:网络黑灰产成为网络犯罪多发高发的重要原因

法律科普

最高人民检察院1月25日召开新闻发布会,最高检检察委员会委员、第四检察厅厅长郑新俭介绍了近年来检察机关办案中,当前网络犯罪呈现的五大趋势

一是犯罪案件数量上升迅猛。

近年来,检察机关办理网络犯罪案件以年均近40%的速度攀升,2020年达到了54%。特别是战“疫”期间检察机关办理的诈骗犯罪案件中,有三分之一是利用网络实施。在所有网络犯罪中,网络诈骗、网络赌博(包括开设赌场罪和赌博罪)高位运行,成为当前主要网络犯罪。

二是网络黑灰产形成生态圈,为犯罪持续“输血供粮”。

黑灰产上游为犯罪集团提供技术工具、收集个人信息,或为导流获客、广告推广;中游实施诈骗或开设赌场等犯罪;下游利用支付通道“洗白”资金,构建起完整黑灰产生态圈。规模庞大的地下黑产密切配合,为网络犯罪持续“输血供粮”,成为网络犯罪多发高发的重要原因。

三是犯罪手段花样更新。

网上网下、境内境外、虚拟现实相互结合,网络犯罪手段方式交织升级。据不完全统计,当前网络诈骗手法多达6大类300多种,而且还在不断“推陈出新”。

四是犯罪主体呈现向“三低”人群发展的态势。

网络犯罪非接触性降低犯罪悖德感和罪恶感、超长的黑灰产业链细化犯罪分工,降低犯罪专业门槛,加之超高的收益,致使大量法律意识薄弱、社会经验不足的人步入犯罪“陷阱”。网络犯罪主体开始向低龄、低学历、低收入“三低”人群发展,一些在校学生、社会务工人员都深陷其中。

五是犯罪危害叠加升级。

网络犯罪危害在政治、经济、社会、文化等层面相互交织传导,社会危害“量”的积累往往短时间内导致“质”的突变,敏感的生活“小”信息往往会酿成严重的社会“大”事件。

郑新俭同时还表示,此前针对网络诽谤等严重扰乱网络社会公共秩序的行为,检察机关建议公安机关对“杭州女子取快递被造谣案”立案侦查,推动刑事自诉案件转为公诉,向社会传递“网络空间不是法外之地”的强烈信号。

最高人民检察院同日还发布了《人民检察院办理网络犯罪案件规定》(以下简称《规定》)。《规定》以办案流程为脉络,以事实证据审查为主线,对检察机关办理网络犯罪案件提出了规范指引,对办案技术融合、一体协作办案等机制建设提出了具体要求,以更好提升办案质效,推动网络治理,维护网络安全。

【转自:凤凰网,来源:人民网】,声明:转载此文是出于传递更多信息之目的。若有来源标注错误或侵犯了您的合法权益,请作者持权属证明与本网联系,我们将及时更正、删除,谢谢。 邮箱地址:pufa@dcloud.io 。

原文链接

继续阅读 »

最高人民检察院1月25日召开新闻发布会,最高检检察委员会委员、第四检察厅厅长郑新俭介绍了近年来检察机关办案中,当前网络犯罪呈现的五大趋势

一是犯罪案件数量上升迅猛。

近年来,检察机关办理网络犯罪案件以年均近40%的速度攀升,2020年达到了54%。特别是战“疫”期间检察机关办理的诈骗犯罪案件中,有三分之一是利用网络实施。在所有网络犯罪中,网络诈骗、网络赌博(包括开设赌场罪和赌博罪)高位运行,成为当前主要网络犯罪。

二是网络黑灰产形成生态圈,为犯罪持续“输血供粮”。

黑灰产上游为犯罪集团提供技术工具、收集个人信息,或为导流获客、广告推广;中游实施诈骗或开设赌场等犯罪;下游利用支付通道“洗白”资金,构建起完整黑灰产生态圈。规模庞大的地下黑产密切配合,为网络犯罪持续“输血供粮”,成为网络犯罪多发高发的重要原因。

三是犯罪手段花样更新。

网上网下、境内境外、虚拟现实相互结合,网络犯罪手段方式交织升级。据不完全统计,当前网络诈骗手法多达6大类300多种,而且还在不断“推陈出新”。

四是犯罪主体呈现向“三低”人群发展的态势。

网络犯罪非接触性降低犯罪悖德感和罪恶感、超长的黑灰产业链细化犯罪分工,降低犯罪专业门槛,加之超高的收益,致使大量法律意识薄弱、社会经验不足的人步入犯罪“陷阱”。网络犯罪主体开始向低龄、低学历、低收入“三低”人群发展,一些在校学生、社会务工人员都深陷其中。

五是犯罪危害叠加升级。

网络犯罪危害在政治、经济、社会、文化等层面相互交织传导,社会危害“量”的积累往往短时间内导致“质”的突变,敏感的生活“小”信息往往会酿成严重的社会“大”事件。

郑新俭同时还表示,此前针对网络诽谤等严重扰乱网络社会公共秩序的行为,检察机关建议公安机关对“杭州女子取快递被造谣案”立案侦查,推动刑事自诉案件转为公诉,向社会传递“网络空间不是法外之地”的强烈信号。

最高人民检察院同日还发布了《人民检察院办理网络犯罪案件规定》(以下简称《规定》)。《规定》以办案流程为脉络,以事实证据审查为主线,对检察机关办理网络犯罪案件提出了规范指引,对办案技术融合、一体协作办案等机制建设提出了具体要求,以更好提升办案质效,推动网络治理,维护网络安全。

【转自:凤凰网,来源:人民网】,声明:转载此文是出于传递更多信息之目的。若有来源标注错误或侵犯了您的合法权益,请作者持权属证明与本网联系,我们将及时更正、删除,谢谢。 邮箱地址:pufa@dcloud.io 。

原文链接

收起阅读 »

图片预览手动关闭api

uniapp

uni.previewImage 预览图片需要用户主动关闭
可不可以增加关闭api

uni.previewImage 预览图片需要用户主动关闭
可不可以增加关闭api

『兼容H5+小程序+App/Nvue』uniapp自定义弹框uaPopup组件(升级版)

uniapp uniapp插件

基于uni-app开发兼容全端自定义弹出框ua-popup插件,可完美运行在h5、小程序及app端。

uaPopup 一款整合了msg信息框、alert提示框、dialog对话框、actionSheet底部面板框、toast轻提示框、android/ios弹窗等多种弹窗效果。可以自定义弹窗样式及按钮样式和事件、多个弹窗嵌套显示,支持自定义插槽模板内容。

如下图:h5/小程序/app端效果
img

可覆盖在Nvue原生页面video组件之上

img

引入组件

uapopup 支持全局main.js引入或页面单独引入使用。

import UAPopup from './components/ua-popup/index.vue'  
Vue.component('ua-popup', UAPopup)

自hbuilderx2.5起 支持easycom组件模式。根据使用习惯,也可以改为components/ua-popup/ua-popup.vue方式,系统会自定义识别组件,无需再手动注册引入。

使用组件

ua-popup支持组件写法和函数式写法来调用组件。

  • 组件式调用
<!-- msg提示 -->  
<ua-popup v-model="showMsg" anim="fadeIn" content="上善若水,水利万物而不争" shadeClose="false" time="3" />  

<!-- 询问框 -->  
<ua-popup v-model="showConfirm" shadeClose="false" title="标题" xclose z-index="2001"  
    content="<div style='color:#ff557f;padding:20px 40px;'>一切都将一去杳然,任何人都无法将其捕获。</div>"  
    :btns="[  
        {text: '取消', click: hideConfirm},  
        {text: '确定', style: 'color:#00aa00;', click: handleInfo},  
    ]"  
/>
  • 函数式调用
// 函数式多层嵌套  
handleInfo() {  
    let $ua = this.$refs.uapopup  
    let $toast = this.$refs.uatoast  
    $ua.open({  
        content: '人生漫漫,且行且珍惜',  
        customStyle: {'background-color': 'rgba(170, 0, 127, 0.6)', 'color': '#fff'},  
        time: 3,  
        onClose() {  
            $ua.open({  
                type: 'android',  
                content: '<div style="color:#aa007f">预测未来的最好办法是自己亲手创造未来</div>',  
                customStyle: {'width': '200px'},  
                zIndex: 202120,  
                btns: [  
                    {  
                        text: 'close', click() {  
                            $ua.close()  
                        }  
                    },  
                    {  
                        text: 'Get一下',  
                        style: 'color:#00aa00;',  
                        click() {  
                            $toast.open({  
                                type: 'toast',  
                                icon: 'loading',  
                                content: '请稍后...',  
                                opacity: .2,  
                                time: 2,  
                                zIndex: 202125,  
                            })  
                        }  
                    }  
                ]  
            })  
        }  
    })  
}

img

img

编码开发

  • 支持如下20+参数自定义配置。
props: {  
    value: { type: Boolean, default: false },  
    title: String,  
    content: String,  
    type: String,  
    customStyle: { type: Object, default: null },  
    icon: String,  
    shade: { type: [Boolean, String], default: true },  
    shadeClose: { type: [Boolean, String], default: true },  
    opacity: { type: [Number, String], default: '' },  
    round: Boolean,  
    xclose: Boolean,  
    xposition: { type: String, default: 'right' },  
    xcolor: { type: String, default: '#333' },  
    anim: { type: String, default: 'scaleIn' },  
    position: String,  
    follow: { type: Array, default: null },  
    time: { type: [Number, String], default: 0 },  
    zIndex: { type: [Number, String], default: '202107' },  
    btns: {  
        type: Array, default: null  
    },  
    // 打开弹框回调  
    onOpen: { type: Function, default: null },  
    // 关闭弹框回调  
    onClose: { type: Function, default: null },  
}
  • 弹窗模板template
<template>  
    <!-- #ifdef APP-NVUE -->  
    <view v-if="opts.visible" class="ua__popup" :class="{'ua__popup-closed': closeAnim}">  
    <!-- #endif -->  
    <!-- #ifndef APP-NVUE -->  
    <view v-show="opts.visible" class="ua__popup" :class="{'ua__popup-closed': closeAnim}">  
    <!-- #endif -->  
        <!-- 遮罩层 -->  
        <view v-if="opts.shade && opts.shade!='false'" class="uapopup__overlay" @touchstart="handleShadeClick" :style="{'opacity': opts.opacity >= 0 ? opts.opacity : '', 'z-index': oIndex-1}"></view>  
        <!-- 窗口层 -->  
        <view class="uapopup__wrap" :style="{'z-index': oIndex}">  
            <view class="uapopup__child" :id="''+uuid" :class="[''+opts.anim, opts.type&&'popui__'+opts.type, opts.round&&'round', opts.position]" :style="[opts.follow&&positionStyle, opts.customStyle]">  
                <!-- //标题 -->  
                <view v-if="opts.title || $slots.title" class="uapopup__title">  
                    <template v-if="$slots.title"><slot name="title" /></template>  
                    <rich-text v-else :nodes="opts.title"></rich-text>  
                </view>  

                <!-- //toast -->  
                <!-- <view v-if="opts.type=='toast'&&opts.icon" class="toast__icons" :class="['toast'+opts.icon]" :style="{'background-image': `url(${toastIcon[opts.icon]})`}"></view> -->  
                <image v-if="opts.type=='toast'&&opts.icon" class="toast__icons" :class="['toast'+opts.icon]" :src="toastIcon[opts.icon]" mode="widthFix"></image>  
                <!-- //内容 -->  
                <view v-if="opts.content || $slots.content" class="uapopup__content">  
                    <template v-if="$slots.content"><slot name="content" /></template>  
                    <rich-text v-else :nodes="opts.content"></rich-text>  
                </view>  
                <slot />  

                <!-- //按钮组 -->  
                <view v-if="opts.btns" class="uapopup__actions">  
                    <rich-text v-for="(btn,index) in opts.btns" :key="index" class="btn" :class="{'disabled': btn.disabled}" :style="btn.style" @click="handleBtnClick($event, index)" :nodes="btn.text"></rich-text>  
                </view>  

                <!-- //关闭按钮 -->  
                <view v-if="opts.xclose" class="uapopup__xclose" :class="opts.xposition" :style="{'color': opts.xcolor}" @click="close"></view>  
            </view>  
        </view>  
    </view>  
</template>
  • 核心逻辑处理
<script>  
    /**  
     * @Desc     uniapp跨端自定义popup组件  
     * @Time     andy by 2021/7/10  
     * @About    Q:282310962  wx:xy190310  
     */  

    let index = 0  
    export default {  
        ...  
        data() {  
            return {  
                // 混入props参数,处理函数式调用  
                opts: {  
                    visible: false,  
                },  
                toastIcon: {  
                    ...  
                },  
                closeAnim: false,  
                oIndex: 202107,  
                timer: null,  
                // 长按定位初始化(避免弹框跳动闪烁)  
                positionStyle: { position: 'absolute', left: '-999px', top: '-999px' },  
            }  
        },  
        watch: {  
            value(val) {  
                const type = val ? 'open' : 'close'  
                this[type]()  
            }  
        },  
        computed: {  
            uuid() {  
                return Math.floor(Math.random() * 10000)  
            },  
        },  
        methods: {  
            // 打开弹框  
            open(options) {  
                if(this.opts.visible) return  
                this.opts = Object.assign({}, this.$props, options)  
                this.opts.visible = true  

                // nvue 的各组件在安卓端默认是透明的,如果不设置background-color,可能会导致出现重影的问题  
                // #ifdef APP-NVUE  
                if(!this.opts.customStyle['background'] && !this.opts.customStyle['background-color']) {  
                    this.opts.customStyle['background'] = '#fff'  
                }  
                // #endif  

                let _index = ++index  
                this.oIndex = _index + parseInt(this.opts.zIndex)  

                this.$emit('open')  
                typeof this.opts.onOpen === 'function' && this.opts.onOpen()  

                // 长按处理  
                if(this.opts.follow) {  
                    ...  
                }  

                ...  
            },  
            // 关闭弹框  
            close() {  
                if(!this.opts.visible) return  

                this.closeAnim = true  
                setTimeout(() => {  
                    this.opts.visible = false  
                    this.closeAnim = false  

                    this.$emit('input', false)  
                    this.$emit('close')  
                    typeof this.opts.onClose === 'function' && this.opts.onClose()  

                    this.timer && clearTimeout(this.timer)  
                    delete this.timer  
                }, 200)  
            },  

            ...  

            // 获取dom宽高  
            getDom(id) {  
                return new Promise((resolve, inject) => {  
                    uni.createSelectorQuery().in(this).select('#' + id).fields({  
                        size: true,  
                    }, data => {  
                        resolve(data)  
                    }).exec()  
                })  
            },  

            // 自适应坐标点  
            getPos(x, y, ow, oh, winW, winH) {  
                let l = (x + ow) > winW ? x - ow : x;  
                let t = (y + oh) > winH ? y - oh : y;  
                return [l, t];  
            },  
        }  
    }  
</script>

基本可通过组件式+函数式组合开发出一些复杂的弹窗应用场景。

okey,基于uniapp开发自定义弹窗组件就分享到这里了。希望对大家有些帮助哈~~✍✍

链接:https://juejin.cn/post/6977298346905960456/
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

继续阅读 »

基于uni-app开发兼容全端自定义弹出框ua-popup插件,可完美运行在h5、小程序及app端。

uaPopup 一款整合了msg信息框、alert提示框、dialog对话框、actionSheet底部面板框、toast轻提示框、android/ios弹窗等多种弹窗效果。可以自定义弹窗样式及按钮样式和事件、多个弹窗嵌套显示,支持自定义插槽模板内容。

如下图:h5/小程序/app端效果
img

可覆盖在Nvue原生页面video组件之上

img

引入组件

uapopup 支持全局main.js引入或页面单独引入使用。

import UAPopup from './components/ua-popup/index.vue'  
Vue.component('ua-popup', UAPopup)

自hbuilderx2.5起 支持easycom组件模式。根据使用习惯,也可以改为components/ua-popup/ua-popup.vue方式,系统会自定义识别组件,无需再手动注册引入。

使用组件

ua-popup支持组件写法和函数式写法来调用组件。

  • 组件式调用
<!-- msg提示 -->  
<ua-popup v-model="showMsg" anim="fadeIn" content="上善若水,水利万物而不争" shadeClose="false" time="3" />  

<!-- 询问框 -->  
<ua-popup v-model="showConfirm" shadeClose="false" title="标题" xclose z-index="2001"  
    content="<div style='color:#ff557f;padding:20px 40px;'>一切都将一去杳然,任何人都无法将其捕获。</div>"  
    :btns="[  
        {text: '取消', click: hideConfirm},  
        {text: '确定', style: 'color:#00aa00;', click: handleInfo},  
    ]"  
/>
  • 函数式调用
// 函数式多层嵌套  
handleInfo() {  
    let $ua = this.$refs.uapopup  
    let $toast = this.$refs.uatoast  
    $ua.open({  
        content: '人生漫漫,且行且珍惜',  
        customStyle: {'background-color': 'rgba(170, 0, 127, 0.6)', 'color': '#fff'},  
        time: 3,  
        onClose() {  
            $ua.open({  
                type: 'android',  
                content: '<div style="color:#aa007f">预测未来的最好办法是自己亲手创造未来</div>',  
                customStyle: {'width': '200px'},  
                zIndex: 202120,  
                btns: [  
                    {  
                        text: 'close', click() {  
                            $ua.close()  
                        }  
                    },  
                    {  
                        text: 'Get一下',  
                        style: 'color:#00aa00;',  
                        click() {  
                            $toast.open({  
                                type: 'toast',  
                                icon: 'loading',  
                                content: '请稍后...',  
                                opacity: .2,  
                                time: 2,  
                                zIndex: 202125,  
                            })  
                        }  
                    }  
                ]  
            })  
        }  
    })  
}

img

img

编码开发

  • 支持如下20+参数自定义配置。
props: {  
    value: { type: Boolean, default: false },  
    title: String,  
    content: String,  
    type: String,  
    customStyle: { type: Object, default: null },  
    icon: String,  
    shade: { type: [Boolean, String], default: true },  
    shadeClose: { type: [Boolean, String], default: true },  
    opacity: { type: [Number, String], default: '' },  
    round: Boolean,  
    xclose: Boolean,  
    xposition: { type: String, default: 'right' },  
    xcolor: { type: String, default: '#333' },  
    anim: { type: String, default: 'scaleIn' },  
    position: String,  
    follow: { type: Array, default: null },  
    time: { type: [Number, String], default: 0 },  
    zIndex: { type: [Number, String], default: '202107' },  
    btns: {  
        type: Array, default: null  
    },  
    // 打开弹框回调  
    onOpen: { type: Function, default: null },  
    // 关闭弹框回调  
    onClose: { type: Function, default: null },  
}
  • 弹窗模板template
<template>  
    <!-- #ifdef APP-NVUE -->  
    <view v-if="opts.visible" class="ua__popup" :class="{'ua__popup-closed': closeAnim}">  
    <!-- #endif -->  
    <!-- #ifndef APP-NVUE -->  
    <view v-show="opts.visible" class="ua__popup" :class="{'ua__popup-closed': closeAnim}">  
    <!-- #endif -->  
        <!-- 遮罩层 -->  
        <view v-if="opts.shade && opts.shade!='false'" class="uapopup__overlay" @touchstart="handleShadeClick" :style="{'opacity': opts.opacity >= 0 ? opts.opacity : '', 'z-index': oIndex-1}"></view>  
        <!-- 窗口层 -->  
        <view class="uapopup__wrap" :style="{'z-index': oIndex}">  
            <view class="uapopup__child" :id="''+uuid" :class="[''+opts.anim, opts.type&&'popui__'+opts.type, opts.round&&'round', opts.position]" :style="[opts.follow&&positionStyle, opts.customStyle]">  
                <!-- //标题 -->  
                <view v-if="opts.title || $slots.title" class="uapopup__title">  
                    <template v-if="$slots.title"><slot name="title" /></template>  
                    <rich-text v-else :nodes="opts.title"></rich-text>  
                </view>  

                <!-- //toast -->  
                <!-- <view v-if="opts.type=='toast'&&opts.icon" class="toast__icons" :class="['toast'+opts.icon]" :style="{'background-image': `url(${toastIcon[opts.icon]})`}"></view> -->  
                <image v-if="opts.type=='toast'&&opts.icon" class="toast__icons" :class="['toast'+opts.icon]" :src="toastIcon[opts.icon]" mode="widthFix"></image>  
                <!-- //内容 -->  
                <view v-if="opts.content || $slots.content" class="uapopup__content">  
                    <template v-if="$slots.content"><slot name="content" /></template>  
                    <rich-text v-else :nodes="opts.content"></rich-text>  
                </view>  
                <slot />  

                <!-- //按钮组 -->  
                <view v-if="opts.btns" class="uapopup__actions">  
                    <rich-text v-for="(btn,index) in opts.btns" :key="index" class="btn" :class="{'disabled': btn.disabled}" :style="btn.style" @click="handleBtnClick($event, index)" :nodes="btn.text"></rich-text>  
                </view>  

                <!-- //关闭按钮 -->  
                <view v-if="opts.xclose" class="uapopup__xclose" :class="opts.xposition" :style="{'color': opts.xcolor}" @click="close"></view>  
            </view>  
        </view>  
    </view>  
</template>
  • 核心逻辑处理
<script>  
    /**  
     * @Desc     uniapp跨端自定义popup组件  
     * @Time     andy by 2021/7/10  
     * @About    Q:282310962  wx:xy190310  
     */  

    let index = 0  
    export default {  
        ...  
        data() {  
            return {  
                // 混入props参数,处理函数式调用  
                opts: {  
                    visible: false,  
                },  
                toastIcon: {  
                    ...  
                },  
                closeAnim: false,  
                oIndex: 202107,  
                timer: null,  
                // 长按定位初始化(避免弹框跳动闪烁)  
                positionStyle: { position: 'absolute', left: '-999px', top: '-999px' },  
            }  
        },  
        watch: {  
            value(val) {  
                const type = val ? 'open' : 'close'  
                this[type]()  
            }  
        },  
        computed: {  
            uuid() {  
                return Math.floor(Math.random() * 10000)  
            },  
        },  
        methods: {  
            // 打开弹框  
            open(options) {  
                if(this.opts.visible) return  
                this.opts = Object.assign({}, this.$props, options)  
                this.opts.visible = true  

                // nvue 的各组件在安卓端默认是透明的,如果不设置background-color,可能会导致出现重影的问题  
                // #ifdef APP-NVUE  
                if(!this.opts.customStyle['background'] && !this.opts.customStyle['background-color']) {  
                    this.opts.customStyle['background'] = '#fff'  
                }  
                // #endif  

                let _index = ++index  
                this.oIndex = _index + parseInt(this.opts.zIndex)  

                this.$emit('open')  
                typeof this.opts.onOpen === 'function' && this.opts.onOpen()  

                // 长按处理  
                if(this.opts.follow) {  
                    ...  
                }  

                ...  
            },  
            // 关闭弹框  
            close() {  
                if(!this.opts.visible) return  

                this.closeAnim = true  
                setTimeout(() => {  
                    this.opts.visible = false  
                    this.closeAnim = false  

                    this.$emit('input', false)  
                    this.$emit('close')  
                    typeof this.opts.onClose === 'function' && this.opts.onClose()  

                    this.timer && clearTimeout(this.timer)  
                    delete this.timer  
                }, 200)  
            },  

            ...  

            // 获取dom宽高  
            getDom(id) {  
                return new Promise((resolve, inject) => {  
                    uni.createSelectorQuery().in(this).select('#' + id).fields({  
                        size: true,  
                    }, data => {  
                        resolve(data)  
                    }).exec()  
                })  
            },  

            // 自适应坐标点  
            getPos(x, y, ow, oh, winW, winH) {  
                let l = (x + ow) > winW ? x - ow : x;  
                let t = (y + oh) > winH ? y - oh : y;  
                return [l, t];  
            },  
        }  
    }  
</script>

基本可通过组件式+函数式组合开发出一些复杂的弹窗应用场景。

okey,基于uniapp开发自定义弹窗组件就分享到这里了。希望对大家有些帮助哈~~✍✍

链接:https://juejin.cn/post/6977298346905960456/
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

收起阅读 »