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


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 相关文章推荐
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
在chrome中window.onload事件的一些问题
Mar 01 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
javascript包装对象实例分析
Mar 27 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
Sep 30 Javascript
JS制作简易计算器的实例代码
Jul 04 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笔记之:AOP的应用
2013/04/24 PHP
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
php上传图片类及用法示例
2016/05/11 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
鼠标图片振动代码
2006/07/06 Javascript
区分JS中的undefined,null,"",0和false
2007/03/08 Javascript
ext读取两种结构的xml的代码
2008/11/05 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
js中运算符&& 和 || 的使用记录
2014/08/21 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
Python中unittest用法实例
2014/09/25 Python
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
python下如何查询CS反恐精英的服务器信息
2017/01/17 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
python实现AdaBoost算法的示例
2020/10/03 Python
竞选卫生委员演讲稿
2014/04/28 职场文书
文明城市标语
2014/06/16 职场文书
工作说明书格式
2014/07/29 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
超市工作总结范文2014
2014/12/19 职场文书
电力安全学习心得体会
2016/01/18 职场文书
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL