微信小程序怎么运维小项目

这篇文章主要介绍了微信小程序怎么运维小项目的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序怎么运维小项目文章都会有所收获,下面我们一起来看看吧。

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

微信小程序怎么运维小项目  微信小程序 第1张

实现分析

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

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

实现方法

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

微信小程序怎么运维小项目  微信小程序 第2张

我们先看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。

代码如下:

微信小程序怎么运维小项目  微信小程序 第3张

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

微信小程序怎么运维小项目  微信小程序 第4张

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

微信小程序怎么运维小项目  微信小程序 第5张

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

微信小程序怎么运维小项目  微信小程序 第6张

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

微信小程序怎么运维小项目  微信小程序 第7张

关于“微信小程序怎么运维小项目”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“微信小程序怎么运维小项目”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注蜗牛博客行业资讯频道。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:niceseo99@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

评论

有免费节点资源,我们会通知你!加入纸飞机订阅群

×
天气预报查看日历分享网页手机扫码留言评论电报频道链接