小程序開發小結

將本身在小程序中遇到的一些問題和解決辦法總結一下~

本地模擬數據

data.js

// 本地模擬數據
const userInfo =
{
  "nickName": "yeo",
  "publish": 11,
  "fans": 8,
  "follow": 10
}

// 定義數據出口
module.exports = {
  userInfo: userInfo
}

在開發頁面中使用數據源

//引入本地json數據，這裏引入的就是第一步定義的json數據
const userInfo = require('../../data/userInfo.js');
...
this.setData({ userInfo: userInfo.userInfo });

循環列表點擊添加樣式

...
  <view class="comment-container" wx:for="{{comment.comment}}" wx:key="{{index}}">
    <view class="comment-part">
      <view class="comment-left">
        <image src="{{item.avatarUrl}}"></image>
      </view>
      <view class="comment-right">
        <text class="font-blod author">{{item.author}}</text>
        <text class="comment-des">{{item.detail}}</text>
      </view>
      <view class="heart" bindtap="like" data-index="{{index}}">
        <text class="iconfont icon-shoucang {{item.isSelected ? 'active' :''}}"></text>
      </view>
    </view>
    <view class="time">
      <text>{{item.time}}</text>
      <text wx:if="{{item.likes >0}}" class="likes">{{item.likes}}次贊</text>
    </view>
  </view>
 ...
 like(e) {
    let index = e.currentTarget.dataset.index;
    let arr = this.data.comment.comment;

    if (arr[index].isSelected) {
      arr[index].isSelected = false;
    } else {
      arr[index].isSelected = true;
    }
    this.setData({
      [`comment.comment[${index}].isSelected`]: arr[index].isSelected
    })
  }

setData設置數組對象的某個屬性值

假設一個對象數組:

comment:[
    {'aaa':'111'
    'isSelected':false
        
    },
    {'aaa':'222'
    'isSelected':false
        
    }]

想要設置comment的isSelected屬性,

this.setData({
    comment[index].isSelected: true//index爲下標（代碼表示場景）
});
//由於index爲變量，且存在[],因此咱們能夠用拼接字符串的方式
that.setData({
    [bingo]:1
})
//可是每次都要定義變量看起來就躁
//因此能夠這樣
that.setData({
    [`comment[${index}].isSelected`]:true //模板字符串裏面用${}計算屬性
});

...

//data格式
data: {
   addressData:{
     name:'',
     tel:'',
     address:'',
     more:''
   },
   defult:''
},

//setData的使用方法
that.setData({
  ['addressData.address']: '大地影院'
})