今天完成的事情：

修改微信小程序Bug

自测文章后台模块
明天计划的事情：

在检查后台文章模块
遇到的问题：

无
收获：

setData

通过setData方法来进行掉头success返回的参数数据.

注意问题：

getData(){

success:function (res) {
      url: this.api + '/article/all',
      if(res.data.code == 200){
       
        this.setData({
         list: res.data.data.list
       })
      }
    } 
    //简写
      success(res){} 等于success:function (res){}

如果你用this.setData()方法this 的指向不是指向getData跟函数而是指向 success(res)函数.

ES6的写法

getData(){
    wx.request({
      url: this.api + '/article/all',
      success:(res) => {
      if(res.data.code == 200){
        console.log("成功2")
        this.setData({
         list: res.data.data.list
       })
      }
        console.log(res)
      }  
    }); 
  },

success:()=>{},通过箭头指向来代替function写法。这样this指向就是根函数.

注意：

setData({

里面只能传递对象

}) .

注意：

由于微信小程序是没有双向数据绑定的，所以在要更改值都要用setData({})里面进行更改才能渲染到数据上面去

data: {
    wantImg: "./img/点赞.png",
  },
   this.setData({
        wantImg: "./img/图层1.png",
      });

HTML页面渲染数据图片就会进行更改，凡是在JS里面更改原来变量都要在this.serData()进行更改否则是无效的，同时变量要在data｛｝对象里面创建。

事件的使用

什么是事件，事件就是通过你的鼠标点击 键盘 或者鼠滑动过去来触发里面的

bindtap

bindtap事件，当用户点击会在页面处理相应的函数，就是点击事件。

代码

 <image bindtap="likeName" class="like_image" src="./img/图层1.png">点击</image>

 likeName(e){
     //点赞和收藏
    console.log(e);
    console.log("成功");
  }

就调用这个名字likeName函数,然后在里面写方法判断来实现你想要的功能.

逻辑判断

例题
文档
<view wx:if="{{length > 5}}"> </view>
<view>
<checkbox checked="{{num3>=30}}"></checkbox>
</view>
JS
data: {
       num3:30,
  },

进行判断我通过单选框来做实验，也就是说当我的num3变量大于等于30那就是为真那么渲染出来效果就是复选框打勾，当然如果是其他判断的要加wx:if在里面写判断也可以在逻辑业务JS里面写都行。

注意：

这里有个小坑，我们发现我的变量值是2 也就是说Num3变量其实是不满足大于等于30那么也就是fales 不应该打勾，可如果你不小心在大括号和引号之间有空格那么就会变成字符串也就是你那里面不在是判断语句而是字符串了

数据绑定

代码:

Page({

  /**
   * 页面的初始数据
   */
  data: {
     msg:'肥皂你好',
  },

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

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

这一块现在只用到初始化，就是当页面刷新会直接把里面的变量运行在列表里面进行展示。

注意：微信小程序里面页面展示都是通过{{变量}}双大括号和angular一样。这是微信制定的标准.

注意:

<image bindtap="likeName" class="like_image" src="{{wantImg}}"></image>

data: {
    wantImg: "./img/点赞.png",
    
    
  },

如果你想要在thml解析wantImg的话，必须要把这个变量声明在data:｛｝

对象里面如果是在外面就会解析无效.

列表渲染

wx:for

和其他FOR循环一样都是遍历数组然后渲染到页面上的。

  <view wx:for="{{array}}">
  {{index}}: {{item}}
  </view>
JS
  data: {
    array:["肥皂","幽灵","小强","尤里"],

这里需要解释下，wx:for循环必须加双引号不然报错，而且它这循环的是 array数组名称，看样子不用加data，数组当前的索引变量名默认是index，而数组当前项目变量名默认为item.

对象

<view wx:for="{{japan}}" wx:key="{{item}}">
    {{index}}: {{item}}
  </view>

 japan:{
      a:18,
      b:"肥皂"
    },

 对象也是和上面数组写法一样照样都循环出来.

wx:for-item与wx:for-index

这种写法可以指定当前数组的变量名称如

注意：index不管是在微信小程序里面还是JS里面代表都是索引，主要是表示数组里面的从0到后面的数组有多少个。一般都是先从0开始.

  <view wx:for="{{usa}}" wx:key="{{item}}" wx:for-item="ccc" wx:for-index="bbb">
    <view>{{bbb}}:{{ccc.a}}</view>
    <view>{{bbb}}:{{ccc.b}}</view>
  </view>
 

在用for循环的时候不会跟angular一会把默认名称给你写出来。

在微信里面当你循环对象里面的值，需要item属性默认的是替换你的对象名称然后呢后面跟你对象里面的变量名称.

可以更改默认当前数组的变量名称.

block wx:for

这个标签就是相当于没有容器盒子了如果里面有view标签那么它和肥皂那个标签属于同级了.

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>