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


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 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
JavaScript 继承的实现
Jul 09 Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
js获取html的span标签的值方法(超简单)
Jul 26 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
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
PHP nl2br函数 将换行字符转成 <br>
2009/08/21 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
应聘收银员个人的求职信
2013/11/30 职场文书
汽车维修专业个人求职信范文
2014/01/01 职场文书
聚美优品的广告词
2014/03/14 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
销售口号大全
2014/06/11 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
2014乡党委副书记党建工作汇报材料
2014/11/02 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
西安事变观后感
2015/06/12 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
logback 实现给变量指定默认值
2021/08/30 Java/Android
Python装饰器的练习题
2021/11/23 Python
深入理解go缓存库freecache的使用
2022/02/15 Golang
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript