微信小程序原来如此简单

        微信目前的用户非常多，很多人都会将自己的日常精彩瞬间分享到微信朋友圈。微信中有一个微信小程序，可以直接进行订阅使用，而无需安装。因此，有些轻应用，可以通过微信小程序实现，这样有利于服务快速推广和实施。

       首先需要安装微信小程序的开发工具，地址为：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 。下载后进行安装即可。然后可以用此工具创建一个新的小程序项目。对于正式的项目，需要先注册一个小程序开发者账号。但对于体验开发来说，可以利用官方提供的测试号即可。虽然测试号有些功能受限，但对于基本的开发是够用的。

       小程序开发工具界面如下：

   注意：如果需要使用WebUI组件或第三方组件，则需要通过NPM进行依赖库安装。因此需要安装Node.js相关库。

   下面给出一个前后台交互的示例，用来说明微信小程序是如何进行数据绑定和请求的。这个示例虽然简单，但是足可以说明微信小程序开发的基本过程。其他的情况，用户需要根据实际业务情况进行开发。其中的 app.json 数据如下：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/web/webview"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "孔智安全管理",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

 其中的pages里面定义了所有的页面路径，window里面定义了导航标题，样式，颜色等。微信小程序和Web开发类似，有UI的定义，其扩展名为*.wxml 。下面给出index.wxml页面内容：

<!--index.wxml-->
<view class="container">
  <view class="page-section">
    <view class="weui-cells__title">用户名</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" type="number" placeholder="demo" bindinput="bindUser" />
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">密码</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" password type="text" placeholder="" bindinput="bindPwd"/>
      </view>
    </view>
    <button type="primary" bindtap="bindLoginTap">登录</button>
  </view>

<view wx:for="{{retLists}}" wx:for-index='xh' wx:for-item='item' wx:key='xh'>
  <view class="maxbox"  bindtap="imgchange"  id="{{xh}}">
    <text class="nums">{{item.uname}}</text>
    <text class="nums">{{item.age}}</text>
  </view>
</view>

<view class="page">
    <mp-tabbar style="position:fixed;bottom:0;width:100%;left:0;right:0;" list="{{list}}" bindchange="tabChange"></mp-tabbar>
</view>
</view>

这里需要注意的就是，这个UI的标签和HTML页面的标签不同，需要按照小程序官方的文档进行编写。其中的{{变量名}}可以绑定JS相关的变量数据。另外，前端UI的输入文本框绑定数据是通过实现的bindinput="bindUser" ,其中的bindUser在JS文件中定义。而登录按钮的点击事件是通过bindtap="bindLoginTap"实现的。wx:for 是一个可迭代循环的内置属性，这样可以在UI上显示多行数据。这个和JS的模板引擎很类似。Style样式由.wxss 文件定义，示例如下：

/**index.wxss**/
.container {
  height: 100%;
  width: 100%;
  display: flex;
}

index.json配置了页面的相关配置，这里引入了外部组件（注意独立安装）：

{
  "usingComponents": {
    "mp-dialog": "weui-miniprogram/dialog/dialog",
    "mp-tabbar": "weui-miniprogram/tabbar/tabbar"
  }
}

而实现UI和数据绑定的，以及定义事件等，是在index.js文件中定义的，示例如下：

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    userName: '',
    userPwd: "",
    retLists: [],
    list: [{
        "text": "对话",
        "iconPath": "/images/chat.png",
        "selectedIconPath": "/images/chat.png",
        dot: true
      },
      {
        "text": "设置",
        "iconPath": "/images/chat.png",
        "selectedIconPath": "/images/chat.png",
        badge: '7'
      }
    ]
  },
  tabChange(e) {
    console.log('tab change', e)
  },

  bindUser(e) {
    console.log(e.detail)
    this.setData({
      userName: e.detail.value
    });
  },
  bindPwd(e) {
    console.log(e.detail)
    this.setData({
      userPwd: e.detail.value
    });
  },
  // 事件处理函数
  bindLoginTap() {
    var that = this;
    if (!!this.data.userName && !!this.data.userPwd) {
      wx.request({
        url: 'http://localhost:8080/api/login',
        method: "POST",
        data: {
          uname: this.data.userName,
          upwd: this.data.userPwd
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success(res) {
          console.log(res.data)
          if (res.data.ok == 1) {
            that.setData({
              retLists: res.data.data
            });
            /*
            wx.navigateTo({
              url: '../web/webview'
            });
            */
          } else {
            wx.showToast({
              title: '登录失败',
              duration: 2000,
              mask: true,
              icon: 'loading',
              success: function () {},
              fail: function () {},
              complete: function () {}
            });
          }
        },
        fail(res) {
          console.log(res.data)
        },

      })


    } else {


      wx.showModal({
        title: '提示信息',
        content: '用户名或密码错误',
        showCancel: false,
        cancelText: "取消",
        confirmText: "确定",
        success: function (res) {
          if (res.cancel) {
            //点击取消
          } else {

          }
        },
        fail: function (res) {},
        complete: function (res) {},
      });

    }

  },
  onLoad() {

  }
})

其中将前端UI的数据绑定到JS定义的data属性中，并通过wx.request向后台API发送请求，并响应后进行处理。下面给出Spring Boot框架实现的后台登录API处理程序，具体示例如下：

package com.example.demo.controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;

@RestController
@RequestMapping("/api")
public class APIController {
    //GET : 'content-type': 'application/json'
    //POST : 'content-type': 'application/x-www-form-urlencoded'
    @RequestMapping("/login")
    public String Login(@RequestParam("uname") String username, @RequestParam("upwd") String password) {

        ReqResult reqResult = new ReqResult();

        List<Student> list = new ArrayList<>();
        list.add(new Student("Jack", "c001", 21));
        list.add(new Student("JackSmith", "c002", 27));

        if ("admin".equals(username) && "12345".equals(password)){
            reqResult.setOk(1);
            reqResult.setData(list);
            return reqResult.toString();
        }else {
            reqResult.setOk(0);
            reqResult.setMsg("失败");
            return reqResult.toString();
        }
    }
}

这里有两个实体类的定义，下面给出ReqResult代码如下：

package com.example.demo.controller;

import com.alibaba.fastjson.JSON;

public class ReqResult {
    private int Ok = 1 ;
    private String Msg = "成功" ;
    private Object Data = "" ;

    public int getOk() {
        return Ok;
    }

    public void setOk(int ok) {
        Ok = ok;
    }

    public String getMsg() {
        return Msg;
    }

    public void setMsg(String msg) {
        Msg = msg;
    }

    public Object getData() {
        return Data;
    }

    public void setData(Object data) {
        Data = data;
    }

    @Override
    public String toString() {
        return JSON.toJSONString(this);
    }
}

在开发者工具中进行调试运行，输入用户名和密码，单击登录按钮，如果正确的话，会从后台获取数据并绑定到UI上，示意图如下：

至此，一个微信小程序实现的登录前后台业务场景就完成了，虽然简单，但是基本涵盖了开发的方方面面。实际项目中，更多的是对UI进行美化，以及用户数据的校验和逻辑处理。

注意：微信小程序发布需要HTTPS协议的后天API服务，但是调试的时候，可以关闭此验证。这样更容易进行本地的代码调试和开发。