微信小程序向服务器发送请求及页面渲染（data的设置）

参考官方文档

文档地址： 微信官方文档
https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

实现功能

1，向服务发送请求；
2，数据返回后的数据处理

新建页面

1.在pages目录下建立一个目录（例如：page）；
2.在page中创建4个文件分别是page.js、page.json、page.wxml和page.wxss；

编辑page.wxml

<!--page.wxml-->

<view wx:for="{{arrays}}">
 密码 : {{item.password}}
</view>

以上是page.wxml的全部代码，重点在page.js中

编辑page.js

//logs.js
const util = require('../../utils/util.js')

Page({
  data: {
    arrays: [] // 用于数组赋值
  },
  onLoad: function() {
    var that = this;
    wx.request({
      url: 'http://www.oa.com/index/login/test',// 我自己测试时用的接口地址
      method: 'post',// 请求方式
      data: { // 想接口提交的数据
        page: 1,
        pageSize: 2
      },
      header: {
        'content-type': 'application/json'// 提交的数据类型
      },
      success(res) {  // 成功回调
        console.log(res.data.result);
        that.setData({
          arrays: res.data.result,
        })
      },
      fail() { // 失败回调
        console.log('error');
      }

    })
  }
})

接口返回的数据结构

{
    "json_code": 0,
    "reason": "获取成功",
    "result": [
        {
            "id": 1,
            "name": "0",
            "password": "cfcd208495d565ef66e7dff9f98764da"
        },
        {
            "id": 2,
            "name": "1",
            "password": "c4ca4238a0b923820dcc509a6f75849b"
        }
    ]
}

小程序打印截图

小程序效果截图

闲扯淡

第一次发