这周主要还是写的微信电影小程序，上周是跟着视频用云函数写的小程序，这周是用nodejs 写的服务端 用 wx.request 发送请求写的小程序并增加了评论展示区域，不过页面有点丑😖。

image.png

一、服务端、客户端

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>