作为一个小白，最近有兴趣试了试小程序开发，发现小程序里面写js和写网页的JavaScript还是有些不同的。
emmm，赋值真的有些坑。
首先是赋值后，如果要渲染到前端，一定要用that.setData({ }),否则改了也是木有用滴。
然后就是对数组的赋值，直接在setData里面是不可以给数组元素动态赋值的，那么怎么解决嘞。来个代码看看。
js 关注点在n[],p[](命名不规范~~~ 懒得改了）
// pages/friend/friend.js
var app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
'inform':'一对一学车”，享受VIP教学！',
flag: 'true',
imgUrls: [],
circleid:5,
content:'',
openid:'',
stus:[],
all:[],
stu:[],
comment:[],
textdata:'',
p:[],
n:[],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
wx.getStorage({
key: 'userInfo',
success: function (res) {
console.log("cheng");
that.setData({
userInfo: res.data
})
},
});
wx.getStorage({
key: 'openid',
success: function (res) {
console.log(res)
console.log(res.data)
that.setData({
openid: res.data
})
},
});
var array = new Array()
for (let i = 1; i < 4; i++) {
let url = "" + i + ".png"
wx.downloadFile({
url: url,
success: (res) => {
let temp = res.tempFilePath
array[i - 1] = temp
that.setData({
imgUrls: array
})
}
})
}
/* wx.request({
url: '',
method: 'POST',
header: { "Content-Type": 'application/json' },
success: function (res) {
that.setData({
all: res.data.circleall,
})
console.log(that.data.all.length)
for (var i = 0; i < that.data.all.length; i++) {
that.data.stu[i] = that.data.all[i];
console.log(that.data.stu[i].circleid)
wx.request({
url: '',
header: { "Content-Type": "application/x-www-form-urlencoded" },
method: 'POST',
data: {
openid: that.data.all[i].openid
},
success: function (res) {
let p = that.data.p;
let n = that.data.n;
p.push(res.data.userbyid.avatarUrl)
n.push(res.data.userbyid.nickName)
that.setData({
p,
n
})
console.log(that.data.p)
}
})
}
// console.log(that.data.p)
that.setData({
stus: that.data.stu
})
},
})*/
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
var that = this
wx.request({
url: '',
method: 'POST',
header: { "Content-Type": 'application/json' },
success: function (res) {
that.setData({
all: res.data.circleall,
})
console.log(that.data.all.length)
that.setData({
p:[],
n:[]
})
for (var i = 0; i < that.data.all.length; i++) {
that.data.stu[i] = that.data.all[i];
console.log(that.data.stu[i].openid)
wx.request({
url: '',
header: { "Content-Type": "application/x-www-form-urlencoded" },
method: 'POST',
data: {
openid: that.data.all[i].openid
},
success: function (res) {
let p = that.data.p;
let n = that.data.n;
p.push(res.data.userbyid.avatarUrl)
n.push(res.data.userbyid.nickName)
that.setData({
p,
n
})
console.log(that.data.p)
}
})
}
console.log(that.data.p)
that.setData({
stus: that.data.stu
})
},
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
likereact: function (e) {
var that=this;
console.log('try')
console.log(e.target.dataset.id)
var id = e.target.dataset.id-1
console.log(that.data.stus[id].like)
that.data.stus[id].like = that.data.stus[id].like ? 0 : 1;
var l = "stus[" +id + "].like";
that.setData({
[l]: that.data.stus[id].like
})
},
/*
控制评论区
*/
show: function () {
this.setData({ flag: false })
},
showad: function () {
wx.showToast({
title: '广告位招标！',
})
},
to_message:function(){
wx.navigateTo({
url: '../friend/my_message',
})
},
liuyan:function(e){
var that = this;
that.setData({
content:e.detail.value,
circleid:e.target.id
})
console.log(that.data.circleid)
var t
that.setData({
t: that.data.content,
textdata: ' '
})
that.data.comment[that.data.circleid] = that.data.t
wx.request({
url: '',
method: 'POST',
header: { "Content-Type": 'application/json' },
success: function () {
that.setData({
circleid: that.data.circleid,
openid: that.data.openid,
comment: that.data.comment,
})
console.log("成功！")
},
})
},
ly_btn:function(){
var that=this
var t
that.setData({
t:that.data.content,
textdata:' '
})
that.data.comment[that.data.circleid]=that.data.t
wx.request({
url: 'https://www.lieyanwenhua.com/circominsert',
method: 'POST',
header: { "Content-Type": 'application/json' },
success: function () {
that.setData({
circleid: that.data.circleid,
openid: that.data.openid,
comment: that.data.comment,
})
console.log("成功！")
},
})
wx.showToast({
title: '留言成功',
})
}
})wxml 这里的关注点在<说说>那块啦
<!--pages/friend/friend.wxml-->
<!--<view class='news'>
<image class='n_pic' src='../image/news.png'></image>
<textarea class='new' disabled='true'>{{inform}}</textarea>
</view>-->
<view class='page'>
<view class='ad'>
<view class='container'>
<!--上方轮播图片广告宣传-->
<view class='swiper_adv'>
<swiper indicator-dots='true' autoplay='true' interval='3000' duration='1000' circular='true' >
<block wx:for="{{imgUrls}}">
<swiper-item>
<image class='swiper_img' style='width:100%;height:280rpx;' src="{{item}}" bindtap='showad' mode="aspectFit" >
</image>
</swiper-item>
</block>
</swiper>
</view>
</view>
</view>
<!--说说-->
<view class='stu_all' >
<view class='stu_word'>
<view wx:for="{{stus}}" >
<view class='stu_item' data-id="{{item.circleid}}">
<view class='card'>
<!--这是主要的文字层-->
<view class='pic_intro'>
<image class='stu_pic' src="{{p[item.circleid-1]}}" ></image>
<text class='stu_name' >{{n[item.circleid-1]}}</text>
</view>
<view class='stu_photoa' wx:if="{{item.image1!=null |item.image2!=null|item.image2!=null}}" >
<image class='stu_photo' src="{{item.image1}}"></image>
<image class='stu_photo' src="{{item.image2}}"></image>
<image class='stu_photo' src="{{item.image3}}"></image>
</view>
<view class='stu_word_txt'wx:if="{{item.mess!=0}}">
<text class='stu_txt'>{{item.mess}}</text>
</view>
<view class='time'>
<text class='stu_time'>{{item.time}}</text>
</view>
<!--这是主要的icon层-->
<view class='like_unlike_comment'>
<image data-id="{{item.circleid}}" class='stu_like' src="{{item.like?'../image/like1.png' : '../image/like0.png'}}" bindtap='likereact' ></image>
</view>
<view class='comment' wx:if="{{comment[item.circleid]!=null}}">
<text>{{comment[item.circleid]}}</text>
</view>
<view>
<textarea class='liuyan' type="text" name="liuyantext" placeholder='留个言吧~' bindblur='liuyan' id="{{item.circleid}}" value='{{textdata}}'></textarea>
</view>
</view>
</view>
</view>
</view>
<!--隐藏的评论按钮-->
<view class='stu_button'>
<image class='stu_btn' src='../image/leavemessage.png' bindtap='to_message'></image>
</view>
</view>
</view>微信小程序数组赋值