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

前言

自从微信推出小程序以来，现在业界炒的非常的火，具说叫微信小程序是因为某公司不让叫应用号，我在朋友圈也看过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来赋值，如网络有问题，就报网络请求失败，代码如下：

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

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

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

总结

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

赞 (0)

相关推荐

  • 微信小程序（应用号）简单实例应用及实例详解

    微信小程序（应用号）简单实例应用及实例详解

    Demo 预览 演示视频(流量预警 2.64MB) GitHub Repo 地址 仓库地址:https://github.com/zce/weapp-demo 使用步骤 将仓库克隆到本地: bash $ git clone https://github.com/zce/weapp-demo.git weapp-douban --depth 1 $ cd weapp-douban 打开微信Web开放者工具(注意:必须是0.9.092300版本) 必须是0.9.092300版本,之前的版本不能保证正

  • 微信小程序 参数传递详解

    微信小程序 参数传递详解

    微信小程序的推出,无疑将会在移动互联网行业里再次掀起风浪. 有人会质疑小程序会不会火, 会不会火我不知道, 看微信的用户量即可明白一切. 微信小程序-参数传递 这里我找到两种小程序上的参数传递方式,为了方便,我单独拿出来和大家分享下. 一.通过事件进行参数传递 先来看眼小程序对事件的定义: #什么是事件? 这里是列表文本事件是视图层到逻辑层的通讯方式. 这里是列表文本事件可以将用户的行为反馈到逻辑层进行处理. 这里是列表文本事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数

  • 微信小程序 for 循环详解

    微信小程序 for 循环详解

    1,wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件.默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 事例如下: wxml文件: <view wx:for="{{items}}"> {{index}}: {{item:one}} </view> js文件: Page({ items:[{ one: "test1", },{ one: "test2&qu

  • 微信小程序 数据访问实例详解

    微信小程序 数据访问实例详解

    先简单说一下,小程序的结构 如图所示 1.每个视图(.wxml)只需要添加对应名字的脚本(.js)和样式(.wxss)就可以了,不需要引用,page下面的脚本以及样式都是继承至最外面的app.js , app.wxcss 2.脚本也就是.js文件,他有固定格式:page,是用于获取数据的 3.utils是用来放置数据接口的 数据访问,如果懂点ajax,都不是问题,没啥好讲的 微信小程序,因为IDE太烂了,如果代码再写得难以阅读,整个项目就很难维护了. 因为没有写过app,不知道在app中数据访问

  • 微信小程序 (十七)input 组件详细介绍

    微信小程序 (十七)input 组件详细介绍

    input输入框使用的频率也是比较高的...样式的话自己外面包裹个view自己定义.input属性也不是很多,有需要自己慢慢测,尝试 主要属性: wxml <!--style的优先级比class高会覆盖和class相同属性--> <view class="inputView" style="margin-top: 40% "> <input class="input" type="number"

  • 微信小程序 wx:key详细介绍

    微信小程序 wx:key 在自己学习的时候不是多明白到底是怎么回事,经过上网查阅资料,整理下: 个人感觉官方给出的例 子不是很明确,官方解释如下: wx:key 如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容,<switch/> 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符. wx:key 的值以两种形式提供 字符串,代表在 for 循环的 array 中 item 的某

  • 微信小程序 实现列表刷新的实例详解

    微信小程序 实现列表刷新的实例详解

    微信小程序 列表刷新: 微信小程序,最近自己学习微信小程序的知识,就想实现现在APP 那种列表刷新,下拉刷新,上拉加载等功能. 先开看一下界面 1.wx.request (获取远程服务器的数据,可以理解成$.ajax) 2. scroll-view的两个事件 2.1 bindscrolltolower(滑到页面底部时) 2.2 bindscroll (页面滑动时) 2.3 bindscrolltoupper (滑倒页面顶部时) 然后我们看代码,详细描述. index.js var url = "

  • 微信小程序 实战小程序实例

    微信小程序 实战小程序实例

    微信小程序基本组件和API已撸完,总归要回到正题的,花了大半天时间做了个精简版的百思不得姐,包括段子,图片,音频,视频,四个模块.这篇就带着大家简述下这个小的APP,源码会放到GitHub上欢迎start. 项目中我能学到什么? tabbar使用方式 网络调用真实接口 loading使用 scroll-view实现下拉刷新上拉加载 image组件对图片的处理, 音乐和视频组件的使用 跳转传值使用 等等等.... app.json全局配置文件 { "pages":[ "page

  • 微信小程序 WXML、WXSS 和JS介绍及详解

    前几天折腾了下.然后列出一些实验结果,供大家参考. 0. 使用开发工具模拟的和真机差异还是比较大的.也建议大家还是真机调试比较靠谱. 1. WXML(HTML) 1.1 小程序的WXML没有HTML的宽容度​那么高,单标签必需是 /> 结尾的.不然会报错. 1.2 ​官方推荐使用的基础标签<view>是块标签,给了<text>作为文本标签,但是使用其他标签比如div也是可以使用的,并且都是inline标签.并且wxml的parser会把标签上的不在白名单上的属性都去掉,cla

  • 微信小程序 获取微信OpenId详解及实例代码

    微信小程序 获取微信OpenId详解及实例代码

    获取微信OpenId 先获取code 再通过code获取authtoken,从authtoken中取出openid给前台 微信端一定不要忘记设定网页账号中的授权回调页面域名 流程图如下 主要代码 页面js代码 /* 写cookie */ function setCookie(name, value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); doc

随机推荐