开发 | 只需 10 分钟,教你做一款查询类小程序

文 | 心智极客

本文从一个简单的手机归属地查询实现入手,来帮助你入门小程序开发。

基本功能如下:

  • 查询手机归属地
  • 根据历史记录查询
  • 手机位数校验

我们来看一下小程序的最终效果:

创建空白项目

按照以下步骤,在开发者工具中新建一个空白项目:

  • AppID 可选择无。
  • 取消选择选择创建 quick start 项目。在这里,我们创建空白项目,目的是加深对小程序结构的理解。

基本配置

首先,我们需要创建全局配置文件 app.json

在全局配置文件中,我们定义了一个页面。保存之后,将会自动生成 index 页面的基本目录。

现在,还缺少一个应用的入口文件,用来声明和注册小程序本体。

App() 方法用于描述小程序的全局逻辑,同时会声明和注册一个小程序实例。到这一步,小程序项目目录初始化工作就完成了。

页面配置

首先,我们来为页面添加顶部导航文字。打开 index 文件夹下的 index.json 文件,编写以下代码并保存:

查询逻辑编写

接下来是查询模块的编写。首先是视图层代码:

在这段代码中,我们实现了:

  • bindinput 用于绑定键盘输入事件。用户输入时,将会调用绑定的 bindPhoneInput 函数。
  • bindtap 用于绑定点击事件。用户点击按钮后,将会调用绑定的 queryPhoneInfo 函数。
  • 按钮是否可点击,取决于 disabled 的值。

接下来,是具体的功能实现。首先,我们把手机归属地查询的功能封装到全局业务文件 app.js,方便不同页面调用。

需要注意的是:

  • 小程序使用微信提供的 wx.request 接口来发送请求。
  • 该函数接受两个参数,一个是手机号,另外一个则是回调函数,用来处理查询的结果。

在页面里,实现刚才定义的两个事件:

几个需要注意的点:

  • data 用于管理该页面的数据。
  • this.setData() 方法用于设置 data 的属性。直接使用 this.data.phoneInfo 是无法改变页面状态的。
  • 在页面中调用 app.js 内的方法,需要先使用 getApp() 函数进行实例化,然后通过实例来访问方法。

查询结果显示

接下来在视图里面显示查询结果:

在这里,我们使用 wx:ifwx:else,来方便地根据查询结果来切换视图

最近搜索功能的实现

最后是最近功能记录的功能实现。首先是视图层的代码:

在这段代码中,我们实现了:

  • 遍历 historyList 数组。
  • 用户点击某一记录时候,触发 selectHistory 事件。
  • 将每条手机号保存到 data-number 中,selectHistory 就可以获取对应的手机号了。

接下来,是逻辑代码编写:

最后,我们只需要稍微美化下界面,小程序就完成了。

原文地址: http://www.jianshu.com/p/d062adec4f9c

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2017-07-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

成为 Linux 终端高手的七种武器

Linux 终端不仅是一个键入命令的地方。如若你能熟谙这些基础技巧,那么你会在绝大多数 Linux 发行版的默认使用的 Bash shell中游刃有余。 这是...

2898
来自专栏烂笔头

Linux笔记:使用Vim编辑器

目录[-] Vi编辑器是Unix系统上早先的编辑器,在GNU项目将Vi编辑器移植到开源世界时,他们决定对其作一些改进。 于它不再是以前Unix中的那...

3784
来自专栏超然的博客

URL中的#

作者:阮一峰   http://www.ruanyifeng.com/blog/2011/03/url_hash.html

1031
来自专栏守望轩

Visual Studio 2008 每日提示(十一)

#101、块缩进和智能缩进的差异 原文链接:what’s the difference between smart indenting and block i...

2953
来自专栏非著名程序员

Android的编译打包流程详解

阅读本文可以让获得如下知识:(1)Android编译打包流程。(2) Android是如何通过R文件引用到真正的资源文件?(3)打包流程中的的对齐是什么,为什么...

21010
来自专栏程序你好

如何用7个简单的步骤,在Firefox开发工具中调试JavaScript

本文将着重于在Firefox的开发工具中调试JavaScript代码。Firefox中的开发工具是一个非常强大的工具,可以加速您的bug查找和修复过程!

1166
来自专栏程序员互动联盟

【答疑释惑】Android多国语言实现原理

先来看一下网友的问题: ? 网友们问的问题是android中布局文件中android:text="hello_world"和 android:text="@s...

32110
来自专栏流媒体

gcc用法以及静态/动态链接

-E:只进行预处理,不编译 -S:只编译,不汇编 -c:只编译、汇编,不链接 -g:编译器在编译的时候产生调试信息。 -I:指定include包含文件的...

872
来自专栏西安-晁州

nodejs初印象

初学Nodejs,特意在此记录学习过程,算是对这段时间的一个summary吧,相互勉励,共同进步嘛,Now Begin: 1、什么是nodejs nodejs ...

2230
来自专栏c#开发者

Vs.net 2008 sp1新特性之Dynamic Data Web Site

Vs.net 2008 sp1新特性之Dynamic Data Web Site 介绍 asp.net的动态数据,是一个web site开发框架,可让您很容...

3435

扫码关注云+社区

领取腾讯云代金券