一个App完成入门篇(七)- 完成发现页面

第七章是入门篇的倒数第二篇文章了,明天整个APP将进入收官。

本节教程主要要教会大家使用二维码扫描和用do_WebView组件加在html页面。

  • 导入项目
  • do_WebView组件
  • 扫描功能
  • 自定义事件

将要学习的demo效果图如下所示

1. 导入完整项目

本节示例demo请参考下载地址,可以导入到设计器中学习。

这节教程中将要用到的组件有do_BarcodeView请大家前几节教程所教授的方法,提前添加这两个组件,并打成相应调试包用于调试。

2. do_WebView组件
do_WebView是一个很强大的组件,既可以访问网页,也可以加在本地html,更可以在html页面中嵌套DeviceOne组件,能完美结合h5页面和DeviceOne原生组件。

分析一下我们将要实现的发现页面,点击“扫描”按钮调用do_BarcodeView的扫描功能,进行二维码扫描,而在页面正中放一个do_WebView组件,加载本地的html文件,在该文件中自定义页面样式,并在html中画出的button按钮中响应DeviceOne的各组件功能。

更详细的文档请见WebView的使用

3.扫描功能
新建一个scanBarcode.ui页面,里面就放一个do_BarcodeView组件,在点击“点击扫描”按钮后打开该页,并调用do_BarcodeView的scan功能扫描二维码,在扫描成功的回调中调用closePage关闭该页,这里仅供演示用,正常扫描的结果会在回调函数的data中返回,用户可以拿到这个data做任意操作。

4.自定义事件
DeviceOne提供事件和消息机制,开发者可以很方便的使用。这里有一个简单的示例:

通过on来订阅do_ALayout_opt的touch事件,在合适的地方用fire来触发该事件,需要注意的是,事件的触发需在订阅之后。

更详细的文档请见事件和消息机制的介绍

时间: 2024-10-07 19:15:07

一个App完成入门篇(七)- 完成发现页面的相关文章

一个App完成入门篇(五)- 完成新闻页面

本节教程将介绍如何用DeviceOne简单而高效的完成一个新闻页面. 导入项目 数据模板分离MVVM模型 自定义事件 展示新闻 九宫格展示 将要学习的demo效果图如下所示 1. 导入完整项目 本节示例demo请参考下载地址,可以导入到设计器中学习. 为了方便大家理解页面结构,请参考下图图中红框所示的上面部分是SegmentView组件,和下面的BottomBar共同组成页面公共部分,而蓝框中是一个SlideView组件,可以左右滑动切换页面且跟SegmentView联动,页面个数则是取决于数据

一个App完成入门篇(三)-完善主框架

本节教程将继续带领大家完善教学demo 导入项目 完善主框架 完成viewShower子视图 打开新页 启动动画 将要学习的demo效果图如下所示 1. 如何导入完整项目 本节示例demo请参考下载地址,可以导入到设计器中学习. 2. 完善主框架在上一节教程搭建主框架中大家已经学会了如何主框架,本节教程使用上一节未完成的demo. 我们分析一下demo机构,通过点击Bottom Bar上的不同按钮来切换内容,这种情况下最适合用ViewShower这个组件,ViewShower是一个包含多个子VI

一个App完成入门篇-搭建主框架

通过第一课的学习,你已经掌握了如何通过debug调试器来跟PC上的设计器联调来实时查看UI设计效果.调试代码了,接下来通过一系列的demo开发教学你将很快上手学习到如何开发一个真正的App. 要开发App,最重要的就是确定主框架,好的主框架能起到减少工作量.简化代码的作用,而页面通常需要产品人员的UE设计和美工人员的UI设计,如下图所示,这两个步骤完成后才开始实现功能,由于篇幅限制,本教程不再赘述如何设计UI和UE,直接通过开发一个仿微信主页面的页面来做示范. 完整的demo请参考下载地址,可以

一个App完成入门篇-终结篇(八)- 应用收官

经过以上几步的学习,我们终于来到最后一个步骤了,应用APP也接近尾声. 通过之前的几节教程,不知道您对使用DeviceOne开发一个应用是不是已经得心应手了,本节教程将教会大家如何在开发完成之后通过DeviceOne平台将一个应用打成安装包,用于发布到各大应用平台. 加密及证书 图标及启动页 组件选择 打包 想要选择多平台.应用是横屏显示还是竖屏显示?添加更多组件.给应用添加证书.启动页等等这一系列的关于应用的配置都可以通过点击应用开发-应用配置来进行配置. 1. 加密及证书DeviceOne提

一个App完成入门篇(六)- 完成通讯录页面

第五章和第六章间隔时间有点长,对不起大家了.下面继续. 本节教程将要教会大家如何加载本地通讯录. 导入项目导入通讯录自定义js模块发送和订阅page消息将要学习的demo效果图如下所示 导入完整项目 本节示例demo请参考下载地址,可以导入到设计器中学习. 这节教程中将要用到的组件有do_Contect.do_IndexListView,请大家前几节教程所教授的方法,提前添加这两个组件,并打成相应调试包用于调试. 导入通讯录DeviceOne开发的do_Contact组件是针对手机本地通讯录的增

【SSRS】入门篇(七) -- 报表发布

完成[SSRS]入门篇(六) -- 分组和总计后,第一份简单的报表就已完成了,下面把报表发布到报表服务器上. (实际情况下,报表展示给用户未必是用报表服务器,而嵌入到原来的系统,如OA.CRM.ERP中,以链接形式打开.) 配置.启动报表服务: 1.打开Reporting Services 配置管理器: 2.服务器选择本机: 3.启动报表服务器: 4.设置Web服务URL,报表的URL地址是http://SOMEONE:80/ReportServer: (URL地址的格式是 http://你的电

lintcode入门篇七

211. 字符串置换 给定两个字符串,请设计一个方法来判定其中一个字符串是否为另一个字符串的置换. 置换的意思是,通过改变顺序可以使得两个字符串相等. 样例 Example 1: Input: "abcd", "bcad" Output: True Example 2: Input: "aac", "abc" Output: False class Solution: """ @param A:

c++入门篇七

拷贝构造函数的调用时机: class Person { public: //构造函数 Person() { //无参构造函数 } Person(int a) { //有参构造函数 cout << "有参构造函数" << endl; } Person(const Person &p) { //拷贝构造函数,前面必须加const,拷贝过来的不能再修改了,固定的,就是说你拷贝过来了张三,不能再修改成张四(p.name=""),只能是原版张三

Flutter入门篇(二)- 第一个APP

在上一篇文章中以简单的方式对Flutter自己提供的演示进行了一个简单的分析,当然那是远远不够.本来打算为大家带来官网上的无限下拉刷新的案例,但是发现这里的有些东西实在是太超前了,作为Flutter入门篇,当然不能这么随意,以为了让大家都能够学有所得,所以今天给大家带来了自己手撸的一个登录. 简单分析布局 我们都知道,一个简单的登录需要至少需要3步: 输入账号 输入密码 点击登录 那么我们的布局也就至少需要3个widget,为什么说至少呢?因为往往布局使用的widget都是大于操作步骤的.这里跟