HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

mui疑难杂症01.HBuilderX未检测到手机或模拟器

一、 问题

我使用Android 9版本的手机,开发者选项已开启USB调试,但是HBuilderX未检测到手机或模拟器。

二、 解决问题

  1. 找到HBuilderX安装目录下的D:\Archive\HBuilderX\plugins\launcher\tools\adbs

  2. 先备份该录下的除了文件夹外的其他三个文件。

  3. 然后把1.0.31目录下的文件拷贝到D:\Archive\HBuilderX\plugins\launcher\tools\adbs,直接覆盖即可。

  4. 重启HBuilderX就可以检测到手机了。

备注:adb全称Android Debug Bridge(安卓调试桥),它用于通过电脑端与模拟器或者真实设备交互。

继续阅读 »

一、 问题

我使用Android 9版本的手机,开发者选项已开启USB调试,但是HBuilderX未检测到手机或模拟器。

二、 解决问题

  1. 找到HBuilderX安装目录下的D:\Archive\HBuilderX\plugins\launcher\tools\adbs

  2. 先备份该录下的除了文件夹外的其他三个文件。

  3. 然后把1.0.31目录下的文件拷贝到D:\Archive\HBuilderX\plugins\launcher\tools\adbs,直接覆盖即可。

  4. 重启HBuilderX就可以检测到手机了。

备注:adb全称Android Debug Bridge(安卓调试桥),它用于通过电脑端与模拟器或者真实设备交互。

收起阅读 »

知识付费系统源码(开源知识付费平台系统源码下载 )

源码分享

  知识付费系统源码是几乎每一个成功企业的重要组成部分。然而,为什么许多新企业和初创企业忽视了它作为一个可选的组成部分?管理和定期维护知识库的昂贵成本是主要原因。使用复杂工具更新知识文章是企业避免建立知识库的另一个原因。然而,使用正确的KMS,您可以避免所有这些问题。并在很小的预算内建立一个易于管理的知识库。在本指南中,我们将仔细研究系统,以找到适合您平台的知识付费系统源码。
  开源知识付费系统平台源码:zs.xcxyms.top
  什么是知识付费系统源码?
  知识付费系统可以用多种方式定义。对一些人来说,这是一个教学和学习的平台。对其他许多人来说,这是一个有效解决问题的平台。
  简单地说,知识管理系统就是你用来分享知识的平台或工具。
  例如,使用知识管理系统,您可以创建文章、文档和指南。然后,您可以将它们提供给您的客户或员工,让他们找到与您的产品相关的常见问题的解决方案。
  无论是教育你的客户如何使用产品。或者教你的员工如何处理不同的情况。我们都同意,知识库在许多方面对所有类型的企业都是有益的。
  ●知识与管理的利益共享
  如果您还需要进一步的说服力,这里只是知识管理的诸多好处中的一小部分。
  ●降低客户支持成本
  有了知识库,您就可以让您的客户和员工自己找到解决方案。
  如果客户遇到问题,他们可以在知识库中搜索答案。员工可以使用知识库查找如何处理某些情况的指南,如响应客户的询问。
  不管怎样,它都有助于减少回复电子邮件和电话的时间和成本。
  ●培训员工和团队
  私人知识库通常被公司用来培训和教育他们的员工和团队。您可以为每个部门创建多个知识库。用课程、解决方案和指南将其填满。这样他们就可以自己找到常见问题的教程指南了。
  ●更快的解决问题
  知识库还通过提供按需解决方案帮助您节省时间。客户不再需要打电话等待数小时来解决问题。员工不需要经过数月的培训来回答简单的问题。都在知识库里。只需一次搜索就可以了。
  ●分享专业知识
  请教专家已成为过去。有了知识库,你就成了专家。知识库中充满了由专家编写的指南和文件。没有必要在别处寻求帮助。
  ●更好的搜索引擎排名
  公共知识库也可以作为搜索引擎优化的一个很好的来源。你可以优化知识文章和内容,在搜索引擎上为特定关键字排名更高。
  不同类型的知识管理系统
  开发知识管理系统的第一步是制定明确的目标。你的知识库的主要目的是什么?是服务客户还是管理自己的部门?
  一旦你有了明确的目标,你就可以根据不同类型的知识库找到正确的知识管理系统。
  ●客户支持系统
  这些是您为服务客户而制作的公共知识库系统。客户支持知识库包括教程和指南。尤其是对与产品或服务相关的常见问题的解答。这使得客户无需联系客户支持就可以找到解决方案。
  ●专家知识系统
  专家知识系统通常是私有的,为公司的团队或部门服务。例如,客户支持部门可以使用专家知识系统快速找到客户常见问题的答案。这类知识库包括关于特定主题的专家指南。
  ●文件管理系统
  顾名思义,文档管理系统是管理文档的知识库。它对于提供多种产品或服务的企业特别有用。文档管理系统帮助您在一个地方为所有产品创建一个大手册。
  ●数据库管理系统
  数据库管理系统用于存储和共享与产品或业务相关的不同类型的数据。无论是与客户或产品历史相关的数据,数据库管理都有助于保持一切井井有条。
  最佳知识付费系统源码和解决方案
  我们想找到最好的知识付费系统源码和解决方案,你可以用来建立不同类型的知识库。
  1、KnowAll
  KnowAll是为企业和教育构建各种知识管理系统的完整解决方案。
  使用KnowAll的主要好处是很容易开始。它基本上是WordPress的即插即用主题。一切都是为了帮助你在短时间内建立你的知识库,并定制它,使之与你的品牌保持一致。
  有了KnowAll,建立你的知识库就像开始写博客一样简单。你只需点击几下就可以创建新的文章,对它们进行排序,并按类别和子类别对它们进行组织。主题提供多种设计选项,以满足您在用户界面方面的需求。
  但这并不是全部,知识库之上的附加值是统计数据。使用KnowAll,您可以看到哪些文章是您浏览量最大的,并向您的读者征求一些反馈,这样您就可以看到哪些文章是有用的,哪些文章需要改进。
  KnowAll的最佳功能
  易于启动:安装主题,就可以发布第一篇文章了。
  易于组织:创建多个类别和子类别来组织文章并按您选择的顺序显示文章
  多个设计选项:您可以从多个设计中选择并自定义它们以匹配您的品牌。
  分析和报告:获取用户对您文章的反馈
  2、Document360
  Document360是一个自助式知识库软件,属于知识管理系统的范畴。它是一个完整的解决方案,用于收集、组织、检索和共享您可以定义的客户和内部用户的知识。
  文档的最佳功能360
  Document360屏幕截图
  多个仪表板:它支持许多项目或文档网站,因此当产品列表扩展时,您不必再去其他任何地方。
  强大的编辑:支持Markdown编辑器和WYSIWYG(你看到的就是你得到的)编辑器,以实现高效和结构化的写作。
  类似谷歌的硬盘:存储和管理文件、图像、视频,并随时将其插入知识库。
  版本控制和回滚:能够轻松地回滚到文章的前一个版本。
  第三方集成:它可以与对讲机、Freshdesk、Microsoft和Zendesk等集成。
  类别级别的安全性:Document360具有多个级别的高级安全访问,可以覆盖所有场景。您可以提供不同级别的读者访问权限。
  分析和报告:提供有关客户地理位置、性能和搜索概述的详细报告的强大见解。
  3、Zendesk
  Zendesk被认为是最好的客户支持管理软件之一。但是,它可以处理的不仅仅是支持票和实时聊天。
  Zendesk还具有一个称为Zendesk指南的平滑的知识管理系统。你可以使用它来建立私人和公共知识库,为客户和员工服务。
  Zendesk指南是Zendesk软件套件的一部分。订阅Zendesk后,您可以访问其他几个工具。这使得它成为更适合大企业和企业的选择。
  Zendesk的最佳功能
  zendesk预览
  初学者友好界面:Zendesk具有一个非常适合初学者的用户界面。它允许你管理你的知识库没有复杂的问题。
  从一个地方管理一切:Zendesk还有一个全渠道仪表盘。有了它,你可以从一个地方管理你的知识库、支持票证、聊天、电话等等。
  所见即所得编辑器:Zendesk指南包括一个What You See Is What You Get样式编辑器。您可以使用此编辑器创建丰富的内容设计。
  内置CRM:Zendesk使用Sunshine,它自己的CRM允许你为客户提供个性化的体验。
  4、HelpJuice
  HelpJuice是一款现代且易于使用的知识库软件,非常适合初创企业和小型企业。沃尔玛等许多知名大品牌都在使用这款软件,比如周一这样的初创企业。
  与大多数其他知识库软件不同,HelpJuice更易于设置和管理。它还有一个创新的编辑器,允许您创建结构良好的内容,同时保留更改历史记录。
  帮助果汁的最佳功能
  helpjuice预览
  强大的编辑:工具集编辑器支持许多有用的功能。比如协作和控制访问。
  简易设置:HelpJuice很容易设置。实际上,你可以在几分钟内建立并运行一个知识库。
  主题和自定义:您还可以使用预先制作的主题自定义知识库的设计。
  第三方集成:HelpJuice还支持Slack、Zendesk、SalesForce和其他集成。
  你应该使用哪种知识付费系统源码?
  WordPress是为中小型企业和初创企业建立知识库的理想选择。你可以用它来建立各种公共和私人知识库。它支持数千个扩展功能的插件。而且非常实惠。
  对于大型企业和公司,我们建议使用像Zendesk这样的一体式解决方案。从一个地方管理你的客户服务和知识库是值得的。尤其是当你需要监督很多部门和团队的时候。
  当然,你不应该只相信我们的话。做更多的研究和探索更多的选择,为您的企业找到正确的知识管理系统。你也可以看看我们自己的知识管理产品。 我们有一系列工具,专门用来建立各种类型的知识库。

继续阅读 »

  知识付费系统源码是几乎每一个成功企业的重要组成部分。然而,为什么许多新企业和初创企业忽视了它作为一个可选的组成部分?管理和定期维护知识库的昂贵成本是主要原因。使用复杂工具更新知识文章是企业避免建立知识库的另一个原因。然而,使用正确的KMS,您可以避免所有这些问题。并在很小的预算内建立一个易于管理的知识库。在本指南中,我们将仔细研究系统,以找到适合您平台的知识付费系统源码。
  开源知识付费系统平台源码:zs.xcxyms.top
  什么是知识付费系统源码?
  知识付费系统可以用多种方式定义。对一些人来说,这是一个教学和学习的平台。对其他许多人来说,这是一个有效解决问题的平台。
  简单地说,知识管理系统就是你用来分享知识的平台或工具。
  例如,使用知识管理系统,您可以创建文章、文档和指南。然后,您可以将它们提供给您的客户或员工,让他们找到与您的产品相关的常见问题的解决方案。
  无论是教育你的客户如何使用产品。或者教你的员工如何处理不同的情况。我们都同意,知识库在许多方面对所有类型的企业都是有益的。
  ●知识与管理的利益共享
  如果您还需要进一步的说服力,这里只是知识管理的诸多好处中的一小部分。
  ●降低客户支持成本
  有了知识库,您就可以让您的客户和员工自己找到解决方案。
  如果客户遇到问题,他们可以在知识库中搜索答案。员工可以使用知识库查找如何处理某些情况的指南,如响应客户的询问。
  不管怎样,它都有助于减少回复电子邮件和电话的时间和成本。
  ●培训员工和团队
  私人知识库通常被公司用来培训和教育他们的员工和团队。您可以为每个部门创建多个知识库。用课程、解决方案和指南将其填满。这样他们就可以自己找到常见问题的教程指南了。
  ●更快的解决问题
  知识库还通过提供按需解决方案帮助您节省时间。客户不再需要打电话等待数小时来解决问题。员工不需要经过数月的培训来回答简单的问题。都在知识库里。只需一次搜索就可以了。
  ●分享专业知识
  请教专家已成为过去。有了知识库,你就成了专家。知识库中充满了由专家编写的指南和文件。没有必要在别处寻求帮助。
  ●更好的搜索引擎排名
  公共知识库也可以作为搜索引擎优化的一个很好的来源。你可以优化知识文章和内容,在搜索引擎上为特定关键字排名更高。
  不同类型的知识管理系统
  开发知识管理系统的第一步是制定明确的目标。你的知识库的主要目的是什么?是服务客户还是管理自己的部门?
  一旦你有了明确的目标,你就可以根据不同类型的知识库找到正确的知识管理系统。
  ●客户支持系统
  这些是您为服务客户而制作的公共知识库系统。客户支持知识库包括教程和指南。尤其是对与产品或服务相关的常见问题的解答。这使得客户无需联系客户支持就可以找到解决方案。
  ●专家知识系统
  专家知识系统通常是私有的,为公司的团队或部门服务。例如,客户支持部门可以使用专家知识系统快速找到客户常见问题的答案。这类知识库包括关于特定主题的专家指南。
  ●文件管理系统
  顾名思义,文档管理系统是管理文档的知识库。它对于提供多种产品或服务的企业特别有用。文档管理系统帮助您在一个地方为所有产品创建一个大手册。
  ●数据库管理系统
  数据库管理系统用于存储和共享与产品或业务相关的不同类型的数据。无论是与客户或产品历史相关的数据,数据库管理都有助于保持一切井井有条。
  最佳知识付费系统源码和解决方案
  我们想找到最好的知识付费系统源码和解决方案,你可以用来建立不同类型的知识库。
  1、KnowAll
  KnowAll是为企业和教育构建各种知识管理系统的完整解决方案。
  使用KnowAll的主要好处是很容易开始。它基本上是WordPress的即插即用主题。一切都是为了帮助你在短时间内建立你的知识库,并定制它,使之与你的品牌保持一致。
  有了KnowAll,建立你的知识库就像开始写博客一样简单。你只需点击几下就可以创建新的文章,对它们进行排序,并按类别和子类别对它们进行组织。主题提供多种设计选项,以满足您在用户界面方面的需求。
  但这并不是全部,知识库之上的附加值是统计数据。使用KnowAll,您可以看到哪些文章是您浏览量最大的,并向您的读者征求一些反馈,这样您就可以看到哪些文章是有用的,哪些文章需要改进。
  KnowAll的最佳功能
  易于启动:安装主题,就可以发布第一篇文章了。
  易于组织:创建多个类别和子类别来组织文章并按您选择的顺序显示文章
  多个设计选项:您可以从多个设计中选择并自定义它们以匹配您的品牌。
  分析和报告:获取用户对您文章的反馈
  2、Document360
  Document360是一个自助式知识库软件,属于知识管理系统的范畴。它是一个完整的解决方案,用于收集、组织、检索和共享您可以定义的客户和内部用户的知识。
  文档的最佳功能360
  Document360屏幕截图
  多个仪表板:它支持许多项目或文档网站,因此当产品列表扩展时,您不必再去其他任何地方。
  强大的编辑:支持Markdown编辑器和WYSIWYG(你看到的就是你得到的)编辑器,以实现高效和结构化的写作。
  类似谷歌的硬盘:存储和管理文件、图像、视频,并随时将其插入知识库。
  版本控制和回滚:能够轻松地回滚到文章的前一个版本。
  第三方集成:它可以与对讲机、Freshdesk、Microsoft和Zendesk等集成。
  类别级别的安全性:Document360具有多个级别的高级安全访问,可以覆盖所有场景。您可以提供不同级别的读者访问权限。
  分析和报告:提供有关客户地理位置、性能和搜索概述的详细报告的强大见解。
  3、Zendesk
  Zendesk被认为是最好的客户支持管理软件之一。但是,它可以处理的不仅仅是支持票和实时聊天。
  Zendesk还具有一个称为Zendesk指南的平滑的知识管理系统。你可以使用它来建立私人和公共知识库,为客户和员工服务。
  Zendesk指南是Zendesk软件套件的一部分。订阅Zendesk后,您可以访问其他几个工具。这使得它成为更适合大企业和企业的选择。
  Zendesk的最佳功能
  zendesk预览
  初学者友好界面:Zendesk具有一个非常适合初学者的用户界面。它允许你管理你的知识库没有复杂的问题。
  从一个地方管理一切:Zendesk还有一个全渠道仪表盘。有了它,你可以从一个地方管理你的知识库、支持票证、聊天、电话等等。
  所见即所得编辑器:Zendesk指南包括一个What You See Is What You Get样式编辑器。您可以使用此编辑器创建丰富的内容设计。
  内置CRM:Zendesk使用Sunshine,它自己的CRM允许你为客户提供个性化的体验。
  4、HelpJuice
  HelpJuice是一款现代且易于使用的知识库软件,非常适合初创企业和小型企业。沃尔玛等许多知名大品牌都在使用这款软件,比如周一这样的初创企业。
  与大多数其他知识库软件不同,HelpJuice更易于设置和管理。它还有一个创新的编辑器,允许您创建结构良好的内容,同时保留更改历史记录。
  帮助果汁的最佳功能
  helpjuice预览
  强大的编辑:工具集编辑器支持许多有用的功能。比如协作和控制访问。
  简易设置:HelpJuice很容易设置。实际上,你可以在几分钟内建立并运行一个知识库。
  主题和自定义:您还可以使用预先制作的主题自定义知识库的设计。
  第三方集成:HelpJuice还支持Slack、Zendesk、SalesForce和其他集成。
  你应该使用哪种知识付费系统源码?
  WordPress是为中小型企业和初创企业建立知识库的理想选择。你可以用它来建立各种公共和私人知识库。它支持数千个扩展功能的插件。而且非常实惠。
  对于大型企业和公司,我们建议使用像Zendesk这样的一体式解决方案。从一个地方管理你的客户服务和知识库是值得的。尤其是当你需要监督很多部门和团队的时候。
  当然,你不应该只相信我们的话。做更多的研究和探索更多的选择,为您的企业找到正确的知识管理系统。你也可以看看我们自己的知识管理产品。 我们有一系列工具,专门用来建立各种类型的知识库。

收起阅读 »

mui初相识02:hello mui

mui hellomui

通过HBuilder X创建H5+项目

demo_01:标题栏

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport"  
            content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title>标题栏</title>  
        <link href="css/mui.min.css" rel="stylesheet" />  
    </head>  
    <body>  

        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <h1 class="mui-title">标题</h1>  
        </header>  

        <div class="mui-content">  
            hello mui  
        </div>  

        <script src="js/mui.min.js"></script>  
        <script type="text/javascript" charset="utf-8">  
            mui.init();  
        </script>  
    </body>  
</html>

demo_02:折叠面板

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
</head>  
<body>  

    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 class="mui-title">折叠面板</h1>  
    </header>  

    <div class="mui-content">  
        <ul class="mui-table-view">  
            <li class="mui-table-view-cell mui-collapse">  
                <a class="mui-navigate-right" href="#">面板1</a>  
                <div class="mui-collapse-content">  
                    <p>面板1子内容</p>  
                </div>  
            </li>  
            <li class="mui-table-view-cell mui-collapse">  
                <a class="mui-navigate-right" href="#">面板2</a>  
                    <div class="mui-collapse-content">  
                    <p>面板2子内容</p>  
                </div>  
            </li>  
            <li class="mui-table-view-cell mui-collapse">  
                <a class="mui-navigate-right" href="#">面板3</a>  
                <div class="mui-collapse-content">  
                    <p>面板3子内容</p>  
                </div>  
            </li>  
        </ul>  
    </div>  

    <script src="js/mui.min.js"></script>  
    <script type="text/javascript" charset="utf-8">  
        mui.init();  
    </script>  
</body>  
</html>

demo_03:操作表

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
</head>  
<body>  

    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 class="mui-title">操作表</h1>  
    </header>  

    <div class="mui-content">  
        <a id="openSheet" class="mui-btn mui-btn-primary mui-btn-block" onclick="showMenu();">打开操作表</a>  
    </div>  

    <div id="sheet" class="mui-popover mui-popover-bottom mui-popover-action ">  
        <!-- 可选择菜单 -->  
        <ul class="mui-table-view">  
          <li class="mui-table-view-cell">  
            <a href="#">菜单1</a>  
          </li>  
          <li class="mui-table-view-cell">  
            <a href="#">菜单2</a>  
          </li>  
        </ul>  
        <!-- 取消菜单 -->  
        <ul class="mui-table-view">  
          <li class="mui-table-view-cell">  
            <a href="#sheet"><b>取消</b></a>  
          </li>  
        </ul>  
    </div>  

    <script src="js/mui.min.js"></script>  
    <script type="text/javascript" charset="utf-8">  
        mui.init();  

        function showMenu(){  
            mui('#sheet').popover('toggle');  
        }  
    </script>  
</body>  
</html>

以上示例很简单,目标是了解mui的标签基础,顺利完成!

继续阅读 »

通过HBuilder X创建H5+项目

demo_01:标题栏

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport"  
            content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title>标题栏</title>  
        <link href="css/mui.min.css" rel="stylesheet" />  
    </head>  
    <body>  

        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <h1 class="mui-title">标题</h1>  
        </header>  

        <div class="mui-content">  
            hello mui  
        </div>  

        <script src="js/mui.min.js"></script>  
        <script type="text/javascript" charset="utf-8">  
            mui.init();  
        </script>  
    </body>  
</html>

demo_02:折叠面板

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
</head>  
<body>  

    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 class="mui-title">折叠面板</h1>  
    </header>  

    <div class="mui-content">  
        <ul class="mui-table-view">  
            <li class="mui-table-view-cell mui-collapse">  
                <a class="mui-navigate-right" href="#">面板1</a>  
                <div class="mui-collapse-content">  
                    <p>面板1子内容</p>  
                </div>  
            </li>  
            <li class="mui-table-view-cell mui-collapse">  
                <a class="mui-navigate-right" href="#">面板2</a>  
                    <div class="mui-collapse-content">  
                    <p>面板2子内容</p>  
                </div>  
            </li>  
            <li class="mui-table-view-cell mui-collapse">  
                <a class="mui-navigate-right" href="#">面板3</a>  
                <div class="mui-collapse-content">  
                    <p>面板3子内容</p>  
                </div>  
            </li>  
        </ul>  
    </div>  

    <script src="js/mui.min.js"></script>  
    <script type="text/javascript" charset="utf-8">  
        mui.init();  
    </script>  
</body>  
</html>

demo_03:操作表

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
</head>  
<body>  

    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 class="mui-title">操作表</h1>  
    </header>  

    <div class="mui-content">  
        <a id="openSheet" class="mui-btn mui-btn-primary mui-btn-block" onclick="showMenu();">打开操作表</a>  
    </div>  

    <div id="sheet" class="mui-popover mui-popover-bottom mui-popover-action ">  
        <!-- 可选择菜单 -->  
        <ul class="mui-table-view">  
          <li class="mui-table-view-cell">  
            <a href="#">菜单1</a>  
          </li>  
          <li class="mui-table-view-cell">  
            <a href="#">菜单2</a>  
          </li>  
        </ul>  
        <!-- 取消菜单 -->  
        <ul class="mui-table-view">  
          <li class="mui-table-view-cell">  
            <a href="#sheet"><b>取消</b></a>  
          </li>  
        </ul>  
    </div>  

    <script src="js/mui.min.js"></script>  
    <script type="text/javascript" charset="utf-8">  
        mui.init();  

        function showMenu(){  
            mui('#sheet').popover('toggle');  
        }  
    </script>  
</body>  
</html>

以上示例很简单,目标是了解mui的标签基础,顺利完成!

收起阅读 »

如何禁用X5内核浏览器的竖直滑块?

使用X5内核浏览器时,x5内核渲染页面的滚动条,会随着页面内容的长短显示滚动滑块。关于如何禁用滚动滑块,找了一天没找到解决方法,最后在腾讯浏览服务中心的文档(https://x5.tencent.com/docs/webview.html)中查看到可以禁用滚动滑块的接口:

//竖直快速滑块,设置null可去除  
mWebview.getX5WebViewExtension().setVerticalTrackDrawable (Drawable drawable)

但是mWebview是个全限定名为 com.tencent.smtt.sdk.WebView 的 java对象,想要在js中调用java方法setVerticalTrackDrawable,有两个方案:方案一、使用Native.js;方案二、自己写个uniapp原生插件

首先尝试了方案一,但最终失败。方案一的js代码如下:

失败原因是使用x5内核时,无法使用plus api获取到webview的nativeInstanceObject对象。这个应该是一个bug。

    var pages = getCurrentPages();    
    var page = pages[pages.length - 1];    

    var wv1 = page.$getAppWebview();  

    console.log('$getAppWebview', wv1)  
    // 尝试拿到webview的原生对象  
    let mWebView = wv1.nativeInstanceObject();    

    // 当不使用x5内核时 mWebView 可以获取到值,当使用x5内核时 mWebView 总是为 null  
    console.log('mWebView', mWebView)  
    var clazz = plus.android.invoke(mWebView, 'getClass')  
    console.log('mWebView class', clazz);  
    var name = plus.android.invoke(clazz, 'getName')  
    console.log('mWebView class name', name);  
    console.log('invoke getX5WebViewExtension')  
    var extension = plus.android.invoke(mWebView, 'getX5WebViewExtension')  
    console.log('getX5WebViewExtension result:', extension)  
    if (extension != null) {  
        plus.android.invoke(mWebView, 'setVerticalTrackDrawable', null)  
        console.log('invoke setVerticalTrackDrawable success')  
    }

目前暂时有效的方法:方案二

方案二,目前仅配适了安卓。关于如何自定义原生插件,见:https://nativesupport.dcloud.net.cn/NativePlugin/course/android
自定义的原生插件,java代码如下:

package io.dcloud.uniplugin;  

import android.util.Log;  
import android.view.View;  
import android.view.ViewGroup;  

import com.alibaba.fastjson.JSONObject;  
import com.taobao.weex.WXSDKInstance;  
import com.tencent.smtt.export.external.extension.interfaces.IX5WebViewExtension;  

import java.util.HashSet;  
import java.util.LinkedList;  
import java.util.Set;  

import io.dcloud.common.DHInterface.IApp;  
import io.dcloud.common.DHInterface.IWebAppRootView;  
import io.dcloud.common.DHInterface.IWebview;  
import io.dcloud.feature.uniapp.annotation.UniJSMethod;  
import io.dcloud.feature.uniapp.bridge.UniJSCallback;  
import io.dcloud.feature.uniapp.common.UniModule;  
import io.dcloud.feature.weex.WeexInstanceMgr;  
import io.dcloud.feature.x5.X5WebView;  

public class X5Util extends UniModule {  
    private final static String TAG = "X5Util";  

    //run ui thread  
    @UniJSMethod(uiThread = true)  
    public void disableVerticalTrack2(JSONObject options, UniJSCallback callback) {  
        JSONObject jsonObject = this.disableVerticalTrack();  
        callback.invoke(jsonObject);  
    }  

    /**  
     * {@link io.dcloud.feature.weex.extend.PlusModule#exec(String, String)}  
     * @return  
     */  
    //run JS thread  
    @UniJSMethod (uiThread = false)  
    public JSONObject disableVerticalTrack(){  
        JSONObject data = new JSONObject();  
        data.put("code", "error");  
        try {  
            WXSDKInstance instance = this.mWXSDKInstance;  
            if (instance != null && instance.isDestroy()) {  
                // ignore  
                return data;  
            } else {  
                IWebview hostWebview = WeexInstanceMgr.self().findWebview(instance);  
                IApp iApp = hostWebview.obtainApp();  
                if (iApp != null) {  
                    IWebAppRootView iWebAppRootView = iApp.obtainWebAppRootView();  
                    View view = iWebAppRootView.obtainMainView();  
                    if (view instanceof ViewGroup) {  
                        ViewGroup vg = (ViewGroup) view;  
                        Set<X5WebView> set = new HashSet<>();  
                        getChildViewGroup(vg, set);  

                        for (X5WebView iWebview : set) {  
                            disableVerticalTrackDrawable(iWebview, data);  
                        }  
                    }  
                }  
            }  
        } catch (Exception e) {  
            Log.e(TAG, "disableVerticalTrack exception: ", e);  
        }  

        return data;  
    }  

    void disableVerticalTrackDrawable(X5WebView x5, JSONObject data) {  
        IX5WebViewExtension x5WebViewExtension = x5.getX5WebViewExtension();  
        if (x5WebViewExtension != null) {  
            x5WebViewExtension.setVerticalTrackDrawable(null);  
            data.put("code", "success");  
        }  
    }  
    void getChildViewGroup(ViewGroup vg, Set<X5WebView> dist) {  
        LinkedList<ViewGroup> list = new LinkedList<>();  
        list.add(vg);  

        while (!list.isEmpty()) {  
            vg = list.removeFirst();  
            int childCount = vg.getChildCount();  
            for (int i = 0; i < childCount; i++) {  
                View childAt = vg.getChildAt(i);  
                if (childAt instanceof X5WebView) {  
                    dist.add((X5WebView)childAt);  
                } else if (childAt instanceof ViewGroup) {  
                    list.addLast((ViewGroup) childAt);  
                }  
            }  
        }  
    }  
}

在js中调用:

    // #ifdef APP-PLUS  
    //禁用滑动按钮,这个插件会遍历所有view对象,找到X5WebView,然后禁用竖直快速滑块  
    const X5Util = uni.requireNativePlugin('X5Util')  
    X5Util.disableVerticalTrack()  
    // #endif

因为没有找到如何准确地获取当前页面webview对象(也就是X5WebView对象实例), 所以想了个笨办法:遍历IWebAppRootView对象的所有子孙view然后禁用竖直滑块。存在的问题有:1. 遍历查询存在性能问题; 2. 禁用的是所有的X5WebView的竖直滑块。

如果哪位大神知道如何准确地获取X5WebView请告知一下,这样就可以解决上述两个问题了。

继续阅读 »

使用X5内核浏览器时,x5内核渲染页面的滚动条,会随着页面内容的长短显示滚动滑块。关于如何禁用滚动滑块,找了一天没找到解决方法,最后在腾讯浏览服务中心的文档(https://x5.tencent.com/docs/webview.html)中查看到可以禁用滚动滑块的接口:

//竖直快速滑块,设置null可去除  
mWebview.getX5WebViewExtension().setVerticalTrackDrawable (Drawable drawable)

但是mWebview是个全限定名为 com.tencent.smtt.sdk.WebView 的 java对象,想要在js中调用java方法setVerticalTrackDrawable,有两个方案:方案一、使用Native.js;方案二、自己写个uniapp原生插件

首先尝试了方案一,但最终失败。方案一的js代码如下:

失败原因是使用x5内核时,无法使用plus api获取到webview的nativeInstanceObject对象。这个应该是一个bug。

    var pages = getCurrentPages();    
    var page = pages[pages.length - 1];    

    var wv1 = page.$getAppWebview();  

    console.log('$getAppWebview', wv1)  
    // 尝试拿到webview的原生对象  
    let mWebView = wv1.nativeInstanceObject();    

    // 当不使用x5内核时 mWebView 可以获取到值,当使用x5内核时 mWebView 总是为 null  
    console.log('mWebView', mWebView)  
    var clazz = plus.android.invoke(mWebView, 'getClass')  
    console.log('mWebView class', clazz);  
    var name = plus.android.invoke(clazz, 'getName')  
    console.log('mWebView class name', name);  
    console.log('invoke getX5WebViewExtension')  
    var extension = plus.android.invoke(mWebView, 'getX5WebViewExtension')  
    console.log('getX5WebViewExtension result:', extension)  
    if (extension != null) {  
        plus.android.invoke(mWebView, 'setVerticalTrackDrawable', null)  
        console.log('invoke setVerticalTrackDrawable success')  
    }

目前暂时有效的方法:方案二

方案二,目前仅配适了安卓。关于如何自定义原生插件,见:https://nativesupport.dcloud.net.cn/NativePlugin/course/android
自定义的原生插件,java代码如下:

package io.dcloud.uniplugin;  

import android.util.Log;  
import android.view.View;  
import android.view.ViewGroup;  

import com.alibaba.fastjson.JSONObject;  
import com.taobao.weex.WXSDKInstance;  
import com.tencent.smtt.export.external.extension.interfaces.IX5WebViewExtension;  

import java.util.HashSet;  
import java.util.LinkedList;  
import java.util.Set;  

import io.dcloud.common.DHInterface.IApp;  
import io.dcloud.common.DHInterface.IWebAppRootView;  
import io.dcloud.common.DHInterface.IWebview;  
import io.dcloud.feature.uniapp.annotation.UniJSMethod;  
import io.dcloud.feature.uniapp.bridge.UniJSCallback;  
import io.dcloud.feature.uniapp.common.UniModule;  
import io.dcloud.feature.weex.WeexInstanceMgr;  
import io.dcloud.feature.x5.X5WebView;  

public class X5Util extends UniModule {  
    private final static String TAG = "X5Util";  

    //run ui thread  
    @UniJSMethod(uiThread = true)  
    public void disableVerticalTrack2(JSONObject options, UniJSCallback callback) {  
        JSONObject jsonObject = this.disableVerticalTrack();  
        callback.invoke(jsonObject);  
    }  

    /**  
     * {@link io.dcloud.feature.weex.extend.PlusModule#exec(String, String)}  
     * @return  
     */  
    //run JS thread  
    @UniJSMethod (uiThread = false)  
    public JSONObject disableVerticalTrack(){  
        JSONObject data = new JSONObject();  
        data.put("code", "error");  
        try {  
            WXSDKInstance instance = this.mWXSDKInstance;  
            if (instance != null && instance.isDestroy()) {  
                // ignore  
                return data;  
            } else {  
                IWebview hostWebview = WeexInstanceMgr.self().findWebview(instance);  
                IApp iApp = hostWebview.obtainApp();  
                if (iApp != null) {  
                    IWebAppRootView iWebAppRootView = iApp.obtainWebAppRootView();  
                    View view = iWebAppRootView.obtainMainView();  
                    if (view instanceof ViewGroup) {  
                        ViewGroup vg = (ViewGroup) view;  
                        Set<X5WebView> set = new HashSet<>();  
                        getChildViewGroup(vg, set);  

                        for (X5WebView iWebview : set) {  
                            disableVerticalTrackDrawable(iWebview, data);  
                        }  
                    }  
                }  
            }  
        } catch (Exception e) {  
            Log.e(TAG, "disableVerticalTrack exception: ", e);  
        }  

        return data;  
    }  

    void disableVerticalTrackDrawable(X5WebView x5, JSONObject data) {  
        IX5WebViewExtension x5WebViewExtension = x5.getX5WebViewExtension();  
        if (x5WebViewExtension != null) {  
            x5WebViewExtension.setVerticalTrackDrawable(null);  
            data.put("code", "success");  
        }  
    }  
    void getChildViewGroup(ViewGroup vg, Set<X5WebView> dist) {  
        LinkedList<ViewGroup> list = new LinkedList<>();  
        list.add(vg);  

        while (!list.isEmpty()) {  
            vg = list.removeFirst();  
            int childCount = vg.getChildCount();  
            for (int i = 0; i < childCount; i++) {  
                View childAt = vg.getChildAt(i);  
                if (childAt instanceof X5WebView) {  
                    dist.add((X5WebView)childAt);  
                } else if (childAt instanceof ViewGroup) {  
                    list.addLast((ViewGroup) childAt);  
                }  
            }  
        }  
    }  
}

在js中调用:

    // #ifdef APP-PLUS  
    //禁用滑动按钮,这个插件会遍历所有view对象,找到X5WebView,然后禁用竖直快速滑块  
    const X5Util = uni.requireNativePlugin('X5Util')  
    X5Util.disableVerticalTrack()  
    // #endif

因为没有找到如何准确地获取当前页面webview对象(也就是X5WebView对象实例), 所以想了个笨办法:遍历IWebAppRootView对象的所有子孙view然后禁用竖直滑块。存在的问题有:1. 遍历查询存在性能问题; 2. 禁用的是所有的X5WebView的竖直滑块。

如果哪位大神知道如何准确地获取X5WebView请告知一下,这样就可以解决上述两个问题了。

收起阅读 »

FirstUI组件库:始于颜值、陷于品质、忠于服务

组件

一、产品介绍

FirstUI(https://www.firstui.cn/)

给大家推荐下我们做的FirstUI(https://www.firstui.cn/),它是基于uni-app开发的一款轻量、全面可靠的跨平台移动端组件库。包括框架、组件、模板、功能插件几个部分。我们前后花了大概6个月的时间,目前组件、布局部分基本完成了,还做了几款简单的模板,后续会着力做模板这一块,多提供一些成熟常用的场景模板。可以实现快速上手,更好的节约使用者的时间与成本。

FirstUI我们倾注了大量的精力,很期待大家的关注试用,谢谢!

1、产品特征:

  • 多端支持。一套代码,多端适用,支持iOS(vue和Nvue)、Android(vue和Nvue)、微信小程序、支付宝小程序、QQ小程序、百度小程序、字节跳动小程序、H5平台
  • 完善的组件。目前共规划118款,已上线70款,涵盖基础组件、表单组件、导航组件、布局组件、常用布局、扩展组件、操作反馈、数据组件、JS、图表、画布。
  • 丰富实用的布局、模板。基于FirstUI提供的组件,针对常用场景、行业,提供丰富实用的布局和模板。
  • 专属社区。我们用flarum(ps:这个大家也可以试下,设计与功能方面好用,感觉用来做社区非常棒)打造了FirstU专属社区(https://forum.firstui.cn/),用户可以在社区交流分享FirstUI的使用经验、提问。有其他组件、模板需求,也可以在社区中反馈。

2、源码及文档:

3、扫码体验:

大部分组件是操作性的,大家扫码操作可以有更真切的感受。目前发布了6个平台版本,大家可以扫码体验下。考虑快速预览,所以暂未上架App应用,后续待功能完善再进行上架。

4、部分效果:

5、进展与已上线功能清单:

进展情况:

已上线功能清单:

  • 框架
    • FirstUI组件库(uni-app版)
  • 模板
    • 登录(A)模板
    • 登录(B)模板
    • 登录(C)模板
    • 登录(D)模板
    • 门户模板
  • 组件
    • 基础组件
    • Color 色彩
    • Icon 图标
    • Button 按钮
    • Footer 页脚
    • Animation 动画
    • 导航组件
    • NavBar 导航栏
    • Pagination 分页器
    • SegmentedControl 分段器
    • Tabbar 标签栏
    • Tabs 标签页
    • IndexList 索引列表
    • NoticeBar 通告栏
    • Sticky 吸顶容器
    • Steps 步骤条
    • Fab 浮动按钮
    • Drawer 抽屉
    • BottomPopup 底部弹出层
    • TopPopup 顶部弹出层
    • TimeAxis 时间轴
    • 布局组件
    • Layout 栅格布局
    • Panel 面板
    • Preview 表单预览
    • List 列表
    • Card 卡片
    • 扩展组件
    • ShareSheet 分享面板
    • Result 结果页
    • FilterBar 筛选栏
    • DigitalRoller 数字滚轮
    • DigitalKeyboard 数字键盘
    • CountdownVerify 验证码倒计时
    • SwiperDot 轮播图指示点
    • LicensePlate 车牌号键盘
    • SingleInput 单输入框
    • 操作反馈
    • ActionSheet 上拉菜单
    • Toast 轻提示
    • BackDrop 遮罩层
    • Dialog 对话框
    • DropdownMenu 下拉菜单
    • Modal 模态框
    • Landscape 压屏窗
    • Loading 加载
    • Message 消息提示
    • SwipeAction 滑动菜单
    • DropdownList 下拉菜单
    • LoadAni 加载动画
    • 数据组件
    • Badge 徽章
    • Alert 警告框
    • Avatar 头像
    • Tag 标签
    • Progress 进度条
    • Collapse 折叠面板
    • Divider 分割线
    • LoadMore 加载更多
    • Empty 暂无数据
    • 画布
    • Poster 绘制分享海报
    • 表单组件
    • Picker 选择器
    • DatePicker 日期时间选择器
    • Form 表单校验
    • Input 输入框
    • InputNumber 数字输入框
    • Radio 单选框
    • Checkbox 复选框
    • Switch 开关
    • Textarea 多行输入框
    • SearchBar 搜索栏
    • JS
    • Clipboard 复制文本
    • Request 网络请求
    • Utils 工具类
    • Validator 表单验证

二、商业版与开源版

FirstUI分为开源版与商业版,部分组件为商业版可用,目前商业版的费用是¥150元,一次性费用,支持后续更新。

VIP会员权益:

  • 完整版源码
  • 全部组件
  • 物料商城享VIP折扣
  • 专属会员群指导、答疑
  • 新特性优先体验
  • VIP专属文档

会员权益详情: https://www.firstui.cn/right

三、使用体验与建议

FirstUI刚刚开始成长,非常期待大家的体验使用和宝贵的建议!大家可以在文后留言,让我们有新的认识,谢谢!

继续阅读 »

一、产品介绍

FirstUI(https://www.firstui.cn/)

给大家推荐下我们做的FirstUI(https://www.firstui.cn/),它是基于uni-app开发的一款轻量、全面可靠的跨平台移动端组件库。包括框架、组件、模板、功能插件几个部分。我们前后花了大概6个月的时间,目前组件、布局部分基本完成了,还做了几款简单的模板,后续会着力做模板这一块,多提供一些成熟常用的场景模板。可以实现快速上手,更好的节约使用者的时间与成本。

FirstUI我们倾注了大量的精力,很期待大家的关注试用,谢谢!

1、产品特征:

  • 多端支持。一套代码,多端适用,支持iOS(vue和Nvue)、Android(vue和Nvue)、微信小程序、支付宝小程序、QQ小程序、百度小程序、字节跳动小程序、H5平台
  • 完善的组件。目前共规划118款,已上线70款,涵盖基础组件、表单组件、导航组件、布局组件、常用布局、扩展组件、操作反馈、数据组件、JS、图表、画布。
  • 丰富实用的布局、模板。基于FirstUI提供的组件,针对常用场景、行业,提供丰富实用的布局和模板。
  • 专属社区。我们用flarum(ps:这个大家也可以试下,设计与功能方面好用,感觉用来做社区非常棒)打造了FirstU专属社区(https://forum.firstui.cn/),用户可以在社区交流分享FirstUI的使用经验、提问。有其他组件、模板需求,也可以在社区中反馈。

2、源码及文档:

3、扫码体验:

大部分组件是操作性的,大家扫码操作可以有更真切的感受。目前发布了6个平台版本,大家可以扫码体验下。考虑快速预览,所以暂未上架App应用,后续待功能完善再进行上架。

4、部分效果:

5、进展与已上线功能清单:

进展情况:

已上线功能清单:

  • 框架
    • FirstUI组件库(uni-app版)
  • 模板
    • 登录(A)模板
    • 登录(B)模板
    • 登录(C)模板
    • 登录(D)模板
    • 门户模板
  • 组件
    • 基础组件
    • Color 色彩
    • Icon 图标
    • Button 按钮
    • Footer 页脚
    • Animation 动画
    • 导航组件
    • NavBar 导航栏
    • Pagination 分页器
    • SegmentedControl 分段器
    • Tabbar 标签栏
    • Tabs 标签页
    • IndexList 索引列表
    • NoticeBar 通告栏
    • Sticky 吸顶容器
    • Steps 步骤条
    • Fab 浮动按钮
    • Drawer 抽屉
    • BottomPopup 底部弹出层
    • TopPopup 顶部弹出层
    • TimeAxis 时间轴
    • 布局组件
    • Layout 栅格布局
    • Panel 面板
    • Preview 表单预览
    • List 列表
    • Card 卡片
    • 扩展组件
    • ShareSheet 分享面板
    • Result 结果页
    • FilterBar 筛选栏
    • DigitalRoller 数字滚轮
    • DigitalKeyboard 数字键盘
    • CountdownVerify 验证码倒计时
    • SwiperDot 轮播图指示点
    • LicensePlate 车牌号键盘
    • SingleInput 单输入框
    • 操作反馈
    • ActionSheet 上拉菜单
    • Toast 轻提示
    • BackDrop 遮罩层
    • Dialog 对话框
    • DropdownMenu 下拉菜单
    • Modal 模态框
    • Landscape 压屏窗
    • Loading 加载
    • Message 消息提示
    • SwipeAction 滑动菜单
    • DropdownList 下拉菜单
    • LoadAni 加载动画
    • 数据组件
    • Badge 徽章
    • Alert 警告框
    • Avatar 头像
    • Tag 标签
    • Progress 进度条
    • Collapse 折叠面板
    • Divider 分割线
    • LoadMore 加载更多
    • Empty 暂无数据
    • 画布
    • Poster 绘制分享海报
    • 表单组件
    • Picker 选择器
    • DatePicker 日期时间选择器
    • Form 表单校验
    • Input 输入框
    • InputNumber 数字输入框
    • Radio 单选框
    • Checkbox 复选框
    • Switch 开关
    • Textarea 多行输入框
    • SearchBar 搜索栏
    • JS
    • Clipboard 复制文本
    • Request 网络请求
    • Utils 工具类
    • Validator 表单验证

二、商业版与开源版

FirstUI分为开源版与商业版,部分组件为商业版可用,目前商业版的费用是¥150元,一次性费用,支持后续更新。

VIP会员权益:

  • 完整版源码
  • 全部组件
  • 物料商城享VIP折扣
  • 专属会员群指导、答疑
  • 新特性优先体验
  • VIP专属文档

会员权益详情: https://www.firstui.cn/right

三、使用体验与建议

FirstUI刚刚开始成长,非常期待大家的体验使用和宝贵的建议!大家可以在文后留言,让我们有新的认识,谢谢!

收起阅读 »

mui初相识01:路漫漫其修远兮,吾将上下而求索

mui hellomui

起心动念

  • 想学一门手机端前端的技术,本想学习uniapp,后来被mui拐跑了,因为之前对jq有所了解,觉得mui应该和jq差不太多,先学之后不行再改uniapp。

相关网站

学习计划

  1. 选课程,跟着老师做示例(学习入门阶段);
  2. 自己设计一个有价值的产品(产品设计 & 技术调研);
  3. 打造后台数据库及服务器,为前端提供接口(我的本职工作,小菜一碟);
  4. 前后端交合,形成产品,造福全猿类!(口气有点大,还是吸引同类吧!)

课程选择

【前端移动端开发】MUI视频教程(移动端开发神器)

相关练习

以后再追加连接

继续阅读 »

起心动念

  • 想学一门手机端前端的技术,本想学习uniapp,后来被mui拐跑了,因为之前对jq有所了解,觉得mui应该和jq差不太多,先学之后不行再改uniapp。

相关网站

学习计划

  1. 选课程,跟着老师做示例(学习入门阶段);
  2. 自己设计一个有价值的产品(产品设计 & 技术调研);
  3. 打造后台数据库及服务器,为前端提供接口(我的本职工作,小菜一碟);
  4. 前后端交合,形成产品,造福全猿类!(口气有点大,还是吸引同类吧!)

课程选择

【前端移动端开发】MUI视频教程(移动端开发神器)

相关练习

以后再追加连接

收起阅读 »

可否出个可视化操作数据库的组件

优化建议

包括数据库连接、数据库增删改查等方法,可否有个可视化操作组件,只需要配置相关的属性和关联有关的组件,即可轻松操作数据库。

包括数据库连接、数据库增删改查等方法,可否有个可视化操作组件,只需要配置相关的属性和关联有关的组件,即可轻松操作数据库。

HBuilderX 3.3.2+ uni.getLocation 更新注意事项

uni_app

HBuilderX 3.3.2 以下版本 App 端 uni.getLocation 存在 type 参数不生效的 bug。实际上返回的坐标类型依据打包时是否勾选了三方定位模块,当勾选了三方定位模块(如高德定位)时返回 gcj02 类型的,否则返回 wgs84 类型。

以上问题导致:部分开发者获取到了 gcj02 类型的坐标(国内一般均使用此类型)而误以为自己需要的是 wgs84 类型;部分开发者获未配置 SDK 取到了 wgs84 类型的坐标,误认为自己获取到的 gcj02 类型的坐标偏移。

更新 HBuilderX 到 3.3.2 后,修复了以上问题(type 参数将开始生效,也请注意定位 SDK 配置需要一致),如仍需获取 gcj02 类型,请在调用 uni.getLocation 时指定 type 参数以及勾选填写三方定位模块:

uni.getLocation({  
    type: 'gcj02',  
    success: function (res) {  
        console.log('当前位置的经度:' + res.longitude);  
        console.log('当前位置的纬度:' + res.latitude);  
    }  
});
继续阅读 »

HBuilderX 3.3.2 以下版本 App 端 uni.getLocation 存在 type 参数不生效的 bug。实际上返回的坐标类型依据打包时是否勾选了三方定位模块,当勾选了三方定位模块(如高德定位)时返回 gcj02 类型的,否则返回 wgs84 类型。

以上问题导致:部分开发者获取到了 gcj02 类型的坐标(国内一般均使用此类型)而误以为自己需要的是 wgs84 类型;部分开发者获未配置 SDK 取到了 wgs84 类型的坐标,误认为自己获取到的 gcj02 类型的坐标偏移。

更新 HBuilderX 到 3.3.2 后,修复了以上问题(type 参数将开始生效,也请注意定位 SDK 配置需要一致),如仍需获取 gcj02 类型,请在调用 uni.getLocation 时指定 type 参数以及勾选填写三方定位模块:

uni.getLocation({  
    type: 'gcj02',  
    success: function (res) {  
        console.log('当前位置的经度:' + res.longitude);  
        console.log('当前位置的纬度:' + res.latitude);  
    }  
});
收起阅读 »

什么叫组件丰富?什么叫真正的组件丰富?一起来看看FirstUI的答案

组件

一、产品介绍

FirstUI(https://www.firstui.cn/)

给大家推荐下我们做的FirstUI,它是基于uni-app开发的一款轻量、全面可靠的跨平台移动端组件库。包括框架、组件、模板、功能插件几个部分。高品质产品,可以更好的节约使用者的时间与成本。

FirstUI我们倾注了大量的精力,很期待大家的关注试用!

1、产品特征:

  • 多端支持。一套代码,多端适用,支持iOS(vue和Nvue)、Android(vue和Nvue)、微信小程序、支付宝小程序、QQ小程序、百度小程序、字节跳动小程序、H5平台
  • 完善的组件。目前共规划118款,已上线70款,涵盖基础组件、表单组件、导航组件、布局组件、常用布局、扩展组件、操作反馈、数据组件、JS、图表、画布。
  • 丰富实用的布局、模板。基于FirstUI提供的组件,针对常用场景、行业,提供丰富实用的布局和模板。
  • 专属社区。我们用flarum(ps:这个大家也可以试下,设计与功能方面好用,感觉用来做社区非常棒)打造了FirstU专属社区(https://forum.firstui.cn/),用户可以在社区交流分享FirstUI的使用经验、提问。有其他组件、模板需求,也可以在社区中反馈。

2、源码及文档:

3、扫码体验:

大部分组件是操作性的,大家扫码操作可以有更真切的感受。目前发布了6个平台版本,大家可以扫码体验下。考虑快速预览,所以暂未上架App应用,后续待功能完善再进行上架。

4、丰富丰富还是丰富,已上线组件一览

> 全部都是精心打造,实打实的组件,不是为了充数量而拼凑组合来的!强烈建议大家扫码体验!

  • 基础组件
    • Color 色彩
    • Icon 图标
    • Button 按钮
    • Footer 页脚
    • Animation 动画
  • 导航组件
    • NavBar 导航栏
    • Pagination 分页器
    • SegmentedControl 分段器
    • Tabbar 标签栏
    • Tabs 标签页
    • IndexList 索引列表
    • NoticeBar 通告栏
    • Sticky 吸顶容器
    • Steps 步骤条
    • Fab 浮动按钮
    • Drawer 抽屉
    • BottomPopup 底部弹出层
    • TopPopup 顶部弹出层
    • TimeAxis 时间轴
  • 布局组件
    • Layout 栅格布局
    • Panel 面板
    • Preview 表单预览
    • List 列表
    • Card 卡片
  • 扩展组件
    • ShareSheet 分享面板
    • Result 结果页
    • FilterBar 筛选栏
    • DigitalRoller 数字滚轮
    • DigitalKeyboard 数字键盘
    • CountdownVerify 验证码倒计时
    • SwiperDot 轮播图指示点
    • LicensePlate 车牌号键盘
    • SingleInput 单输入框
  • 操作反馈
    • ActionSheet 上拉菜单
    • Toast 轻提示
    • BackDrop 遮罩层
    • Dialog 对话框
    • DropdownMenu 下拉菜单
    • Modal 模态框
    • Landscape 压屏窗
    • Loading 加载
    • Message 消息提示
    • SwipeAction 滑动菜单
    • DropdownList 下拉菜单
    • LoadAni 加载动画
  • 数据组件
    • Badge 徽章
    • Alert 警告框
    • Avatar 头像
    • Tag 标签
    • Progress 进度条
    • Collapse 折叠面板
    • Divider 分割线
    • LoadMore 加载更多
    • Empty 暂无数据
  • 画布
    • Poster 绘制分享海报
  • 表单组件
    • Picker 选择器
    • DatePicker 日期时间选择器
    • Form 表单校验
    • Input 输入框
    • InputNumber 数字输入框
    • Radio 单选框
    • Checkbox 复选框
    • Switch 开关
    • Textarea 多行输入框
    • SearchBar 搜索栏
  • JS
    • Clipboard 复制文本
    • Request 网络请求
    • Utils 工具类
    • Validator 表单验证

二、使用体验与建议

FirstUI刚刚开始成长,非常期待大家的体验使用和宝贵的建议!大家可以在文后留言,让我们有新的认识,谢谢!

继续阅读 »

一、产品介绍

FirstUI(https://www.firstui.cn/)

给大家推荐下我们做的FirstUI,它是基于uni-app开发的一款轻量、全面可靠的跨平台移动端组件库。包括框架、组件、模板、功能插件几个部分。高品质产品,可以更好的节约使用者的时间与成本。

FirstUI我们倾注了大量的精力,很期待大家的关注试用!

1、产品特征:

  • 多端支持。一套代码,多端适用,支持iOS(vue和Nvue)、Android(vue和Nvue)、微信小程序、支付宝小程序、QQ小程序、百度小程序、字节跳动小程序、H5平台
  • 完善的组件。目前共规划118款,已上线70款,涵盖基础组件、表单组件、导航组件、布局组件、常用布局、扩展组件、操作反馈、数据组件、JS、图表、画布。
  • 丰富实用的布局、模板。基于FirstUI提供的组件,针对常用场景、行业,提供丰富实用的布局和模板。
  • 专属社区。我们用flarum(ps:这个大家也可以试下,设计与功能方面好用,感觉用来做社区非常棒)打造了FirstU专属社区(https://forum.firstui.cn/),用户可以在社区交流分享FirstUI的使用经验、提问。有其他组件、模板需求,也可以在社区中反馈。

2、源码及文档:

3、扫码体验:

大部分组件是操作性的,大家扫码操作可以有更真切的感受。目前发布了6个平台版本,大家可以扫码体验下。考虑快速预览,所以暂未上架App应用,后续待功能完善再进行上架。

4、丰富丰富还是丰富,已上线组件一览

> 全部都是精心打造,实打实的组件,不是为了充数量而拼凑组合来的!强烈建议大家扫码体验!

  • 基础组件
    • Color 色彩
    • Icon 图标
    • Button 按钮
    • Footer 页脚
    • Animation 动画
  • 导航组件
    • NavBar 导航栏
    • Pagination 分页器
    • SegmentedControl 分段器
    • Tabbar 标签栏
    • Tabs 标签页
    • IndexList 索引列表
    • NoticeBar 通告栏
    • Sticky 吸顶容器
    • Steps 步骤条
    • Fab 浮动按钮
    • Drawer 抽屉
    • BottomPopup 底部弹出层
    • TopPopup 顶部弹出层
    • TimeAxis 时间轴
  • 布局组件
    • Layout 栅格布局
    • Panel 面板
    • Preview 表单预览
    • List 列表
    • Card 卡片
  • 扩展组件
    • ShareSheet 分享面板
    • Result 结果页
    • FilterBar 筛选栏
    • DigitalRoller 数字滚轮
    • DigitalKeyboard 数字键盘
    • CountdownVerify 验证码倒计时
    • SwiperDot 轮播图指示点
    • LicensePlate 车牌号键盘
    • SingleInput 单输入框
  • 操作反馈
    • ActionSheet 上拉菜单
    • Toast 轻提示
    • BackDrop 遮罩层
    • Dialog 对话框
    • DropdownMenu 下拉菜单
    • Modal 模态框
    • Landscape 压屏窗
    • Loading 加载
    • Message 消息提示
    • SwipeAction 滑动菜单
    • DropdownList 下拉菜单
    • LoadAni 加载动画
  • 数据组件
    • Badge 徽章
    • Alert 警告框
    • Avatar 头像
    • Tag 标签
    • Progress 进度条
    • Collapse 折叠面板
    • Divider 分割线
    • LoadMore 加载更多
    • Empty 暂无数据
  • 画布
    • Poster 绘制分享海报
  • 表单组件
    • Picker 选择器
    • DatePicker 日期时间选择器
    • Form 表单校验
    • Input 输入框
    • InputNumber 数字输入框
    • Radio 单选框
    • Checkbox 复选框
    • Switch 开关
    • Textarea 多行输入框
    • SearchBar 搜索栏
  • JS
    • Clipboard 复制文本
    • Request 网络请求
    • Utils 工具类
    • Validator 表单验证

二、使用体验与建议

FirstUI刚刚开始成长,非常期待大家的体验使用和宝贵的建议!大家可以在文后留言,让我们有新的认识,谢谢!

收起阅读 »

uniapp支付 打包苹果上架包过

如果需要上架苹果商店的伙伴,由于支付卡住上不了的,欢迎评论,加微信:15735106725,包过

如果需要上架苹果商店的伙伴,由于支付卡住上不了的,欢迎评论,加微信:15735106725,包过

创建uni-id的数据表一再失败,最终找到解决办法

最近我想试安装uni-id示例项目,可是却在创建数据表的时候一再失败。

我最初也没多想,只是在“使用OpenDB表模板创建数据表”的时候,选中了uni-id类别下面的所有的表,然后点击“创建选中的表”。

可是后来我发现老是创建失败,创建失败的原因提示一闪而过,也来不及看清。

但是我反复琢磨,总算找到了解决办法。办法是:不要一次性选中所有的表创建,而要分批创建,先选中uni-id-permissions、uni-id-roles这两个表,创建成功之后,再创建uni-id-users这个表,然后再逐个创建其余的表。

为什么会这样我也不了解,总之我反复琢磨地创建成了。另外,我还发现一处小问题,

uniCloud/cloudfunctions/uni-id-test/index.js的第23行,msg需要改成message。

继续阅读 »

最近我想试安装uni-id示例项目,可是却在创建数据表的时候一再失败。

我最初也没多想,只是在“使用OpenDB表模板创建数据表”的时候,选中了uni-id类别下面的所有的表,然后点击“创建选中的表”。

可是后来我发现老是创建失败,创建失败的原因提示一闪而过,也来不及看清。

但是我反复琢磨,总算找到了解决办法。办法是:不要一次性选中所有的表创建,而要分批创建,先选中uni-id-permissions、uni-id-roles这两个表,创建成功之后,再创建uni-id-users这个表,然后再逐个创建其余的表。

为什么会这样我也不了解,总之我反复琢磨地创建成了。另外,我还发现一处小问题,

uniCloud/cloudfunctions/uni-id-test/index.js的第23行,msg需要改成message。

收起阅读 »