微信小程序实战之运维小项目


Posted in Javascript onJanuary 17, 2017

前言

自从微信推出小程序以来,现在业界炒的非常的火,具说叫微信小程序是因为某公司不让叫应用号,我在朋友圈也看过pony的和张小龙朋友圈关于名字的讨论截图,不知道是真是假,反正名字是定了,叫啥无所谓,还是知道它是干啥的比较重要, 像网上说什么新风口了,原生APP以后没活路了等相关文章喜欢的可以多看看, 我们今天不会在产品层面上去介绍小程序,因为我们是搞运维的,所以我还是在运维层面怎么使用小程序。

今天我们用实际例子来讲解和普及小小程序如何使用,来实现类似IP138的功能,输入IP可以查看IP的详细信息,包括归属,地点等。

我们先看下完成后的效果:

微信小程序实战之运维小项目

实现分析

基本功能就是做一个IP查询的页面,输入ip,能够查询IP的详细信息,后台调用的淘宝的IP库,OK,界面和功能就是这样了,比较简单,接下来我们来介绍小程序的基本概念和使用。

第一步,先下载微信小程序开发者工具,这个是必须的,因为只能在这个工具里去调试你的代码,但写代码不一定要在这个工具里去写,在Sublime 里写也可以,但调试你必须在这工具里,关于怎么下怎么装这我就不多说了,如果这步都没搞定我觉得往下看也没啥意义了,当然是开个玩笑,如果有问题的,可以给我留言。

实现方法

安装后,第一次运行需要用微信扫描,来识别开发者,然后添加项目,微信开发者工具可以帮你生成一个简单的demo项目,生成项目后如图:

微信小程序实战之运维小项目

我们先看app.js、app.json、app.wxss 这三个,其中

app.js 是小程序的脚本代码,可以定义全局变量, 指定小程序的生命周期函数(onLaunch,onShow,onHide,其它),

app.json文件是配置文件,主要配置小程序的页面,所有的页面设置都要写在这个文件里

app.wxss 是公共样式表文件。

除了这些文件,我们还有两个目录,这2个目录展示的是index 页面和 logs 页面,每个目录下如果完整的情况下都会有4个文件:

如上图所示,现在每个目录下分别是index.js、index.wxml、index.wxss,其中.js 后缀的文件是脚本文件,.json 后缀的文件是配置文件(非必须),.wxss 后缀的是样式表文件(非必须),.wxml 后缀的文件是页面结构文件。

以上就是小程序的基本概念了,了解了这些,就可以开始我们的小项目开发了。

首先我们先写index.wxml。

代码如下:

微信小程序实战之运维小项目

因为界面我加了一部分样式,所以要写index.wxss样式文件,代码如下:

微信小程序实战之运维小项目

有了这些只是个壳子,输入IP点击查询时没有效果的, 因为我们还需要从后台获取数据,现在开始写我们的index.js文件,因为js文件内容比较多,我们分开介绍,先说下下初始化部分,

微信小程序实战之运维小项目

刚开始都是空,然后是我们的核心函数,先判断IP是否为空,如果是就提示IP不能为空,如果有IP,就调用wx.request发请求,将获得的数据然后通过setData来赋值,如网络有问题,就报网络请求失败,代码如下:

微信小程序实战之运维小项目

最后,查询完后需要重新输入,当用户点重置时清空所有的内容,包括刚获取的值,代码如下:

微信小程序实战之运维小项目

完成以上代码就可以在开发者工具里调试下了,如果都正常,这个小项目就算完成了,等微信开发公测的时候就可以传到微信小程序市场里,然后每个人就可以下载去使用了。

关于小程序的内容我就介绍到这里,我这里就算是抛砖引玉了,喜欢的小伙伴可以帮忙转发下,让更多的小伙伴可以学习到新的知识,另外因为小程序是非常新的东西,想更深入了解的可以去看小程序的官方文档。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
js 连接数据库如何操作数据库中的数据
Nov 23 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 Javascript
vue首次渲染全过程
Apr 21 Vue.js
vue双向数据绑定原理探究(附demo)
Jan 17 #Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 #Javascript
浅析vue数据绑定
Jan 17 #Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 #Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 #Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 #Javascript
详谈JavaScript的闭包及应用
Jan 17 #Javascript
You might like
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
php中spl_autoload详解
2014/10/17 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
zend framework重定向方法小结
2016/05/28 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
python 文件转成16进制数组的实例
2018/07/09 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
python db类用法说明
2020/07/07 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
印度民族服装购物网站:BIBA
2019/08/05 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
教师绩效考核方案
2014/01/21 职场文书
超市开学活动方案
2014/03/01 职场文书
班级口号大全
2014/06/09 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
小学生校园广播稿
2014/09/28 职场文书
2015年班级元旦晚会活动总结
2014/11/28 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
党员倡议书
2015/01/19 职场文书
解决Navicat for MySQL 连接 MySQL 报2005错误的问题
2021/05/29 MySQL