cover_image

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

tutorial微信小程序小程序开发前端开发开发教程手机号归属地查询
知晓程序

<p><img class="aligncenter size-full wp-image-872597" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/07/minapp-dev-final-feature.jpg" alt="" width="1200" height="750" srcset="http://www.ifanr.com/wp-content/uploads/2017/07/minapp-dev-final-feature.jpg 1200w, http://www.ifanr.com/wp-content/uploads/2017/07/minapp-dev-final-feature-360x225.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/07/minapp-dev-final-feature-768x480.jpg 768w, http://www.ifanr.com/wp-content/uploads/2017/07/minapp-dev-final-feature-1024x640.jpg 1024w" sizes="(max-width: 1200px) 100vw, 1200px" /></p> <p><span style="color: #808080;">文 | 心智极客</span></p> <p>本文从一个简单的手机归属地查询实现入手,来帮助你入门小程序开发。</p> <p>基本功能如下:</p> <ul> <li>查询手机归属地</li> <li>根据历史记录查询</li> <li>手机位数校验</li> </ul> <p>我们来看一下小程序的最终效果:</p> <p><img class="aligncenter size-full wp-image-875913" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/07/minapp-phone-query.jpg" alt="" width="1000" height="1000" srcset="http://www.ifanr.com/wp-content/uploads/2017/07/minapp-phone-query.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2017/07/minapp-phone-query-360x360.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/07/minapp-phone-query-768x768.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <h3><span style="color: #605eac;">创建空白项目</span></h3> <p>按照以下步骤,在开发者工具中新建一个空白项目:</p> <ul> <li>AppID 可选择无</li> <li><strong>取消选择选择创建 quick start 项目。</strong>在这里,我们创建空白项目,目的是加深对小程序结构的理解。</li> </ul> <h3><span style="color: #605eac;">基本配置</span></h3> <p>首先,我们需要创建全局配置文件 <code>app.json</code>。</p> <pre class="hljs json"><code class="json">// /app.json { <span class="hljs-attr">"pages"</span>:[ <span class="hljs-string">"pages/index/index"</span> ] }</code></pre> <p><strong>在全局配置文件中,我们定义了一个页面。</strong>保存之后,将会自动生成 index 页面的基本目录。</p> <pre class="hljs stylus"><code class="stylus">pages └── index ├── index<span class="hljs-selector-class">.js</span> <span class="hljs-comment">// 页面业务逻辑</span> ├── index<span class="hljs-selector-class">.json</span> <span class="hljs-comment">// 页面配置</span> ├── index<span class="hljs-selector-class">.wxml</span> <span class="hljs-comment">// 页面视图</span> └── index<span class="hljs-selector-class">.wxss</span> <span class="hljs-comment">// 页面样式</span></code></pre> <p>现在,还缺少一个应用的入口文件,用来声明和注册小程序本体。</p> <pre class="hljs stata"><code class="stata">// /<span class="hljs-keyword">app</span>.js <span class="hljs-keyword">App</span>({ })</code></pre> <p><code>App()</code> 方法用于描述小程序的全局逻辑,同时会声明和注册一个小程序实例。<strong>到这一步,小程序项目目录初始化工作就完成了。</strong></p> <h3><span style="color: #605eac;">页面配置</span></h3> <p>首先,我们来为页面添加顶部导航文字。打开 <code>index</code> 文件夹下的 <code>index.json</code> 文件,编写以下代码并保存:</p> <pre class="hljs json"><code class="json">// /pages/index/index.json { <span class="hljs-attr">"navigationBarTitleText"</span>: <span class="hljs-string">"手机归属地查询"</span> }</code></pre> <h3><span style="color: #605eac;">查询逻辑编写</span></h3> <p>接下来是查询模块的编写。首先是视图层代码:</p> <pre class="hljs django"><code class="django"><span class="xml">// /pages/index/index.wxml <span class="hljs-comment">&lt;!--查询--&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">text</span>&gt;</span>请输入查询内容<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"number"</span> <span class="hljs-attr">bindinput</span>=<span class="hljs-string">"bindPhoneInput"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ phoneNumber }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>/&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"queryPhoneInfo"</span> <span class="hljs-attr">disabled</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ disabled }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span>查询<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span></span></code></pre> <p>在这段代码中,我们实现了:</p> <ul> <li><code>bindinput</code> 用于绑定键盘输入事件。<strong>用户输入时,将会调用绑定的 <code>bindPhoneInput</code> 函数。</strong></li> <li><code>bindtap</code> 用于绑定点击事件。<strong>用户点击按钮后,将会调用绑定的 <code>queryPhoneInfo</code> 函数。</strong></li> <li>按钮是否可点击,取决于 <code>disabled</code> 的值。</li> </ul> <p>接下来,是具体的功能实现。首先,<strong>我们把手机归属地查询的功能封装到全局业务文件 <code>app.js</code> 中</strong>,方便不同页面调用。</p> <pre class="hljs xquery"><code class="xquery">// /app.js App({ /** * 获取手机归属地信息 */ getPhoneInfo(phoneNum, callback) { wx.request({ url: <span class="hljs-string">'https://www.iteblog.com/api/mobile.php?mobile='</span> + phoneNum, header: { <span class="hljs-string">'content-type'</span>: <span class="hljs-string">'application/json'</span> }, success: function (res) { callback(res.data); } }) } })</code></pre> <p>需要注意的是:</p> <ul> <li>小程序使用微信提供的 <code>wx.request</code> 接口来发送请求。</li> <li>该函数接受两个参数,一个是手机号,另外一个则是回调函数,用来处理查询的结果。</li> </ul> <p>在页面里,实现刚才定义的两个事件:</p> <pre class="hljs kotlin"><code class="kotlin">// /pages/index/index.js <span class="hljs-keyword">var</span> app = getApp(); Page({ <span class="hljs-comment">/** * 页面的初始数据 */</span> <span class="hljs-keyword">data</span>: { phoneNumber: <span class="hljs-literal">null</span>, <span class="hljs-comment">// 查找的手机号</span> phoneInfo: <span class="hljs-literal">null</span>, <span class="hljs-comment">// 查询结果</span> disabled: <span class="hljs-literal">true</span> <span class="hljs-comment">// 默认不可查询</span> }, <span class="hljs-comment">/** * 键盘输入手机号事件处理 */</span> bindPhoneInput(event){ <span class="hljs-keyword">this</span>.setData({ phoneNumber: event.detail.value, <span class="hljs-comment">// 将用户输入的手机号与页面变量进行绑定</span> phoneInfo: <span class="hljs-literal">null</span> <span class="hljs-comment">// 清空过往查询结果</span> }) <span class="hljs-keyword">this</span>.setDisabled(); }, <span class="hljs-comment">/** * 验证手机是否为 11 位 */</span> setDisabled() { <span class="hljs-keyword">this</span>.setData({ disabled: (<span class="hljs-keyword">this</span>.<span class="hljs-keyword">data</span>.phoneNumber &amp;&amp; <span class="hljs-keyword">this</span>.<span class="hljs-keyword">data</span>.phoneNumber.toString().length === <span class="hljs-number">11</span>) ? <span class="hljs-literal">false</span> : <span class="hljs-literal">true</span> }) }, <span class="hljs-comment">/** * 用户点击查询处理 */</span> queryPhoneInfo() { app.getPhoneInfo(<span class="hljs-keyword">this</span>.<span class="hljs-keyword">data</span>.phoneNumber, <span class="hljs-keyword">data</span> =&gt; <span class="hljs-keyword">this</span>.setData({ phoneInfo: <span class="hljs-keyword">data</span> })); } })</code></pre> <p>几个需要注意的点:</p> <ul> <li><code>data</code> 用于管理该页面的数据。</li> <li><code>this.setData()</code> 方法用于设置 data 的属性。<strong>直接使用 <code>this.data.phoneInfo</code> 是无法改变页面状态的。</strong></li> <li><strong>在页面中调用 <code>app.js</code> 内的方法,需要先使用 <code>getApp()</code> 函数进行实例化</strong>,然后通过实例来访问方法。</li> </ul> <h3><span style="color: #605eac;">查询结果显示</span></h3> <p>接下来在视图里面显示查询结果</p> <pre class="hljs django"><code class="django"><span class="xml">&lt;!-- /pages/index/index.wxml --&gt; <span class="hljs-comment">&lt;!--查询结果--&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">wx:if</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ phoneInfo }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">text</span>&gt;</span>查询结果为:<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span> <span class="hljs-comment">&lt;!--手机号存在--&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">text</span> <span class="hljs-attr">wx:if</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{phoneInfo.ret === 0}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span> </span><span class="hljs-template-variable">{{phoneInfo.operator}}</span><span class="hljs-template-variable">{{phoneInfo.province}}</span><span class="hljs-template-variable">{{phoneInfo.city}}</span><span class="xml"> <span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span> <span class="hljs-comment">&lt;!--手机号不存在--&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">text</span> <span class="hljs-attr">wx:else</span>&gt;</span> </span><span class="hljs-template-variable">{{phoneInfo.msg}}</span><span class="xml"> <span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span></span></code></pre> <p>在这里,<strong>我们使用 <code>wx:if</code> 与 <code>wx:else</code>,来方便地根据查询结果来切换视图</strong>。</p> <h3><span style="color: #605eac;">最近搜索功能的实现</span></h3> <p>最后是最近功能记录的功能实现。首先是视图层的代码:</p> <pre class="hljs django"><code class="django"><span class="xml"><span class="hljs-comment">&lt;!-- 最近搜索 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">text</span>&gt;</span>最近搜索<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">wx:for</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ historyList }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"selectHistory"</span> <span class="hljs-attr">data-number</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{item}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span> </span><span class="hljs-template-variable">{{item}}</span><span class="xml"> <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span></span></code></pre> <p>在这段代码中,我们实现了:</p> <ul> <li>遍历 <code>historyList</code> 数组</li> <li>用户点击某一记录时候,触发 <code>selectHistory</code> 事件</li> <li>将每条手机号保存到 <code>data-number</code> 中,<code>selectHistory</code> 就可以获取对应的手机号了</li> </ul> <p>接下来,是逻辑代码编写:</p> <pre class="hljs kotlin"><code class="kotlin"><span class="hljs-comment">// pages/index/index.js</span> <span class="hljs-comment">/** * 将搜索记录添加到缓存 */</span> addQueryHistory(phoneNumber) { <span class="hljs-keyword">var</span> historyList = wx.getStorageSync(<span class="hljs-string">'historyList'</span>) || []; <span class="hljs-keyword">if</span> (historyList.indexOf(phoneNumber) === <span class="hljs-number">-1</span>) { historyList.unshift(phoneNumber); wx.setStorageSync(<span class="hljs-string">'historyList'</span>, historyList); } <span class="hljs-keyword">this</span>.setData({ historyList: historyList }) }, <span class="hljs-comment">/** * 页面加载后,从缓存中读取最近搜索列表 */</span> onLoad: function () { <span class="hljs-keyword">this</span>.setData({ historyList: wx.getStorageSync(<span class="hljs-string">'historyList'</span>) || [] }) }, <span class="hljs-comment">/** * 用户点击记录之后,将其添加到输入框中 */</span> selectHistory(event) { <span class="hljs-keyword">this</span>.setData({ phoneNumber: event.currentTarget.dataset.number, disabled: <span class="hljs-literal">false</span> }) }</code></pre> <p>最后,我们只需要稍微美化下界面,小程序就完成了。</p> <p><span style="color: #808080; font-size: 14px;">原文地址:<span style="color: #605eac;">http://www.jianshu.com/p/d062adec4f9c</span></span></p> <p><strong>关注「<span style="color: #605eac;">知晓程序</span>」公众号,在微信后台回复「<span style="color: #605eac;">源码</span>」,获取这个小程序的项目源代码。</strong></p> <p><img class="alignnone size-full wp-image-784874" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/02/zxcx_0208.png" alt="zxcx_0208" width="1000" height="926" srcset="http://www.ifanr.com/wp-content/uploads/2017/02/zxcx_0208.png 1000w, http://www.ifanr.com/wp-content/uploads/2017/02/zxcx_0208-360x333.png 360w, http://www.ifanr.com/wp-content/uploads/2017/02/zxcx_0208-768x711.png 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p>