微信小程序入门案例

1、打开小程序开发软件后，展示的是自己的微信头像和昵称

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

2、index.js负责动作的支持，

<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>在点击图片后，会触发这个js

//事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../list2/list2'
    })
  },

注意：bindtap="bindViewTap"及index.js中的bingViewTap函数

还要注意，这个是wx.navigateTo，wx.navigateTo和wx.redirectTo的区别前一篇文章提到过

3、然后跳转到一个简单的查询页面

<view class="container">
  <form bindsubmit="formSubmit" bindreset="formReset">
    <view class="row1">
    <text>请输入要查询的内容<text>
   <input type="text" name="sname" placeholder="请输入要查询的内容" value="{{sname}}"/> 
    </view>
       <button type="primary" form-type="submit" >提交</button>
       <button type="primary" form-type="reset">清空</button>
  </form>
</view>

bindsubmit="formSubmit"这个是重点，它会到js中寻找对应的方法 

formSubmit: function (e) {


    var that = this;//讲表单存储到当前的这个that
    var that = this;//将表单存储到当前的这个that
    var formData = e.detail.value;
    var formData2;
    formData2 = JSON.stringify(formData);
    var formData3 = JSON.parse(formData2);
    console.log(formData3['sname']);
    wx.redirectTo({
      url: '../operation2/operation2?sname=' + formData3['sname']
    })

  }

4、到operation2.html时应该是展示，所以，通过operation2.js去查询和返回到operation2.html

/**
   * 页面的初始数据
   */
  data: {
    sname: '',
    queryUrl: "http://127.0.0.1:8089/Student2/weChat/listnongyao5?fieldValue=",
    list: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    var that = this;
    console.log("1234" + options.sname);
    var url = that.data.queryUrl + options.sname;
    wx.request({
      //url: "http://127.0.0.1:8089/Student2/weChat/liststudent",
      url: url,

      method: "GET",

      header: { 'content-type': 'application/json' },

      data: {},
      success: function (res) {
        var list = res.data.list2;
        console.log(url);
        // console.log("12344" + list);
        //var list=10;
        if (list == null) {
          var toastText = '获取数据失败~~';
          wx.showToast({
            title: toastText,
            icon: '',
            duration: 2000
          });
        } else {
          var toastText = '成功获取数据';
          wx.showToast({
            title: toastText,
            icon: '',
            duration: 2000
          });
          that.setData({
            list: list
          });
        }

      }
})
},

其中返回的这个数据，var list = res.data.list2;的list2,就是在后台通过

java.util.Map<String, Object> modelMap = new HashMap<String, Object>();

modelMap.put("list2", list6);

return modelMap;

加入，然后返回到微信小程序前端