使用 WebApi 交互打造原生的微信小程序 - 图灵小书架

const key = require('const.js');// 服务器域名const baseUrl = key.urlPrefix.server;//const baseUrl = key.urlPrefix.local;//获取首页的图书const getBooksOfIndex = baseUrl + 'books/v1/index';//获取图书列表const getBooksByShowType = baseUrl + 'books/v1/list';//获取图书const getBook = baseUrl + 'books/v1/detail';const saveUserInfo = baseUrl + 'account/v1/save';const submitComment = baseUrl + 'comment/v1/submit';const getComments = baseUrl + 'comment/v1/list';module.exports = {    getBooksOfIndex: getBooksOfIndex,    getBooksByShowType: getBooksByShowType,    getBook: getBook,    saveUserInfo: saveUserInfo,    submitComment: submitComment,    getComments: getComments};

// Key 名module.exports = {    // 用户标识    wxUserId: 'WxUserId',    // 登录标识    loginFlag: 'LoginFlag',    // 图标    icon: {        success: 'success',        loading: 'loading',        none: 'none'    },    // url 前缀    urlPrefix: {        server: 'https://api.nidie.com.cn/api/', //服务器        local: 'http://localhost:57196/api/', //本地        test: 'http://localhost:57196/api/', //测试        file: 'https://download.nidie.com.cn/', //文件        image: 'http://www.ituring.com.cn/' //图片    }};

<view>    <block wx:if="{{showLoading}}">        <view class="donut-container">            <view class="donut"></view>        </view>    </block>    <block wx:else>        <view class="book-container bg-white">            <view class="book-info">                <image class="book-image" mode="scaleToFill" src="{{book.imageUrl}}"></image>                <view class="book-desc">                    <text class="book-main-text">{{book.name}}</text>                    <text class="book-text">{{book.author}}</text>                    <text class="book-text">￥ {{book.price}} 元</text>                    <view class="loading-container" wx:if="{{downloading}}">                        <progress percent="{{downloadPercent}}" stroke-width="6" activeColor="#1aad19" backgroundColor="#cdcdcd" show-info />                    </view>                </view>            </view>        </view>        <view class="comment-container">            <view class="comment-title">                <text>========== 简介 ==========</text>            </view>            <view class="comment-area">                <block>                    <view class="comment-placeholder">                        <text>{{book.intro}}</text>                    </view>                </block>            </view>        </view>        <!-- bottom button -->        <view class="fixed-bottom block-full-width flex-container bg-white" wx:if="{{isAllowDownload}}">            <button class="full-button" type="primary" catchtap="download" data-id="{{bookInfo.id}}" data-name="{{bookInfo.name}}">                随书下载<text style="font-size:26rpx; color:gray">（已存在，则立即打开）</text>            </button>        </view>    </block></view>

// 获取服务器接口地址const api = require('../../config/config.js');const key = require('../../config/const.js');const http = require('../../utils/http.js');const file = require('../../utils/file.js');const cache = require('../../utils/cache.js');const tip = require('../../utils/tip.js');Page({    data: {        bookIsBuy: 0,        downloading: false,        book: {},        id: '',        showLoading: true,        isAllowDownload: false, //是否允许下载        isDownloading: false //下载中标识    },    // 获取书籍    getBook: function (id) {        let that = this;        let key = `Book_${id}`;        let val = cache.getSync(key);        let obj = {            showLoading: false        };        if (val) {            if (val.pdfUrl && val.pdfUrl.trim() !== '') {                obj.isAllowDownload = true;            }            obj.book = val;            that.setData(obj);            return;        }        http.get(api.getBook + `/${id}`, function (data) {            if (data.pdfUrl && data.pdfUrl.trim() !== '') {                obj.isAllowDownload = true;            }            obj.book = data;            that.setData(obj);            cache.set(key, data);        });    },    // 下载    download: function () {        let that = this;        if (that.data.isDownloading) {            tip.showToast('下载中，请稍安勿躁！！！');            return;        }          let cachekey = `Book_PDF_${that.data.id}`;        let path = cache.getSync(cachekey);        if (!path) {            that.setData({                isDownloading: true            });            let pdfUrl = that.data.book.pdfUrl.split(',');                        http.downloadFile(key.urlPrefix.file + pdfUrl[0],                function (filePath) {                    file.openDocument(filePath);                    cache.set(cachekey, filePath);                },                function () {                    that.setData({                        isDownloading: false                    });                });            tip.showToast('已经开始下载，下载完毕后将自动打开，请稍后！！！');            return;        }        file.openDocument(path);    },    /**     * 生命周期函数--监听页面加载     */    onLoad: function (options) {        let that = this;        let id = options.id;        that.getBook(id);        that.setData({            id: id        });    },});

{  "navigationBarTitleText": "详情页"}