微信小程序-懂你找图

最新推荐文章于 2024-04-02 15:47:26 发布

vesna_

最新推荐文章于 2024-04-02 15:47:26 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/lpp3221975785/article/details/122415808

本文档详细介绍了微信小程序的开发过程，包括首页推荐组件、月份模块、热门数据分页、分类页面及详情页的实现。重点讲解了如何从服务器获取数据、渲染页面、使用flex布局以及实现滚动分页功能。同时，讨论了优化数据请求的方法和事件触发机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.GitHub链接：https://github.com/laipingping/dnzt.git

2. 接口文档的说明

https://www.showdoc.com.cn/1162316710355752?page_id=5897019224037833

服务器地址：

http://118.190.104.39:3000

3. 首页模块的推荐组件

3.1 实现精选大图

1. 新建推荐组件`recommend`,并在home引入 `recommend.json`

home.json

 {
   "usingComponents": {
     "smallTilte":"/components/smallTilte/smallTilte",
     "recommend":"/components/recommend/recommend"
   }
 }

home.wxml

 <view wx:if="{
  
  {titleIndex === 0}}">
   <recommend></recommend>
 </view>

2. 需要在组件创建完毕之后才开始向后台需要数据

lifetimes: {
    attached: function() {
      // 在组件创建完毕开始请求数据
    }
  },

3. 向服务器索要数据，拿到数据后将数据设置到data中的数组中

data: {
    coverImgList:[]
  }  

lifetimes: {
    attached: function() {
      // 在组件创建完毕开始请求数据
        wx.request({
        // url 服务器的地址
        url: 'http://118.190.104.39:3000/home/cover',
        success: (res) => {
          // console.log(res);
          this.setData({
              //将获取到的服务器数据设置到组件公共数据里
             cover : res.data.data
           })
        }
      });
    }
  },

4. data中数组有值了, 就可以直接在标签中循环数组,将页面渲染出来

    <view class="flex">
        <image wx:for="{
  
  {coverImgList}}" wx:key="_id" 
        src="{
  
  {'http://118.190.104.39:3000/' + item.thumb}}" 
        class="flex-img"
        mode="aspectFill"
        ></image>
    </view>

5. 在组件的wxcss里修改页面样式

.flex{
  display: flex;
  flex-wrap: wrap;
}
.flex-img{
  width: 50vw;
  border: 3px solid white;
  box-sizing: border-box;
  height: 100px;
}

6. 用到的技术

(1) 微信小程序获取服务器数据 wx.request

(2)把数据设置到data中 this.setData({属性名:属性值})

(3)模板语法 wx:for

(4)样式部分

flex布局

全局样式文件 app.wxss ---- box-sizing: border-box

在小程序样式中 , 不能使用 * 通配符

图片标签 image 样式的设置 mode 渲染模式

解决图片标签 image 默认3px的上下间隙，通过转换成块级元素

(5)使用es6 新语法里的箭头函数来解决this指向性问题

思考：一个页面可能会发送多次数据请求，都写在生命周期函数里会冗余，可编辑性不高；

解决：把发送数据的方法定义到methods对象里，在生命周期函数里调用方法；

/**
   * 组件的方法列表
   */
  methods: {
    getCover() {
      wx.request({
        url: 'http://118.190.104.39:3000/home/cover',
   &nbs