`
wjiaonianhua
  • 浏览: 23400 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

一个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来触发该事件,需要注意的是,事件的触发需在订阅之后。

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

分享到:
评论

相关推荐

    最新版uni-app从入门到进阶系统完成项目实战(附电子书)

    ### uni-app从入门到进阶系统完成项目实战 #### 一、Uni-app简介与环境搭建 **1.1 Uni-app概述** Uni-app是一款基于Vue.js的前端开发框架,支持一次编写,多端部署,能够帮助开发者快速构建原生App、H5网页、小...

    MIT App Inventor 计算器

    本篇文章将详细解析如何使用MIT App Inventor构建一个具备混合计算与普通计算功能的计算器应用。 首先,让我们理解MIT App Inventor的工作原理。它采用积木块编程方式,用户可以通过拖拽和拼接不同功能的积木块来...

    iOS测试入门篇(珍藏版).pdf

    ### iOS测试入门篇知识点概述 #### 一、签名与证书 **知识点1:签名与证书的概念** - **定义**:签名与证书是iOS应用程序开发过程中不可或缺的部分,它们用于确保应用程序的安全性和完整性。 - **作用**:签名用于...

    中文版IOS APP开发教程发布.pdf

    教程的每个页面都链接到一篇或多篇有关该主题的简短文章,为您提供了详细的学习资源。完成了教程,您将具备了进一步了解各个主题的能力,并且掌握到着手开发 iOS APP 应用的知识、工具和技能。 在开发 iOS APP 应用...

    Python-&-DJango入门教程原创.docx

    这篇文档将带你逐步走进Python和Django的世界,从环境搭建到实际应用的创建和操作,为你提供一个全面的入门教程。 首先,我们从环境搭建开始。Python是Django的基础,因此在开始学习Django之前,必须先安装Python。...

    AngularJS实用基础知识_入门必备篇(推荐)

    如果ng-model绑定到一个没有ng-controller作用域包含的变量,则它会绑定到$rootScope上,$rootScope是所有作用域的根,它可以被整个AngularJS应用访问。 AngularJS采用的MVC架构是其重要组成部分,MVC指的是模型...

    express.js 3入门实例

    本篇文章将详细介绍如何通过 Express.js 3 创建一个简单的 "Hello, World!" 应用,并解释相关知识点。 首先,确保已安装 Node.js。Node.js 是一个 JavaScript 运行环境,它允许我们在服务器端使用 JavaScript 编程...

    ionic2入门学习PPT

    Ionic2是一个强大的开源UI框架,用于构建高性能的混合移动应用程序。它基于AngularJS,并且利用了Cordova/PhoneGap来包装Web应用程序为原生应用。 #### Ionic2环境配置 1. **Sass安装** - **步骤1**: 安装Ruby,...

    python 零基础学习篇-19flask搭建search engine(上).zip

    在这个零基础的学习篇中,我们将逐步学习如何从头开始搭建一个搜索引擎,以便用户可以搜索特定的信息。 首先,我们需要了解Python的基础知识。Python是一种高级编程语言,以其简洁明了的语法和丰富的库而受到欢迎。...

    VUE组件入门

    组件允许开发者将页面分解成独立的、可复用的部分,每个部分都可以被视为一个单独的“组件”。 - **作用**:组件可以扩展HTML元素的功能,封装可重用的代码块。通过组件,开发者能够更容易地管理复杂的UI结构,提高...

    appinventor学习案例Android软件在线编程借鉴.pdf

    在当今的数字时代,软件编程已经成为了一项必备技能,而Google的App Inventor则为初学者提供了一个友好的入门平台。这款基于积木式模块化编程的工具,极大地降低了编程的门槛,使得即使是没有任何编程基础的人也能...

    Flask入门系列教程(一).pdf

    【Flask入门系列教程(一)】这篇教程主要介绍了如何开始学习和使用Flask,一个基于Python的轻量级Web应用框架。在开始学习Flask之前,你需要掌握Python和HTML的基础知识,对于JavaScript也有一定的了解,因为它们是...

    Xamarin Android Single View App入门

    在本篇内容中,我们将深入探讨如何利用Xamarin来创建一个基础的Android单视图应用程序。 ### 1. 安装与设置 首先,你需要安装Visual Studio 2017或2013,这两个版本都支持Xamarin的集成开发环境(IDE)。确保安装...

    NetBeans IDE 5.5 快速入门指南

    在向导的“名称和位置”页面,输入项目名称“Hello World App”,并指定主类名为“helloworldapp.HelloWorldApp”,保持“设置为主项目”复选框被选中,然后点击“完成”。 IDE会自动生成项目的结构,包括“项目”...

    Power BI Embedded入门.docx

    【Power BI Embedded 入门详解】 Power BI Embedded 是微软提供的一种服务,允许开发者将 Power BI 报表和仪表板无缝地嵌入到自己的应用程序中,为用户提供数据分析和可视化功能,无需离开应用程序界面。本篇文章将...

Global site tag (gtag.js) - Google Analytics