我的远程实习笔记day9---表白墙（详情页轮播图和上传用户）-CSDN博客

本文链接：https://blog.csdn.net/wendyzhouwendy/article/details/129455636

今天是在第二大学远程实习的第九天，偷偷发个博客记录一下自己的成长哈哈（今天学习表白墙项目）
wxml：

<!-- 轮播图 其中autoplay是自动播放 indicator-dots用于显示底部的指示点 circular用于将最后一张轮播图和第一张轮播图联系起来,更多属性请参考: https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html-->
  <swiper style="height: 500rpx;" wx:if="{{tupian1!=''}}" autoplay indicator-dots circular>
    <swiper-item>
      <image src="https://xx.uom.cn/new/img/wx7c24e1e2e2875b2e/{{tupian1}}" mode="aspectFit"></image>
    </swiper-item>
    <swiper-item wx:if="{{tupian2!=''}}">
      <image src="https://xx.uom.cn/new/img/wx7c24e1e2e2875b2e/{{tupian2}}" mode="aspectFit"></image>
    </swiper-item>
    <swiper-item wx:if="{{tupian3!=''}}">
      <image src="https://xx.uom.cn/new/img/wx7c24e1e2e2875b2e/{{tupian3}}" mode="aspectFit"></image>
    </swiper-item>
  </swiper>
  <!--上传用户-->
  <text class="ShangchuanYonghu">上传用户：{{username}}</text>

wxss：

/*轮播图*/
swiper{
  /*border: 1rpx solid pink;*/
}
.ShangchuanYonghu{
  font-size: 32rpx;
  color: rgb(192, 192, 192);
}
/* 正文 */
.Zhengwen{
  font-size: 30rpx;
  line-height: 60rpx;
  letter-spacing: 10rpx;
  display: flex;
  flex-wrap: wrap;
}

    // 获取小程序appid
  HuoquXiaochengxuAppId(){
    var that=this;
    var xcx_appid=this.data.xcx_appid;
    const accountInfo = wx.getAccountInfoSync();
          console.log("小程序id",accountInfo.miniProgram.appId); //小程序id
        that.setData({
        xcx_appid:accountInfo.miniProgram.appId,
        });
        xcx_appid=accountInfo.miniProgram.appId,
        console.log(xcx_appid);
    },
    //打开时加载
    onLoad(options) {
      this.HuoquXiaochengxuAppId();
      var id=this.data.neirongid;
        var xcx_appid=this.data.xcx_appid;
        var that=this;//将this赋给that,仿制this出现改变影像数据的展示
        id = options.id
        this.data.neirongid=id
      console.log("打印id",id)
      
      wx.request({
        url: 'https://xx.uom.cn/ecmsapi/index.php?mod=xiaxing&act=daohanglanxiajixinxixiangqing',
              //   上方为服务器的接口地址，比如网购后需要你的地址才能把货物送到你家
        data:{
            id:id,//传给服务器从表白墙的列表页传过来的id
            lanmu:"信息问答"
        },
        method:"POST",//传输数据的方式为POST
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success:(res)=>{
          console.log("信息",res);
          that.setData({
            // 可以通过拼音识别数据是什么,下列接收到的数据分别为id:地址\标题:标题\jiage:价格\cehngse:成色\neirong:内容\lianxi:联系方式\tupian1~3:图片一到图片三\kong:表示图片是空的时候图片的地址,格式是"https://xx.uom.cn/new/img/"+"小程序appid"+"/undefined"
            id:res.data.id,
            biaoti:res.data.list[0].title,
            neirong:res.data.list[0].neirong,
            tupian1:res.data.list[0].tupian1,
            tupian2:res.data.list[0].tupian2,
            tupian3:res.data.list[0].tupian3,
          })
  
        }
      })
      //获取评论信息
      wx.request({
        url: 'https://xx.uom.cn/ecmsapi/index.php?mod=xinxi&act=pinglunzhanshi',//服务器接口
        method:"POST",
        data:{
          neirongid:id//告诉服务器是哪一个页面
        },        
        method:"POST",
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success:(res)=>{
          console.log(id);
          console.log("评论信息",res);
          that.setData({
            pinglun:res.data.list//返回的评论信息发送到wxml页面
          })
        }
      })
  
  },