周报 第三期
2019-08-03 本文已影响0人
水水壶
这周主要还是写的微信电影小程序,上周是跟着视频用云函数写的小程序,这周是用nodejs 写的服务端 用 wx.request
发送请求写的小程序并增加了评论展示区域,不过页面有点丑😖。
一、服务端、客户端
1.
之前才写的服务端,但是我发现还是要多写写,很多问题都是在写的时候出现的
写服务端就是写接口,我们要提供一个网址给客户端。
网址就是:ip地址+端口+接口
客户端请求的网址
其中 localhost代表是本机ip地址,3000是端口,comments就是客户端向服务端请求的接口
2. 客户端怎么发送请求 服务端怎么接受请求
客户端发送请求 :
- 要知道请求地址(就是服务端需要提供的网址) 也就是 url
- 要知道请求方式,在小程序中默认是 get 请求
- 要知道请求带不带参数
getComments: function () {
var that = this
wx.request({
url: 'http://localhost:3000/comments',
data: {
movieId: that.data.movieid, // movieId 就是携带的参数是需要发送到服务端
},
success(res) {
console.log(res.data.data)
res.data.data = res.data.data.map(item => {
item.img = item.img.split(',');
return item
})
that.setData({
commentList: res.data.data,
})
}
})
},
服务端处理请求 :
app.get('/comments', async function (req, res) {
const { movieId } = req.query
const sql = 'select * from comment where movieId = ?'
const result = await dbexec(sql,[movieId])
res.json(result)
});
二、 自定义属性
在 wxml 页面自定义 属性 data-movieid= "{{ item.id }}"
,在 js 中用 event.target.dataset.movieid
获取页面自定义的属性的值
<view class='movie' wx:for="{{movieList}}" wx:key="{{index}}">
<image class="movie-img" src="{{item.images.small}}"></image>
<view class="movie-info">
<view class="movie-title">{{ item.title }}</view>
<view> 观众评分:
<text class="movie-scope"> {{item.rating.average}}分</text>
</view>
<view> 主演:
<text wx:for="{{item.casts}}" wx:key="{{index}}"> {{item.name}}</text>
</view>
<view>年份:{{ item.year }}</view>
</view>
<button bindtap="gotoComment" data-movieid= "{{ item.id }}" class="movie-comment">评价</button>
// item.id 就是 movieList 里的每一项的 id
</view>
js
gotoComment: function (event){
event.target.dataset.movieid // 用 event.target.dataset.movieid 获取 wxml 传过来的电影的 id
wx.navigateTo({
url: `../comment/comment?movieid=${event.target.dataset.movieid}`
});
},
三、
wx:for
嵌套wx:for
循环,要给每项的 item
设置一个 变量wx:for-item="img"
<block wx:for="{{commentList}}" wx:for-item="comment" wx:key="{{index}}">
<block wx:for="{{comment.img}}" wx:for-item="img" wx:key="{{index}}">
<image class="useruploadpic" src="{{img }}"></image>
</block>
<view>评价内容: {{comment.comment}}</view>
<van-rate value="{{ comment.score }}" bind:change="onScore" />
<view>时间:{{comment.create_date}}</view>
</block>
四、
-
怎么把数组中的每一项中一个属性的值变成数组
image.png
res.data.data = res.data.data.map(item => {
item.img = item.img.split(',');
return item
})
- 把字符串解析成 json 对象
JSON.parse()
五、 报错信息
报错: VM232:1 Failed to load font https://img.yzcdn.cn/vant/vant-icon-c2acf5.woff2 net::ERR_CACHE_MISS
解决方案 在 wxml 添加以下代码
<view class="icon van-icon van-icon van-icon-upgrade van-icon-upgrade" style="font-size: 32rpx;"></view>