
关于uniPush消息推送的一些经验
如果进行App项目的开发并且需要处理消息推送的业务,可以使用uniPush来实现.
一.准备基础
1.申请dcloud开发者并且认证即可.这是登录/注册链接: dcloud开发者中心
- 申请厂商开发者账号,如果小米,华为等.
说明:
dcloud开发者中心提供uniPush应用配置,厂商推送设置,这里边你可以提供cid以及厂商推送配置进行调试App的消息推送,还有另外一点是厂商推送的提供是为了保证App离线时你的消息推送和透传消息可以正常到达App.
更多具体指南可以访问: uniPush使用指南
二.dcloud开发者中心
1.请确保你的App应用已存在或者新增一个,配置应用的AppID要相同,项目上的AppID和开发者中心-应用列表的AppID是同一个的,切勿搞混.查看项目的AppID可以在根目录的【manifest.json】-基础配置中查看.在dcloud开发者中心则是【我创建的应用】中查看,找到项目应用后点击【应用名称】进入应用界面.
- 配置uniPush,在uniPush-配置管理中填写配置,你的App包名需要和打包时的包名一致.例如云打包时填写的【Android包名】是io.dcloud.hbuilder,那么你的uniPush包名也是一样.
- 厂商推送配置.华为开发者联盟
你可以根据你的调试机型去申请相应的厂商开发者账号,在申请认证通过后返回dcloud开发者中心配置厂商推送设置即可.下面以【华为开发者联盟】厂商为例:
a.注册账户并认证
b.前往【管理中心】-【开发服务-PUSH】中添加项目,如图:
然后在项目中增加应用,填写应用信息,包名也需要和项目的包名一致,不可乱填,如图:
现在你需要配置【SHA256指纹证书】,这个指纹证书是在你云打包App时使用到的证书中,如果不知道如何查看,可以查看这个:证书生成指南
在填写好华为PUSH应用配置后,回到dcloud开发者中心中修改uniPush-厂商推送设置-华为的信息,其中,
AppID => APP ID
AppSecret => Client Secret
PkgName => App包名(请注意,所以的App均需一致!)
agconnect-services.json文件可以在华为开发者联盟-我的项目中下载下来,也就是刚刚新增项目中的应用,拿来这边直接上传即可,填写好后保存。
推送厂商设置主要是为了处理App离线通知而设置的,不然当用户没有活跃在App的时候是无法收到消息推送和透传消息的,请注意。还有就是各厂商推送的需要可能会不太一样,比如有些厂商推送离线消息需要上架到应用市场才可以。
三、测试推送消息和透传消息
在此之前我们需要获得clientID(cid),可以使用一下代码:
// #ifdef APP-PLUS
const clientInfo = plus.push.getClientInfo();
// #endif
这里会返回,id,token,clientid,AppID,AppKey,其中clientID就是我们需要的东西,假如启动App后该方法不返回任何数据,可以使用settimeout延迟一点时间再获取也可以。
监听消息推送和透传消息可以使用如下代码:
plus.push.addEventListener("click", (msg) => {
this.log({'type': 'click', 'data': JSON.stringify(msg)})
})
plus.push.addEventListener("receive", (msg) => {
this.log({'type': 'receive', 'data': JSON.stringify(msg)})
})
不同的是click事件可以响应消息推送和透传消息,只要在通知栏可以看得到的消息,点击后都可以响应。而对于receive事件来说仅是接受透传消息,你在发送透传消息的时候请使用【非标准格式】消息体即可进入receive事件中。
具体说明可见,uni-app使用unipush推送问题汇总
有了cid后,我们可以dcloud开发者中心-uniPush的【创建推送】中测试消息推送和透传消息功能,填入相应的信息即可然后点击【预览】即可。
需要注意的是,获取cid不可使用【基座调试】,需要云打包后把安装包安装到手机上进行调试测试,在这里获取到的cid才是可以使用的。
一些可以帮助的链接:
Unipush常见问题
UniPush使用指南
如果进行App项目的开发并且需要处理消息推送的业务,可以使用uniPush来实现.
一.准备基础
1.申请dcloud开发者并且认证即可.这是登录/注册链接: dcloud开发者中心
- 申请厂商开发者账号,如果小米,华为等.
说明:
dcloud开发者中心提供uniPush应用配置,厂商推送设置,这里边你可以提供cid以及厂商推送配置进行调试App的消息推送,还有另外一点是厂商推送的提供是为了保证App离线时你的消息推送和透传消息可以正常到达App.
更多具体指南可以访问: uniPush使用指南
二.dcloud开发者中心
1.请确保你的App应用已存在或者新增一个,配置应用的AppID要相同,项目上的AppID和开发者中心-应用列表的AppID是同一个的,切勿搞混.查看项目的AppID可以在根目录的【manifest.json】-基础配置中查看.在dcloud开发者中心则是【我创建的应用】中查看,找到项目应用后点击【应用名称】进入应用界面.
- 配置uniPush,在uniPush-配置管理中填写配置,你的App包名需要和打包时的包名一致.例如云打包时填写的【Android包名】是io.dcloud.hbuilder,那么你的uniPush包名也是一样.
- 厂商推送配置.华为开发者联盟
你可以根据你的调试机型去申请相应的厂商开发者账号,在申请认证通过后返回dcloud开发者中心配置厂商推送设置即可.下面以【华为开发者联盟】厂商为例:
a.注册账户并认证
b.前往【管理中心】-【开发服务-PUSH】中添加项目,如图:
然后在项目中增加应用,填写应用信息,包名也需要和项目的包名一致,不可乱填,如图:
现在你需要配置【SHA256指纹证书】,这个指纹证书是在你云打包App时使用到的证书中,如果不知道如何查看,可以查看这个:证书生成指南
在填写好华为PUSH应用配置后,回到dcloud开发者中心中修改uniPush-厂商推送设置-华为的信息,其中,
AppID => APP ID
AppSecret => Client Secret
PkgName => App包名(请注意,所以的App均需一致!)
agconnect-services.json文件可以在华为开发者联盟-我的项目中下载下来,也就是刚刚新增项目中的应用,拿来这边直接上传即可,填写好后保存。
推送厂商设置主要是为了处理App离线通知而设置的,不然当用户没有活跃在App的时候是无法收到消息推送和透传消息的,请注意。还有就是各厂商推送的需要可能会不太一样,比如有些厂商推送离线消息需要上架到应用市场才可以。
三、测试推送消息和透传消息
在此之前我们需要获得clientID(cid),可以使用一下代码:
// #ifdef APP-PLUS
const clientInfo = plus.push.getClientInfo();
// #endif
这里会返回,id,token,clientid,AppID,AppKey,其中clientID就是我们需要的东西,假如启动App后该方法不返回任何数据,可以使用settimeout延迟一点时间再获取也可以。
监听消息推送和透传消息可以使用如下代码:
plus.push.addEventListener("click", (msg) => {
this.log({'type': 'click', 'data': JSON.stringify(msg)})
})
plus.push.addEventListener("receive", (msg) => {
this.log({'type': 'receive', 'data': JSON.stringify(msg)})
})
不同的是click事件可以响应消息推送和透传消息,只要在通知栏可以看得到的消息,点击后都可以响应。而对于receive事件来说仅是接受透传消息,你在发送透传消息的时候请使用【非标准格式】消息体即可进入receive事件中。
具体说明可见,uni-app使用unipush推送问题汇总
有了cid后,我们可以dcloud开发者中心-uniPush的【创建推送】中测试消息推送和透传消息功能,填入相应的信息即可然后点击【预览】即可。
需要注意的是,获取cid不可使用【基座调试】,需要云打包后把安装包安装到手机上进行调试测试,在这里获取到的cid才是可以使用的。
一些可以帮助的链接:
Unipush常见问题
UniPush使用指南

UNIAPP更新尽扯淡
UNIAPP更新尽扯淡,每次更新都能出bug,明明以前版本调试好的,更新uni之后就不能用了。
UNIAPP更新尽扯淡,每次更新都能出bug,明明以前版本调试好的,更新uni之后就不能用了。

如果有用高德地图的,3.2.9以上版本尽量不要更新
目前3.2.9以上版本,第一次加载应用,第一次进入map页面,map会有大概30-50s的灰色方格页面展示,目前官方意思是等高德地图的官方来做适配- -。虽然不是很理解,官方目前好像也没有说是否可有以降高德地图版本的方法,如果有在nvue中用高德地图的,尽量不要更新3.2.9以上版本。
目前3.2.9以上版本,第一次加载应用,第一次进入map页面,map会有大概30-50s的灰色方格页面展示,目前官方意思是等高德地图的官方来做适配- -。虽然不是很理解,官方目前好像也没有说是否可有以降高德地图版本的方法,如果有在nvue中用高德地图的,尽量不要更新3.2.9以上版本。
收起阅读 »
h5即时通讯源码_PHP网页在线聊天源码
在线客服系统是一个使用PHP、JavaScript和CSS开发的即时网页聊天咨询系统。该项目包含管理员和用户端。管理员端管理所有的管理,如编辑站点内容、管理提供者和预订,管理员在这个系统的管理中起着重要的作用。
在线客服系统源码及演示站:e.cusscode.top/s
对于用户部分,用户可以浏览主页、关于和服务。用户可以是顾客谁需要家庭服务或服务提供商提供家庭服务的人。为了注册为服务提供商,用户必须填写注册表格。然而,要将服务提供商作为客户预订,用户可以先搜索可用的服务提供商,然后再进行预订。该项目为客户预订服务提供商提供了一种方便的方式,无需前往所需的服务中心。
在线客服系统软件有助于让您的客户满意。它使你的日常业务和会计工作更容易。PHP客户关系管理软件是一个最好的开源客户关系管理软件系统,适用于多层次营销和直销业务。它是一个完整的客户关系管理和会计解决方案,满足您所有的在线业务需求。
在线客服系统软件的重要性
使销售、支持和营销团队能够管理和协作,使您的计算机维修业务或访问能力,以管理您的客户。
关于在线客服系统
本在线客服系统源码使用PHP、JavaScript和CSS。在谈到这个系统的特点时,它包括管理部分和用户(客户或服务提供商)部分。所有的编辑、更新、管理预订和服务提供商都来自管理部分,而客户只能通过网站进行预订,如果需要的话。该系统设计简单,用户在使用过程中不会遇到任何困难。
如何运行在线客服系统软件?
要运行此项目,必须安装虚拟服务器,即XAMPP在您的电脑上(对于Windows)。这个家庭服务系统是用PHP编写的,源代码是免费下载的,只用于教育目的!
在XAMPP中启动Apache和MySQL之后,请执行以下步骤。
第一步:提取文件
第二步:复制主项目文件夹
第三步:XAMPHTP中的粘贴/
第四步:打开浏览器并转到“localhost/phpmyadmin/”
第五步:然后,单击databases选项卡
第六步:创建一个命名为“services”的数据库,然后单击import选项卡
第7步:单击BrowseFile并选择“main.sql”文件,该文件位于“homeserivces”文件夹中
第八步:点击go。
创建数据库后,
第9步:打开浏览器并转到“localhost/homeservices/”
在线客服系统特色:
1、自定义字段:自定义提交票证时从用户收集的数据,以帮助直接解决问题。
您可以创建自定义的数据列表以添加到每个记录单或特定的帮助主题,以便客户在创建记录单时从中进行选择。自定义字段、表单和列表可以添加到创建的每个web问题中,或者仅在选择特定帮助主题时显示。它们可以配置为最适合您的业务需求。
2、自定义列和队列:自定义队列是基于您指定的自定义条件的票证视图。
它允许您创建自己的票证个人视图,并指定要查看的信息。自定义列是一个附加字段,最初在查看票据选项卡时不会显示。使用自定义列允许您将这些字段包括在票据列表中。
3、票证过滤器:定义将传入的票证路由到正确的部门、代理以及触发操作的规则。
通过使用过滤系统,osTicket使您能够自动创建和发送票据。设置操作,如拒绝票证、部门/代理分配,甚至发送自动屏蔽响应。筛选器的规则条件可以包括添加到表单中的任何自定义字段以及用户数据。
4、帮助主题:可配置的web票证帮助主题允许您将查询路由到正确的部门以进行快速解决。
通过根据预先确定的新票证选项进行路由,可以简化票证以加快响应时间。结合自定义表单,您可以为每个帮助主题设计一个特定的表单,以收集每个请求类型的附加或特定信息。
5、代理避碰:票证锁定机制允许工作人员在响应期间锁定票证,以避免冲突或双重响应。
避免多个代理同时对同一个票据做出响应!您可以设置锁在票证上的保留时间。当一张票被锁定时,其他工作人员在锁过期之前不能对该票作出响应。
6、分配、转移和推荐:在部门之间转移票据,以确保由正确的代理人处理,或者将票据分配给特定的代理人或代理人团队。
在转移或分配给部门/代理时,引用记录单以维护对记录单的仅查看访问权限。票证可以在到达时由帮助主题或部门自动分配,但如果需要重新分配呢?没问题!您可以将票重新分配给代理或代理团队,或一起转移到其他部门。转移、分配和推荐注释记录在记录单线程中,以跟踪记录单中发生的事情。
7、自动应答器:可配置的自动回复发送时,新的票证打开或收到一条消息。
自动回复可以格式化为从票证中提取信息以个性化电子邮件。osTicket支持占位符变量,例如%{ticket.name.first}这将在自动响应中提取用户的名字。可以为每个部门编辑和自定义自动响应,也可以与帮助主题关联。
8、线程操作:理现在可以从票据的线程条目或任务的线程条目创建票据或任务。
需要从用户的消息中创建单独的票据或任务来分离或展开该项目吗?没问题!现在有了线程操作,代理可以简单地用消息创建一个新的票证或任务,并将其保存在原始票证线程中。线程操作在原始票证线程中记录,同时引用新项以及从中提取的线程项。
9、服务级别协议:SLA计划允许您无需麻烦地跟踪机票和截止日期!
获取过期警报和错过的到期日通知,以及优先级提升。创建无限数量的SLA计划,并将其分配到帮助主题、部门或票证筛选器。
10、高级搜索:
保存所选条件以便于将来的搜索。在搜索条件中包含自定义字段。搜索结果填充到自己的队列中,并可以导出到csv文件中。代理甚至可以选择导出的字段以减少导出过程中的混乱。
在线客服系统软件为多渠道企业提供营销工具。此软件专为自助服务而设计,允许您设置客户关系管理系统,使您的客户能够在没有您的帮助下找到其查询的答案。软件允许您管理您的业务流程并获得节约和收益,它跟踪客户的每一个记录以及相关的数字和联系人。该软件有助于改进工作流程,捕捉机会,瓶全专注于您的业务访客跟踪。同时也有助于访问和更新您的记录,如项目、供应商、销售订单、付款详情等。
11、任务:为代理创建内部待办事项列表。
任务可以与票证关联,也可以独立于帮助台。当任务与记录单相关时,这将防止在记录单中的所有任务完成之前关闭记录单。添加协作者以将外部用户包括到任务项中,同时将它们与票证线程和内容分开。
在线客服系统软件为多渠道企业提供营销工具。此软件专为自助服务而设计,允许您设置客户关系管理系统,使您的客户能够在没有您的帮助下找到其查询的答案。软件允许您管理您的业务流程并获得节约和收益,它跟踪客户的每一个记录以及相关的数字和联系人。该软件有助于改进工作流程,捕捉机会,瓶全专注于您的业务访客跟踪。同时也有助于访问和更新您的记录,如项目、供应商、销售订单、付款详情等。
在线客服系统是一个使用PHP、JavaScript和CSS开发的即时网页聊天咨询系统。该项目包含管理员和用户端。管理员端管理所有的管理,如编辑站点内容、管理提供者和预订,管理员在这个系统的管理中起着重要的作用。
在线客服系统源码及演示站:e.cusscode.top/s
对于用户部分,用户可以浏览主页、关于和服务。用户可以是顾客谁需要家庭服务或服务提供商提供家庭服务的人。为了注册为服务提供商,用户必须填写注册表格。然而,要将服务提供商作为客户预订,用户可以先搜索可用的服务提供商,然后再进行预订。该项目为客户预订服务提供商提供了一种方便的方式,无需前往所需的服务中心。
在线客服系统软件有助于让您的客户满意。它使你的日常业务和会计工作更容易。PHP客户关系管理软件是一个最好的开源客户关系管理软件系统,适用于多层次营销和直销业务。它是一个完整的客户关系管理和会计解决方案,满足您所有的在线业务需求。
在线客服系统软件的重要性
使销售、支持和营销团队能够管理和协作,使您的计算机维修业务或访问能力,以管理您的客户。
关于在线客服系统
本在线客服系统源码使用PHP、JavaScript和CSS。在谈到这个系统的特点时,它包括管理部分和用户(客户或服务提供商)部分。所有的编辑、更新、管理预订和服务提供商都来自管理部分,而客户只能通过网站进行预订,如果需要的话。该系统设计简单,用户在使用过程中不会遇到任何困难。
如何运行在线客服系统软件?
要运行此项目,必须安装虚拟服务器,即XAMPP在您的电脑上(对于Windows)。这个家庭服务系统是用PHP编写的,源代码是免费下载的,只用于教育目的!
在XAMPP中启动Apache和MySQL之后,请执行以下步骤。
第一步:提取文件
第二步:复制主项目文件夹
第三步:XAMPHTP中的粘贴/
第四步:打开浏览器并转到“localhost/phpmyadmin/”
第五步:然后,单击databases选项卡
第六步:创建一个命名为“services”的数据库,然后单击import选项卡
第7步:单击BrowseFile并选择“main.sql”文件,该文件位于“homeserivces”文件夹中
第八步:点击go。
创建数据库后,
第9步:打开浏览器并转到“localhost/homeservices/”
在线客服系统特色:
1、自定义字段:自定义提交票证时从用户收集的数据,以帮助直接解决问题。
您可以创建自定义的数据列表以添加到每个记录单或特定的帮助主题,以便客户在创建记录单时从中进行选择。自定义字段、表单和列表可以添加到创建的每个web问题中,或者仅在选择特定帮助主题时显示。它们可以配置为最适合您的业务需求。
2、自定义列和队列:自定义队列是基于您指定的自定义条件的票证视图。
它允许您创建自己的票证个人视图,并指定要查看的信息。自定义列是一个附加字段,最初在查看票据选项卡时不会显示。使用自定义列允许您将这些字段包括在票据列表中。
3、票证过滤器:定义将传入的票证路由到正确的部门、代理以及触发操作的规则。
通过使用过滤系统,osTicket使您能够自动创建和发送票据。设置操作,如拒绝票证、部门/代理分配,甚至发送自动屏蔽响应。筛选器的规则条件可以包括添加到表单中的任何自定义字段以及用户数据。
4、帮助主题:可配置的web票证帮助主题允许您将查询路由到正确的部门以进行快速解决。
通过根据预先确定的新票证选项进行路由,可以简化票证以加快响应时间。结合自定义表单,您可以为每个帮助主题设计一个特定的表单,以收集每个请求类型的附加或特定信息。
5、代理避碰:票证锁定机制允许工作人员在响应期间锁定票证,以避免冲突或双重响应。
避免多个代理同时对同一个票据做出响应!您可以设置锁在票证上的保留时间。当一张票被锁定时,其他工作人员在锁过期之前不能对该票作出响应。
6、分配、转移和推荐:在部门之间转移票据,以确保由正确的代理人处理,或者将票据分配给特定的代理人或代理人团队。
在转移或分配给部门/代理时,引用记录单以维护对记录单的仅查看访问权限。票证可以在到达时由帮助主题或部门自动分配,但如果需要重新分配呢?没问题!您可以将票重新分配给代理或代理团队,或一起转移到其他部门。转移、分配和推荐注释记录在记录单线程中,以跟踪记录单中发生的事情。
7、自动应答器:可配置的自动回复发送时,新的票证打开或收到一条消息。
自动回复可以格式化为从票证中提取信息以个性化电子邮件。osTicket支持占位符变量,例如%{ticket.name.first}这将在自动响应中提取用户的名字。可以为每个部门编辑和自定义自动响应,也可以与帮助主题关联。
8、线程操作:理现在可以从票据的线程条目或任务的线程条目创建票据或任务。
需要从用户的消息中创建单独的票据或任务来分离或展开该项目吗?没问题!现在有了线程操作,代理可以简单地用消息创建一个新的票证或任务,并将其保存在原始票证线程中。线程操作在原始票证线程中记录,同时引用新项以及从中提取的线程项。
9、服务级别协议:SLA计划允许您无需麻烦地跟踪机票和截止日期!
获取过期警报和错过的到期日通知,以及优先级提升。创建无限数量的SLA计划,并将其分配到帮助主题、部门或票证筛选器。
10、高级搜索:
保存所选条件以便于将来的搜索。在搜索条件中包含自定义字段。搜索结果填充到自己的队列中,并可以导出到csv文件中。代理甚至可以选择导出的字段以减少导出过程中的混乱。
在线客服系统软件为多渠道企业提供营销工具。此软件专为自助服务而设计,允许您设置客户关系管理系统,使您的客户能够在没有您的帮助下找到其查询的答案。软件允许您管理您的业务流程并获得节约和收益,它跟踪客户的每一个记录以及相关的数字和联系人。该软件有助于改进工作流程,捕捉机会,瓶全专注于您的业务访客跟踪。同时也有助于访问和更新您的记录,如项目、供应商、销售订单、付款详情等。
11、任务:为代理创建内部待办事项列表。
任务可以与票证关联,也可以独立于帮助台。当任务与记录单相关时,这将防止在记录单中的所有任务完成之前关闭记录单。添加协作者以将外部用户包括到任务项中,同时将它们与票证线程和内容分开。
在线客服系统软件为多渠道企业提供营销工具。此软件专为自助服务而设计,允许您设置客户关系管理系统,使您的客户能够在没有您的帮助下找到其查询的答案。软件允许您管理您的业务流程并获得节约和收益,它跟踪客户的每一个记录以及相关的数字和联系人。该软件有助于改进工作流程,捕捉机会,瓶全专注于您的业务访客跟踪。同时也有助于访问和更新您的记录,如项目、供应商、销售订单、付款详情等。

uni-app开发多端之云闪付小程序
本文以 H5 平台为基准,引入云闪付 jssdk,通过将uni-app发布到云闪付小程序,演示如何使用uni-app开发云闪付小程序。
扩展云闪付小程序平台
创建uni-app项目后,在项目根目录下新增或修改 package.json
自定义基座平台,在根节点下新增如下扩展配置:
"uni-app": {
"scripts": {
"mp-unionpay": {
"title": "云闪付小程序",
"env": {
"UNI_PLATFORM": "h5"
},
"define": {
"MP-UNIONPAY": true
}
}
}
}
引入云闪付 jssdk
接入方使用云闪付 APP 小程序前端 API 前,需在调用页面(必须为 https )引入插件 upsdk.js 文件,https://open.95516.com/s/open/js/upsdk.js。
在项目根目录增加或修改 template.h5.html
引入云闪付 jssdk :
<script src="https://open.95516.com/s/open/js/upsdk.js"></script>
隐藏内置导航栏
在项目根目录 pages.json
隐藏内置导航栏
"pages": [
// pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/tabBar/component/component",
"style": {
"navigationStyle":"custom"//custom即取消默认的原生导航栏
}
},
]
使用 jssdk 设置导航栏
upsdk.js
引入后需在页面使用 upsdk.pluginReady
进行 sdk 初始化,前端接口的调用建议在其回调函数中使用。
在 pages/tabBar/component/component.vue
页面使用 jssdk 设置导航栏样式和标题:
onLoad() {
// #ifdef MP-UNIONPAY
upsdk.pluginReady(function() {
// 前端API调用
upsdk.setTitleStyle({
// 可选,导航栏(含状态栏)背景色及透明度。16进制,前2位(8F)透明度,后六位(FFFFFF)颜色,仅对当前页有效,其余页还是申请配置的导航默认颜色
navBackgroundColor: '0x8FFFFFFF',
appletStyle: 'black', //可选,black-黑色主题,white-白色主题
backBtnVisible: '0', // 可选,左侧返回按钮是否显示。'0'不显示,'1'显示,不传或空则默认显示
appletTitleBarVisible: '1', // 可选,标题栏是否显示。'0'不显示,'1'显示,默认显示
appletTitleGradientOrient: 'top', // 可选,渐变色方向,支持top、bottom、left、right
appletTitleGradientStartColor: '0x8FFFFFFF', //渐变起始颜色
appletTitleGradientEndColor: '0x88888888' //渐变结束颜色
});
//设置导航栏标题,居中显示。
upsdk.setNavigationBarTitle({
title: '设置云闪付标题'
});
});
// #endif
},
运行到云闪付小程序
HBuilderX
会根据 package.json
的扩展配置,在运行菜单下,生成云闪付小程序
菜单,如下图:
点击云闪付小程序
菜单,运行到h5
发行云闪付小程序
同样,HBuilderX
会根据 package.json
的扩展配置,在发行
-> 自定义发行
菜单下,生成云闪付小程序
菜单,如下图:
本文以 H5 平台为基准,引入云闪付 jssdk,通过将uni-app发布到云闪付小程序,演示如何使用uni-app开发云闪付小程序。
扩展云闪付小程序平台
创建uni-app项目后,在项目根目录下新增或修改 package.json
自定义基座平台,在根节点下新增如下扩展配置:
"uni-app": {
"scripts": {
"mp-unionpay": {
"title": "云闪付小程序",
"env": {
"UNI_PLATFORM": "h5"
},
"define": {
"MP-UNIONPAY": true
}
}
}
}
引入云闪付 jssdk
接入方使用云闪付 APP 小程序前端 API 前,需在调用页面(必须为 https )引入插件 upsdk.js 文件,https://open.95516.com/s/open/js/upsdk.js。
在项目根目录增加或修改 template.h5.html
引入云闪付 jssdk :
<script src="https://open.95516.com/s/open/js/upsdk.js"></script>
隐藏内置导航栏
在项目根目录 pages.json
隐藏内置导航栏
"pages": [
// pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/tabBar/component/component",
"style": {
"navigationStyle":"custom"//custom即取消默认的原生导航栏
}
},
]
使用 jssdk 设置导航栏
upsdk.js
引入后需在页面使用 upsdk.pluginReady
进行 sdk 初始化,前端接口的调用建议在其回调函数中使用。
在 pages/tabBar/component/component.vue
页面使用 jssdk 设置导航栏样式和标题:
onLoad() {
// #ifdef MP-UNIONPAY
upsdk.pluginReady(function() {
// 前端API调用
upsdk.setTitleStyle({
// 可选,导航栏(含状态栏)背景色及透明度。16进制,前2位(8F)透明度,后六位(FFFFFF)颜色,仅对当前页有效,其余页还是申请配置的导航默认颜色
navBackgroundColor: '0x8FFFFFFF',
appletStyle: 'black', //可选,black-黑色主题,white-白色主题
backBtnVisible: '0', // 可选,左侧返回按钮是否显示。'0'不显示,'1'显示,不传或空则默认显示
appletTitleBarVisible: '1', // 可选,标题栏是否显示。'0'不显示,'1'显示,默认显示
appletTitleGradientOrient: 'top', // 可选,渐变色方向,支持top、bottom、left、right
appletTitleGradientStartColor: '0x8FFFFFFF', //渐变起始颜色
appletTitleGradientEndColor: '0x88888888' //渐变结束颜色
});
//设置导航栏标题,居中显示。
upsdk.setNavigationBarTitle({
title: '设置云闪付标题'
});
});
// #endif
},
运行到云闪付小程序
HBuilderX
会根据 package.json
的扩展配置,在运行菜单下,生成云闪付小程序
菜单,如下图:
点击云闪付小程序
菜单,运行到h5
发行云闪付小程序
同样,HBuilderX
会根据 package.json
的扩展配置,在发行
-> 自定义发行
菜单下,生成云闪付小程序
菜单,如下图:

分享优化安卓端从点击app图标到显示启动页需要1-2秒延迟、卡顿的问题
这几天开始接触uniapp开发,发现官方demo安卓端点击app图标到显示启动页(Hbuildx图标页)会卡个1-2秒
明显比原生app体验差很多,作为一个强迫症,这点当然是不能忍的。具体问题详情查看以下链接:
https://ask.dcloud.net.cn/question/133649
先说下大概为什么卡顿的原因,我也不太明白,我猜是因为启动安卓app时需要启动webview或者weex等底层引擎导致的卡顿。(这个问题望官方的人可以解答一下,我看了PandoraEntry的源码也没有找到答案)
下面说一下优化原理,就是用原生安卓代码先启动一个页面,然后在该页面中再启动uni的主activity(PandoraEntry)
这样,点击app图标后,就跟原生一样会立马显示我们原生开发的第一个页面(而不会卡个1、2秒才显示界面,让人感觉以为自己没点击图标成功)
下面说下流程
一、在AS中新建一个empty activity:菜单file->new->activity->empty activity。
界面xml代码:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.xiefeng.MainActivity">
</androidx.constraintlayout.widget.ConstraintLayout>
没什么东西,就是一个空白页面
java代码如下:
package com.xiefeng;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import com.android.simple.R;
import io.dcloud.PandoraEntry;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Thread myThread=new Thread(){//创建子线程,启动uni的主activity
@Override
public void run() {
try{
sleep(1000);//使程序休眠五秒
Intent it=new Intent(MainActivity.this, PandoraEntry.class);//启动MainActivity
startActivity(it);
finish();//关闭当前活动
}catch (Exception e){
e.printStackTrace();
}
}
};
myThread.start();//启动线程
}
}
二、AndroidManifest.xml修改:
1、在android节点加上主题android:theme="@style/AppTheme2"
2、新增我们自定义的activity并设为main
3、将uni的主activity的main注释掉
完整代码如下:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.android.simple">
<application
android:allowBackup="true"
android:allowClearUserData="true"
android:icon="@drawable/icon"
android:label="@string/app_name"
android:largeHeap="true"
android:supportsRtl="true"
android:theme="@style/AppTheme2">
<activity android:name="com.xiefeng.MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name="io.dcloud.PandoraEntry"
android:configChanges="orientation|keyboardHidden|keyboard|navigation"
android:hardwareAccelerated="true"
android:label="@string/app_name"
android:launchMode="singleTask"
android:screenOrientation="user"
android:theme="@style/TranslucentTheme"
android:windowSoftInputMode="adjustResize">
<!--<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
-->
</activity>
<activity
android:name="io.dcloud.PandoraEntryActivity"
android:configChanges="orientation|keyboardHidden|screenSize|mcc|mnc|fontScale|keyboard|smallestScreenSize|screenLayout|screenSize"
android:hardwareAccelerated="true"
android:launchMode="singleTask"
android:permission="com.miui.securitycenter.permission.AppPermissionsEditor"
android:screenOrientation="user"
android:theme="@style/DCloudTheme"
android:windowSoftInputMode="adjustResize">
<intent-filter>
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<action android:name="android.intent.action.VIEW" />
<data android:scheme="h56131bcf" />
</intent-filter>
</activity>
<provider
android:name="io.dcloud.common.util.DCloud_FileProvider"
android:authorities="com.android.simple.dc.fileprovider"
android:exported="false"
android:grantUriPermissions="true">
<meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="@xml/dcloud_file_provider" />
</provider>
<meta-data
android:name="dcloud_appkey"
android:value="69ae588821d34380d31b94dd33dc0689" />
</application>
</manifest>
三、最后在values/styles.xml加上主题:
<style name="AppTheme2" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowFullscreen">true</item>
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
<item name="colorPrimary">#6200EE</item>
<item name="colorPrimaryDark">#6200EE</item>
<item name="colorAccent">#6200EE</item>
</style>
如果要加上自己的启动图片,可以加上节点:<item name="android:windowBackground">@drawable/splash</item>
,并把图片放到drawable文件夹下。
建议原生启动图和Hbuildx设置的启动图为同一张,这样两张启动图无缝对接,体验比较好。
(注:加上启动图后启动会更慢个0.1秒不知道为什么,希望大神们解答一下)
完毕。
这几天开始接触uniapp开发,发现官方demo安卓端点击app图标到显示启动页(Hbuildx图标页)会卡个1-2秒
明显比原生app体验差很多,作为一个强迫症,这点当然是不能忍的。具体问题详情查看以下链接:
https://ask.dcloud.net.cn/question/133649
先说下大概为什么卡顿的原因,我也不太明白,我猜是因为启动安卓app时需要启动webview或者weex等底层引擎导致的卡顿。(这个问题望官方的人可以解答一下,我看了PandoraEntry的源码也没有找到答案)
下面说一下优化原理,就是用原生安卓代码先启动一个页面,然后在该页面中再启动uni的主activity(PandoraEntry)
这样,点击app图标后,就跟原生一样会立马显示我们原生开发的第一个页面(而不会卡个1、2秒才显示界面,让人感觉以为自己没点击图标成功)
下面说下流程
一、在AS中新建一个empty activity:菜单file->new->activity->empty activity。
界面xml代码:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.xiefeng.MainActivity">
</androidx.constraintlayout.widget.ConstraintLayout>
没什么东西,就是一个空白页面
java代码如下:
package com.xiefeng;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import com.android.simple.R;
import io.dcloud.PandoraEntry;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Thread myThread=new Thread(){//创建子线程,启动uni的主activity
@Override
public void run() {
try{
sleep(1000);//使程序休眠五秒
Intent it=new Intent(MainActivity.this, PandoraEntry.class);//启动MainActivity
startActivity(it);
finish();//关闭当前活动
}catch (Exception e){
e.printStackTrace();
}
}
};
myThread.start();//启动线程
}
}
二、AndroidManifest.xml修改:
1、在android节点加上主题android:theme="@style/AppTheme2"
2、新增我们自定义的activity并设为main
3、将uni的主activity的main注释掉
完整代码如下:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.android.simple">
<application
android:allowBackup="true"
android:allowClearUserData="true"
android:icon="@drawable/icon"
android:label="@string/app_name"
android:largeHeap="true"
android:supportsRtl="true"
android:theme="@style/AppTheme2">
<activity android:name="com.xiefeng.MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name="io.dcloud.PandoraEntry"
android:configChanges="orientation|keyboardHidden|keyboard|navigation"
android:hardwareAccelerated="true"
android:label="@string/app_name"
android:launchMode="singleTask"
android:screenOrientation="user"
android:theme="@style/TranslucentTheme"
android:windowSoftInputMode="adjustResize">
<!--<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
-->
</activity>
<activity
android:name="io.dcloud.PandoraEntryActivity"
android:configChanges="orientation|keyboardHidden|screenSize|mcc|mnc|fontScale|keyboard|smallestScreenSize|screenLayout|screenSize"
android:hardwareAccelerated="true"
android:launchMode="singleTask"
android:permission="com.miui.securitycenter.permission.AppPermissionsEditor"
android:screenOrientation="user"
android:theme="@style/DCloudTheme"
android:windowSoftInputMode="adjustResize">
<intent-filter>
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<action android:name="android.intent.action.VIEW" />
<data android:scheme="h56131bcf" />
</intent-filter>
</activity>
<provider
android:name="io.dcloud.common.util.DCloud_FileProvider"
android:authorities="com.android.simple.dc.fileprovider"
android:exported="false"
android:grantUriPermissions="true">
<meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="@xml/dcloud_file_provider" />
</provider>
<meta-data
android:name="dcloud_appkey"
android:value="69ae588821d34380d31b94dd33dc0689" />
</application>
</manifest>
三、最后在values/styles.xml加上主题:
<style name="AppTheme2" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowFullscreen">true</item>
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
<item name="colorPrimary">#6200EE</item>
<item name="colorPrimaryDark">#6200EE</item>
<item name="colorAccent">#6200EE</item>
</style>
如果要加上自己的启动图片,可以加上节点:<item name="android:windowBackground">@drawable/splash</item>
,并把图片放到drawable文件夹下。
建议原生启动图和Hbuildx设置的启动图为同一张,这样两张启动图无缝对接,体验比较好。
(注:加上启动图后启动会更慢个0.1秒不知道为什么,希望大神们解答一下)
完毕。
收起阅读 »
完美解决!uniapp写小程序用swiper轮播高度问题
我这两天在用uniapp写小程序,因为需求要横向是滚动的,所以我用了swiper轮播来实现滚动
但是我发现这个轮播的高度是定死的,如果你下面有列表那么就会超出隐藏,经过了一天的折磨之后
终于想到了解决办法!
我看网上都是什么动态获取他的高度啊之类的,我觉得太麻烦所以就这样做了
我先是发现他的所有swiper-item
里面都有一个overflow: hidden;
(超出隐藏)然后我给他用overflow: auto;
给顶掉了
然后我发现虽然说高度没变,但是里面的内容已经可以向下滚动了,拿这不就简单多了,我直接给外面盒子的150px的默认高度给改成100vh了,完美解决
我这两天在用uniapp写小程序,因为需求要横向是滚动的,所以我用了swiper轮播来实现滚动
但是我发现这个轮播的高度是定死的,如果你下面有列表那么就会超出隐藏,经过了一天的折磨之后
终于想到了解决办法!
我看网上都是什么动态获取他的高度啊之类的,我觉得太麻烦所以就这样做了
我先是发现他的所有swiper-item
里面都有一个overflow: hidden;
(超出隐藏)然后我给他用overflow: auto;
给顶掉了
然后我发现虽然说高度没变,但是里面的内容已经可以向下滚动了,拿这不就简单多了,我直接给外面盒子的150px的默认高度给改成100vh了,完美解决

Module build failed (from ./node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js):
Module build failed (from ./node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js):
万万没想到,报错是因为//#ifdef 条件编译出了问题,除了//#ifdef 和 //endif没有成对出现外,还有什么//#ifdef 之后有其他文本,//#ifdef之后有注释文本,具体见下文:
第一行 Module build failed 报错内容是一样的,具体区别注意第二行之后的。
1、没有成对出现:
//条件编译报错测试
test(){
//#ifdef MP-WEIXIN
uni.showToast({
title:"测试代码",
icon:"none"
})
},
区别:Error: Unbalanced delimiter found in string
这句翻译下是说“在字符串中找到不平衡的分隔符”,基本猜猜也能找到错误。
Module build failed (from ./node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js):
Error: Unbalanced delimiter found in string
at Function.XRegExp.matchRecursive (F:\HbuilderX\HBuilderX.3.2.9.20210927.full\HBuilderX\plugins\uniapp-cli\node_modules\xregexp\lib\addons\matchrecursive.js:186:23)
at matchReplacePass (F:\HbuilderX\HBuilderX.3.2.9.20210927.full\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\webpack-preprocess-loader\preprocess\lib\preprocess.js:303:27)
at replaceRecursive (F:\HbuilderX\HBuilderX.3.2.9.20210927.full\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\webpack-preprocess-loader\preprocess\lib\preprocess.js:333:10)
at preprocessor (F:\HbuilderX\HBuilderX.3.2.9.20210927.full\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\webpack-preprocess-loader\preprocess\lib\preprocess.js:168:10)
2、//#ifdef 后面有文本
//条件编译报错测试
test(){
//#ifdef MP-WEIXIN 小程序执行
uni.showToast({
title:"测试代码",
icon:"none"
})
//#endif
},
区别:SyntaxError: Unexpected identifier
这里翻译下说是“意外的标识符”,当时顺手在后面加了个注释,一直报错,差点重装,是挺意外的,编译器要是报个错在哪一行也还好啊。。。
Module build failed (from ./node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js):
SyntaxError: Unexpected identifier
at new Function (<anonymous>)
at getTestTemplate (F:\HbuilderX\HBuilderX.3.2.9.20210927.full\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\webpack-preprocess-loader\preprocess\lib\preprocess.js:375:10)
at testPasses (F:\HbuilderX\HBuilderX.3.2.9.20210927.full\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\webpack-preprocess-loader\preprocess\lib\preprocess.js:379:16)
3、//#ifdef 后面有注释
//条件编译报错测试
test(){
//#ifdef MP-WEIXIN //小程序执行
uni.showToast({
title:"测试代码",
icon:"none"
})
//#endif
},
区别:SyntaxError: Unexpected token '}'
习惯在代码后面紧接着写注释的要小心了,//#ifdef 后前外别写。给你报个“}”的错,这下你去找“{ }”吧,越找越迷茫。
Module build failed (from ./node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js):
SyntaxError: Unexpected token '}'
at new Function (<anonymous>)
at getTestTemplate (F:\HbuilderX\HBuilderX.3.2.9.20210927.full\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\webpack-preprocess-loader\preprocess\lib\preprocess.js:375:10)
at testPasses (F:\HbuilderX\HBuilderX.3.2.9.20210927.full\HBuilderX\plugins\uniapp-cli\node
Module build failed (from ./node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js):
万万没想到,报错是因为//#ifdef 条件编译出了问题,除了//#ifdef 和 //endif没有成对出现外,还有什么//#ifdef 之后有其他文本,//#ifdef之后有注释文本,具体见下文:
第一行 Module build failed 报错内容是一样的,具体区别注意第二行之后的。
1、没有成对出现:
//条件编译报错测试
test(){
//#ifdef MP-WEIXIN
uni.showToast({
title:"测试代码",
icon:"none"
})
},
区别:Error: Unbalanced delimiter found in string
这句翻译下是说“在字符串中找到不平衡的分隔符”,基本猜猜也能找到错误。
Module build failed (from ./node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js):
Error: Unbalanced delimiter found in string
at Function.XRegExp.matchRecursive (F:\HbuilderX\HBuilderX.3.2.9.20210927.full\HBuilderX\plugins\uniapp-cli\node_modules\xregexp\lib\addons\matchrecursive.js:186:23)
at matchReplacePass (F:\HbuilderX\HBuilderX.3.2.9.20210927.full\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\webpack-preprocess-loader\preprocess\lib\preprocess.js:303:27)
at replaceRecursive (F:\HbuilderX\HBuilderX.3.2.9.20210927.full\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\webpack-preprocess-loader\preprocess\lib\preprocess.js:333:10)
at preprocessor (F:\HbuilderX\HBuilderX.3.2.9.20210927.full\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\webpack-preprocess-loader\preprocess\lib\preprocess.js:168:10)
2、//#ifdef 后面有文本
//条件编译报错测试
test(){
//#ifdef MP-WEIXIN 小程序执行
uni.showToast({
title:"测试代码",
icon:"none"
})
//#endif
},
区别:SyntaxError: Unexpected identifier
这里翻译下说是“意外的标识符”,当时顺手在后面加了个注释,一直报错,差点重装,是挺意外的,编译器要是报个错在哪一行也还好啊。。。
Module build failed (from ./node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js):
SyntaxError: Unexpected identifier
at new Function (<anonymous>)
at getTestTemplate (F:\HbuilderX\HBuilderX.3.2.9.20210927.full\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\webpack-preprocess-loader\preprocess\lib\preprocess.js:375:10)
at testPasses (F:\HbuilderX\HBuilderX.3.2.9.20210927.full\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\webpack-preprocess-loader\preprocess\lib\preprocess.js:379:16)
3、//#ifdef 后面有注释
//条件编译报错测试
test(){
//#ifdef MP-WEIXIN //小程序执行
uni.showToast({
title:"测试代码",
icon:"none"
})
//#endif
},
区别:SyntaxError: Unexpected token '}'
习惯在代码后面紧接着写注释的要小心了,//#ifdef 后前外别写。给你报个“}”的错,这下你去找“{ }”吧,越找越迷茫。
Module build failed (from ./node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js):
SyntaxError: Unexpected token '}'
at new Function (<anonymous>)
at getTestTemplate (F:\HbuilderX\HBuilderX.3.2.9.20210927.full\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\webpack-preprocess-loader\preprocess\lib\preprocess.js:375:10)
at testPasses (F:\HbuilderX\HBuilderX.3.2.9.20210927.full\HBuilderX\plugins\uniapp-cli\node
收起阅读 »