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

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中添加主要代码

<view>
  <button bindtap='bindtest'>test</button>
</view>

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

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

bindtest: function(){
    var that = this
    wx.request({
      url: 'http://localhost:8080/wxTestDemo01Server/Demo01',
      data:{
        username:'smile',
        password:'smile'
      },
      method:'GET',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success:function(res){
        console.log(res.data);
        that.setData({
          resultData:res.data
         });
        
      },
      fail:function(res){
        console.log(".....fail.....");
      }
    })
  }

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

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

data: {
    resultData: 'resultData'
  }

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

<view >
    <text >{{resultData}}</text>
  </view>

4、结果展示截图

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

点击test按钮后，微信小程序界面显示：

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

 

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