Building a DouBan Book Search Mini Program with WeChat Mini Program

The author explores WeChat Mini Program development by building a small demo called DouBanBookApp that searches books via the DouBan Book API and shows details on a separate page.

The DouBan API provides two endpoints: GET https://api.douban.com/v2/book/search for searching books and GET https://api.douban.com/v2/book/:id for retrieving a book's details.

After creating the project with the default Mini Program structure, the home page is designed with a search input at the top and a scrollable list that loads more results when the user reaches the bottom, using the scroll-view component and its bindscrolltolower event.

The static layout of index.wxml and index.wxss is shown in the original images; the detail page similarly uses detail.wxml and detail.wxss to present the selected book's information.

All JavaScript logic is organized into separate files: api.js (API definitions), util.js (utility functions), and request.js (wrapper around wx.request).

Key event handlers include:

searchInputEvent: function(e) {
    this.setData({ searchKey: e.detail.value });
}

searchClickEvent: function(e) {
    if (!this.data.searchKey) return;
    this.setData({ pageIndex: 0, pageData: [] });
    requestData.call(this);
}

The requestData function sends the search request, updates loading state, concatenates new books to pageData, and manages pagination counters:

function requestData() {
    var _this = this;
    var q = this.data.searchKey;
    var start = this.data.pageIndex;
    this.setData({ loadingMore: true, isInit: false });
    updateRefreshBall.call(this);
    requests.requestSearchBook({ q: q, start: start }, (data) => {
        if (data.total == 0) {
            _this.setData({ totalRecord: 0 });
        } else {
            _this.setData({
                pageData: _this.data.pageData.concat(data.books),
                pageIndex: start + 1,
                totalRecord: data.total
            });
        }
    }, () => { _this.setData({ totalRecord: 0 }); }, () => { _this.setData({ loadingMore: false }); });
}

A visual loading effect is created by periodically changing the color of a small ball; the color list and timer logic are encapsulated in updateRefreshBall:

function updateRefreshBall() {
    var cIndex = 0;
    var _this = this;
    var timer = setInterval(function() {
        if (!_this.data['loadingMore']) { clearInterval(timer); }
        if (cIndex >= iconColor.length) cIndex = 0;
        _this.setData({ footerIconColor: iconColor[cIndex++] });
    }, 100);
}

Navigation to the detail page uses wx.navigateTo with the book id as a query parameter, and the detail page retrieves this id in its onLoad method:

toDetailPage: function(e) {
    var bid = e.currentTarget.dataset.bid;
    wx.navigateTo({ url: '../detail/detail?id=' + bid });
}

onLoad: function(option) {
    this.setData({ id: option.id });
}

The article concludes that the demo is simple, consisting of only two pages, and serves as an introductory example for building WeChat Mini Programs, demonstrating data binding, event handling, template usage, and network requests.