微信小程序与JAVA后台进行交互

系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
养成笔记记录好习惯

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

最近学习微信小程序开发，先简单记录一下开发第一个demo的总结

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、开发者工具

前台： 微信开发者工具
下载地址 ：https://developers.weixin.qq.com/doc/   -> 选择小程序 -> 工具进行下载
后台 ： idea 

二、准备

1.注册开发者账号获取APPID

注册页面：
https://mp.weixin.qq.com/wxopen/waregister?action=step1

注意 ： 由于是个人学习开发所以在主体类型选择个人，其他的选项需要注册商家资质等等！！！

2.登录

打开编译器会弹出二维码进行登录就行

三、开摆

由于本人学习比较废物，先看的视频如何前后台发送请求

1、新建文件夹 helloword

新建的文件夹里面是没有文件的，还需要创建page文件

文件创建完毕！！！

代码编写

1、
helloword.wxml 我的理解就是 写入HTML页面 但是注意语法和H5的写法有差异
helloword.wxss 我的理解就是 写入css
helloword.json 此文件暂时还没有用到还不太清楚后续修改！
helloword.js 就是 JavaScript
2.
helloword.wxml 代码展示

<!--pages/list/list.wxml-->
<text>后端返回信息:{{result}}</text>

helloword.wxss 暂未添加
helloword.json 暂未使用

helloword.js 代码展示

先定义个变量好接收后台返回

/**
   * 页面的初始数据
   */
  data: {
    result:'请求后台中。。。。。'
  },

一个简单的页面显示

3.注入神秘力量

helloword.js

下面展示一些 内联代码片。

// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    result:'请求后台中。。。。。'
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    var that=this;
    this.getdate(that);
  },
  /**
   * 封装后台请求方法
   */
  getdate(that){
    wx.request({
     url: 'http://localhost:7114/sydw/interface/HELLOWORD', // 修改后的URL地址
     method : 'GET',
     success: function(res) {
       console.log(res.data);
       console.log(that);
       that.setData({
        result:res.data
        })
     }
   })
   },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

（1）wx.request 就是微信文档中网络访问的方法！！
（2）success 就是微信框架集成的回调函数！！！
（3）that.setData({
result:res.data
}) 一定要注意 我做开始是 this.result = res.data 这个是错误的！

返回页面

总结

提示：这里对文章进行总结：

终于走出第一步了~~

视频参考连接

https://www.bilibili.com/video/BV1r64y1v7Kj/?spm_id_from=333.337.search-card.all.click&vd_source=85d6331d5787f97393a210c994de060c

P49 P50