小程序开发小结 - 走看看

将自己在小程序中遇到的一些问题和解决办法总结一下~

本地模拟数据

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']: '大地影院'
})