无码人妻精一区二区三区,eeuss影院www在线观看,无码精品久久久久久人妻中字,日韩av高清在线看片

推薦新聞
使用 WebApi 交互打造原生的微信小程序- 圖靈小書架
發(fā)布者：深藍(lán)互聯(lián)
發(fā)布時(shí)間：2019-08-30
點(diǎn)擊：次

介紹

　　定時(shí)抓取圖靈社區(qū)官網(wǎng)的首頁、最熱、推薦和最新等欄目的相關(guān)圖書信息進(jìn)行展示，并且可以下載相關(guān)的 PDF 進(jìn)行查閱...

主要功能

 

源碼地址

　　源碼地址1：https://github.com/liqingwen2015/ituring_small_bookshelf

　　源碼地址2：https://gitee.com/liqingwen/ituring_small_bookshelf

　　使用說明：

  1. 打開微信開發(fā)者工具；
  2. 路徑引入 src 文件夾；
  3. 輸入 APPID 和文件名即可；
  4. 本地不需要配置服務(wù)器地址，自動(dòng)連接我的 WebAPI 接口資源，低成本配置；

 

　　不過使用  git，我有一個(gè)這樣的擔(dān)憂：用了5年GIT，原來分支合并是這樣協(xié)作的。假設(shè)團(tuán)隊(duì)3個(gè)人。 領(lǐng)導(dǎo)開創(chuàng)一個(gè)分支。 我和另外一個(gè)同事在領(lǐng)導(dǎo)的分支下創(chuàng)建一個(gè)新分支。 然后 我們各自開發(fā)。 有新功能就 去拉取 并將領(lǐng)導(dǎo)的分支合并到自己的分支。 這樣，我改的東西，和同事改的不會沖突。最后，GIT 導(dǎo)出我們的差異，通過 QQ 傳給領(lǐng)導(dǎo)。 

-- 引用 https://my.oschina.net/lcsoft/tweet/17666900

 

掃一掃體驗(yàn)

　　可以通過小程序（已上線）二維碼掃一掃，也可以在小程序中搜一下【圖靈小書架】進(jìn)行體驗(yàn)：

 

　　它真的非常?。ㄝp量、快、占用內(nèi)存?。?，接近 10 個(gè)頁面所占用的空間大?。ùa+圖片等）才100KB+。

 

代碼分析

結(jié)構(gòu)簡析

　　config 文件夾（可選）：存放配置信息；

　　images 文件夾（可選）：存放圖片；

　　pages 文件夾：存放每個(gè)頁面信息；

　　utils 文件夾（可選）：工具類存放；

　　app.js：項(xiàng)目的入口文件，如包含程序生命周期定義（頁面初始化、頁面渲染完成、頁面顯示、頁面隱藏和頁面關(guān)閉等）；

　　app.json：全局配置文件，如頁面路徑， tabBar（導(dǎo)航、圖標(biāo)和選中樣式等）；

　　app.wxss：全局樣式配置文件，如每個(gè)頁面可以重用的樣式；

　　project.config.json：程序的配置文件，如項(xiàng)目名稱、微信開發(fā)工具配置（是否校驗(yàn)合法域名、是否壓縮和樣式自動(dòng)補(bǔ)全等）；

 

　　為了方便統(tǒng)一管理 api 請求的地址，我統(tǒng)一在 config/config.js 中配置 api 的請求地址：

  
const key = require('const.js');

// 服務(wù)器域名
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
};
 

 

　　同時(shí)，也把一些靜態(tài) const 變量統(tǒng)一存放在 config/const.js 中，方便管理和維護(hù)：

  
// Key 名
module.exports = {
    // 用戶標(biāo)識
    wxUserId: 'WxUserId',

    // 登錄標(biāo)識
    loginFlag: 'LoginFlag',

    // 圖標(biāo)
    icon: {
        success: 'success',
        loading: 'loading',
        none: 'none'
    },

    // url 前綴
    urlPrefix: {
        server: 'https://api.nidie.com.cn/api/', //服務(wù)器
        local: 'http://localhost:57196/api/', //本地
        test: 'http://localhost:57196/api/', //測試
        file: 'https://download.nidie.com.cn/', //文件
        image: 'http://www.ituring.com.cn/' //圖片
    }
};
 

 

Pages 文件夾簡析

 

　　這里通過 detail （圖書詳情頁）文件夾進(jìn)行解析，從圖中可以看到的文件夾中包含：

  1. .json 后綴的 JSON 配置文件
  2. .wxml 后綴的 WXML 模板文件
  3. .wxss 后綴的 WXSS 樣式文件
  4. .js 后綴的 JS 腳本邏輯文件

 

　　detail.wxml：

  
<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>
 

　　該文件非常像我們所學(xué)過的 html 結(jié)構(gòu)，只不過標(biāo)簽替換為了小程序自己包裝的語義標(biāo)簽而已。

 

　　detail.js

  
// 獲取服務(wù)器接口地址
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 //下載中標(biāo)識
    },

    // 獲取書籍
    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('已經(jīng)開始下載，下載完畢后將自動(dòng)打開，請稍后?。?！');
            return;
        }

        file.openDocument(path);
    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面加載
     */
    onLoad: function (options) {
        let that = this;
        let id = options.id;

        that.getBook(id);
        that.setData({
            id: id
        });
    },
});
復(fù)制代碼

　　里面的語法類似 VUE，WXML 中的動(dòng)態(tài)數(shù)據(jù)均來自對應(yīng) Page 的 data，因?yàn)槲野押芏嘧约悍庋b的方法單獨(dú)放到 utils 文件夾和 config 文件夾中，在希望調(diào)用對應(yīng)的方法時(shí)需要使用 require 函數(shù)將其引入，小程序有許多豐富的 API，代碼中就使用了如下載、請求 json 數(shù)組、提示彈出框和 localStorage 緩存等 API（含同步、異步）。

 

　　detail.json

{
  "navigationBarTitleText": "詳情頁"
}

　　這里只是對應(yīng)導(dǎo)航頭文字進(jìn)行了修改而已。

 

　　detail.wxss 樣式文件，并沒有太多可以說的，按照自己的 css 樣式進(jìn)行編寫就好了。

 

其它相關(guān)信息（互聯(lián)網(wǎng)搜集）

　　PC 的 IDE、蘋果 IOS 和安卓 Android，它們的運(yùn)行環(huán)境是存在差異，意味著不是所有提供的 API 都可以完全兼容。

　　見 https://developers.weixin.qq.com/miniprogram/dev/devtools/details.html#運(yùn)行環(huán)境差異

 

 

小程序 - MINA 框架

　　微信團(tuán)隊(duì)為小程序提供的框架命名為MINA應(yīng)用框架。MINA框架通過封裝微信客戶端提供的文件系統(tǒng)、網(wǎng)絡(luò)通信、任務(wù)管理、數(shù)據(jù)安全等基礎(chǔ)功能，對上層提供一整套JavaScript API，讓開發(fā)者能夠非常方便地使用微信客戶端提供的各種基礎(chǔ)功能與能力，快速構(gòu)建一個(gè)應(yīng)用。

 

小程序 - 啟動(dòng)運(yùn)行機(jī)制

 

小程序 - 生命周期

 

關(guān)注深藍(lán)互聯(lián)公眾號
Copyright ? 2013-2025 深藍(lán)互聯(lián) 版權(quán)所有
友情鏈接：