最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】小程序中如何提取公共部分内容为可复用的组件

程序 crifan 297浏览 0评论
折腾:
【记录】小程序实现绘本查询的详情页
期间,在小程序中,已经实现了详情页的基本字段信息显示。
对于想要继续去实现类似的web页面中的推荐列表:
感觉应该不用完全重新画一个,因为之前小程序的主页的搜索结果列表,已经是完全一样的效果了:
所以感觉应该:
把共用的内部,包括html和css部分,都提取出来,供别的地方多次调用才对。
模块化 · 小程序
只支持js
好像是这个:
组件模板和样式 · 小程序
小程序 提取公共部分
小程序 公共 组件
小程序–引用公共模板方法/共同header/footer – 司马懿是一朵小花 – 博客园
微信小程序公共组件的引用与控制 – Dreawer微信小程序联盟 – CSDN博客
自定义组件 · 小程序
“从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。
开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。”
很明显就是我所想要的:
模块化编程
期间去:
【记录】用微信开发者工具打开小程序官网的示例代码
然后先去:
【已解决】小程序中实现最基本的自定义组件功能
然后还需要去解决:
【已解决】小程序的自定义组件中如何传递比如列表之类复杂的数据类型
不过很明显,有些字段并没有显示出来,那是因为传入的数据,还需要一定的处理,所以接着去:
【已解决】小程序自定义组件中如何对于传入参数做一些初始化和处理
然后再去:
【已解决】小程序自定义组件中如何得知传入参数的数据发生变化
然后再去把book_list也被index主页中调用。
【总结】
最后终于实现了复杂的book_list的可复用的组件:
components/book_list/book_list.js
// components/book_list/book_list.js
const app = getApp() //获取应用实例
const util = require('../../utils/util.js')
const book_common = require('../../utils/book_common.js')

Component({
  lifetimes: {
    created: function () {
      // 在组件实例进入页面节点树时执行
      console.log("component book_list created")
    },
    attached: function () {
      // 在组件实例进入页面节点树时执行
      console.log("component book_list attached")
    },
    ready: function () {
      // 在组件实例进入页面节点树时执行
      console.log("component book_list ready")
    },
    moved: function () {
      // 在组件实例进入页面节点树时执行
      console.log("component book_list moved")
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
      console.log("component book_list detached")
    },
  },

  pageLifetimes: {
    show: function () {
      // 在组件实例进入页面节点树时执行
      console.log("component book_list show")
    },
  },

  /**
   * 组件的属性列表
   */
  properties: {
    curBookList: {
      type: Array,
      value: [],
      observer: function (newBookList, oldBookList, changedPath) {
        console.log("curBookList observer: newBookList=%o, oldBookList=%o, changedPath=%o",
          newBookList, oldBookList, changedPath)

          if(newBookList){
            var processedList = this.processBookList(newBookList)
            console.log("processedList=%o", processedList)
            this.setData({
              processedBookList: processedList
            })
          }
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    processedBookList: []
  },

  /**
   * 组件的方法列表
   */
  methods: {

    // process book item to add extra field for show
    processBookList: function (originBookList) {
      console.log("processBookList: originBookList=%o", originBookList)
      var processedBookList = []
      for (var curBookDict of originBookList) {
        console.log("curBookDict=%o", curBookDict)

        var coverImgUrl = curBookDict["coverImgUrl"]
        console.log("coverImgUrl=", coverImgUrl)
        if (!coverImgUrl) {
          coverImgUrl = app.globalData.DefaultValue.CoverImg
          console.log("default coverImgUrl=", coverImgUrl)
        }
        curBookDict["coverImgUrl"] = coverImgUrl

        var title = curBookDict["title"]
        console.log("title=", title)
        title = book_common.processEmptyDefault(title)
        console.log("title=", title)
        curBookDict["title"] = title

        var authorsStr = book_common.listToStr(curBookDict["author"]["bookAuthors"])
        console.log("authorsStr=", authorsStr)
        authorsStr = book_common.processEmptyDefault(authorsStr)
        curBookDict["authorsStr"] = authorsStr

        var lexileStr = curBookDict["grading"]["lexile"]
        console.log("lexileStr=", lexileStr)
        lexileStr = book_common.processEmptyDefault(lexileStr)
        curBookDict["lexileStr"] = lexileStr

        var ageStr = curBookDict["grading"]["age"]
        console.log("ageStr=", ageStr)
        if (ageStr) {
          ageStr += "岁"
        }
        ageStr = book_common.processEmptyDefault(ageStr)
        curBookDict["ageStr"] = ageStr

        processedBookList.push(curBookDict)
      }

      return processedBookList
    },

    bookItemClickCallback: function(e){
      console.log("bookItemClickCallback: e=%o", e)
      var curBookId = e.currentTarget.id // 5bd7bf97bfaa44fe2c7415d9
      console.log("curBookId=%s", curBookId)
  
      // var difficulty = e.currentTarget.dataset.difficulty
      // // var difficulty = e.currentTarget.dataset["difficulty"]
      // console.log("difficulty=%s", difficulty)
  
      var queryParaDict = {
        "book_id": curBookId,
        // "cur_input": this.data.curInputValue
      }
      var encodedQueryStr = util.encodeQueryDict(queryParaDict)
      console.log("queryParaDict=%o -> encodedQueryStr=%s", encodedQueryStr)
  
      var detailUrl = '../detail/detail'
      detailUrl += "?" + encodedQueryStr
      console.log("detailUrl=%s", detailUrl)
  
      //redirect to detail page
      wx.navigateTo({
        url: detailUrl,
      })
    },

  },

})
components/book_list/book_list.json
{
  "component": true,
  "usingComponents": {}
}
components/book_list/book_list.wxml
<!--components/book_list/book_list.wxml-->

  <view class='book_list'>
    <view
      id="{{curBookItem.id}}"
      wx:for="{{processedBookList}}"
      wx:for-index="bookIdx"
      wx:for-item="curBookItem"
      wx:key="id"

      class='book_list_item'
      bindtap='bookItemClickCallback'
    >
      <view class='book_item_logo'>
        <image
          class='book_item_logo_img'
          src="{{curBookItem.coverImgUrl}}"
        />
      </view>

      <view class='book_list_item_attributes'>
        <view class='book_list_item_title'>
          {{curBookItem.title}}
        </view>

        <view class='book_list_attribute_row'>
          <text class='book_list_attribute_key'>作者:</text>
          <text class='book_list_attribute_value'>{{curBookItem.authorsStr}}</text>
        </view>

        <view class='book_list_attribute_row'>
          <text class='book_list_attribute_key'>兰斯指数:</text>
          <text class='book_list_attribute_value'>{{curBookItem.lexileStr}}</text>
        </view>

        <view class='book_list_attribute_row'>
          <text class='book_list_attribute_key'>参考年龄:</text>
          <text class='book_list_attribute_value'>{{curBookItem.ageStr}}</text>
        </view>

        <view class='book_list_attribute_tags'>
          <view
            wx:for="{{curBookItem.tags}}"
            wx:for-index="tagIdx"
            wx:for-item="eachTag"
            wx:key="*this"

            class='book_single_tag'
          >
            <text class='book_single_tag_value'>{{eachTag}}</text>
          </view>  
        </view>

      </view>

    </view>
  </view>
components/book_list/book_list.wxss
/* components/book_list/book_list.wxss */

.book_list{
  margin-left: 15px;
  margin-right: 15px;
}

.book_list_item{
  display: flex;
  flex-direction:row;

  padding-bottom: 15px;

  font-size: 14px;
  color: #666666;
}

.book_item_logo{

}

.book_item_logo_img{
  width: 100px;
  height: 140px;

  border-radius: 8px;
  margin-right: 22px;
}

.book_list_item_attributes{
  display: flex;
  flex-direction: column;

  /* font-family: PingFangSC-Light; */
  font-family: "PingFangSC-Medium", "Microsoft Yahei", "微软雅黑", "Heiti SC";
}

.book_list_item_title{
  margin-top: 6px;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 500;
  color: #333333;

  line-height: 1.2;
}


.book_list_attribute_row{
  margin-bottom: 9px;

  line-height: 14px;
}

.book_list_attribute_key{
  color: #333333;
}

.book_list_attribute_value{

}

.book_single_tag{
  font-size: 12px;
  font-weight: 400;
  margin-right: 4px;
  padding-top: 1px;
  padding-bottom: 0;

  background-color: rgba(97, 210, 179, 0.8);
  color: rgba(255, 255, 255, 0.9);
  height: 15px;
  line-height: 14px;

  display: inline-block;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;

  padding-right: 0.6em;
  padding-left: 0.6em;
  border-radius: 10rem;
}

.book_single_tag_value{

}
然后:
主页中调用:
pages/index/index.json
{
  "usingComponents": {
    "book-list": "/components/book_list/book_list"
  }
}
pages/index/index.wxml
  <view class='search_result_books'>
    <book-list cur-book-list="{{searchBookList}}"></book-list>
  </view>
详情页中调用:
pages/detail/detail.json
{
  "usingComponents": {
    "book-list": "/components/book_list/book_list"
  }
}

pages/detail/detail.wxml
  <view class='detail_recommend_list'>
    <view class='recommend_header'>猜你喜欢</view>
    <book-list cur-book-list="{{curBookInfo.recommendations}}"></book-list>
  </view>
然后都可以正常显示出 绘本书籍的列表:

转载请注明:在路上 » 【已解决】小程序中如何提取公共部分内容为可复用的组件

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
84 queries in 0.140 seconds, using 20.69MB memory