本站消息

站长简介


前每日优鲜python全栈开发工程师,自媒体达人,逗比程序猿,钱少话少特宅,我的公众号:想吃麻辣香锅

  python大神匠心打造,零基础python开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长



+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2020-06(12)

2020-07(30)

2020-08(30)

2020-09(66)

2020-10(79)

【IT之路】微信小程序之初探

发布于2021-05-09 09:30     阅读(278)     评论(0)     点赞(11)     收藏(1)


0

1

2

3

4

5

6

7



python+selenium自动化我比较喜欢,但是今天先不谈这个。因为昨天晚上碰巧初次接触了一下微信小程序开发,有点感想,先记录一下。

我发觉写笔记是一个很不错的习惯,希望朋友们也能喜欢写笔记。因为笔记是一个心路历程,也是一种能力提升,更是时光的留影。等我们以后都变成了老头,老婆子后,会发现年轻也有奋斗的一面,不是得过且过。

废话了一堆,我们回归正题:我们的微信小程序.....

微信小程序体现在一个小字,不像app那么臃肿。微信小程序说实在我还真比较喜欢。主要原因:为我们手机减负。程序在云端,本地不用再安装一堆APP,我们能体会到手机的喜悦之心:“终于可以减肥了,手机的青春来了”。

下面我们来说下简单的微信小程序开发。

一、结构组成

微信小程序开发分为两部分:前端开发和后端开发。其实有点废话,做过web开发的都知道这个。

前端:微信小程序,简单一点类似于浏览器。

后端:实现业务的核心功能。这里可以采用不同的实现技术。如,java语言实现的,php语言实现的,python语言实现的等。

前端架构:我这里直接上个截图(来源官方文档),一步了然

 

二、实现原理

类似浏览器:

1、浏览器发起请求

2、服务端接收请求并解释

3、返回给浏览器

4、浏览器解释并呈现

微信小程序:

1、发起请求。会js的朋友发现,是不是很像ajax啊,呵呵呵。。。。

2、服务端接收并解析

3、返回数据,如Json结构数据,xml结构数据等

4、通过绑定方式显示到微信小程序上

 

三、微信小程序主体文件介绍

app.js文件:app.js 调用 App 方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等,全局唯一的 App 实例

app.json 文件:小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

app.wxss文件:WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

 

四、微信小程序页面介绍

前面介绍了微信小程序的主体。是不是这就完了?不是的,这正是微信小程序的一个基本框架,微信小程序想要体现价值,首先一步还要表现出来才行。这不页面就出场了。

每个页面都被定义为一个完整的模块,都统一了完整的风格。

js文件:实现业务逻辑

wxml文件:实现页面布局

json文件:实现业务数据配置

wxss文件:实现页面美化

五、微信小程序的开发

前面做了一堆介绍铺路,最终来到了我们主要目的点。

下面我们来点简单的微信小程序开发:实现与后台交互

  • 微信小程序开发环境搭建:后续章节再详细介绍
  • 微信小程序前端开发:今天先体验一下
  • 微信小程序后端开发:后续章节详细介绍

 

今天我们主要任务式体验下,熟悉下相关的文件

1、在主页增加一个按钮。这里直接上代码

在index页面模块的index.wxml中添加主要代码

  1. <view>
  2. <button bindtap='bindtest'>test</button>
  3. </view>

2、实现与后台通讯。这里直接上代码

在index页面模块的index.js中添加主要代码

  1. bindtest: function(){
  2. var that = this
  3. wx.request({
  4. url: 'http://localhost:8080/wxTestDemo01Server/Demo01',
  5. data:{
  6. username:'smile',
  7. password:'smile'
  8. },
  9. method:'GET',
  10. header: {
  11. 'content-type': 'application/json' // 默认值
  12. },
  13. success:function(res){
  14. console.log(res.data);
  15. that.setData({
  16. resultData:res.data
  17. });
  18. },
  19. fail:function(res){
  20. console.log(".....fail.....");
  21. }
  22. })
  23. }

3、接收后台数据并展示。这里直接上代码

在index页面模块的index.js中添加主要代码

  1. data: {
  2. resultData: 'resultData'
  3. }

在index页面模块的index.wxml中添加主要代码

  1. <view >
  2. <text >{{resultData}}</text>
  3. </view>

4、结果展示截图

点击test按钮前微信小程序显示界面:

点击test按钮后,微信小程序界面显示:

点击test按钮后,后端日志显示

 

点击test按钮后,微信小程序日志显示:这里用到了真机调试

原文链接:https://blog.csdn.net/mwb2001/article/details/116399697




0

1

2

3

4

5

6



所属网站分类: 技术文章 > 博客

作者:dfd323

链接:https://www.pythonheidong.com/blog/article/965056/9ade001e15228b790c17/

来源:python黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

11 0
收藏该文
已收藏

评论内容:(最多支持255个字符)