玩玩小程序：使用 WebApi 交互打造原生的微信小程序 - 圖靈小書架

時間  2019-11-06
標籤 玩玩 程序 使用 webapi 交互 打造 原生 微信 圖靈 書架 简体版
原文   原文鏈接

 使用 WebApi 交互打造原生的微信小程序 - 圖靈小書架

 

目錄

  • 介紹
  • 源碼地址
  • 掃一掃體驗
  • 代碼分析
  • 其它相關信息（互聯網蒐集）

 

介紹

　　定時抓取圖靈社區官網的首頁、最熱、推薦和最新等欄目的相關圖書信息進行展現，而且能夠下載相關的 PDF 進行查閱...css

主要功能html

 

源碼地址

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

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

　　使用說明：json

  1. 打開微信開發者工具；
  2. 路徑引入 src 文件夾；
  3. 輸入 APPID 和文件名便可；
  4. 本地不須要配置服務器地址，自動鏈接個人 WebAPI 接口資源，低成本配置；

 

　　不過使用  git，我有一個這樣的擔心：用了5年GIT，原來分支合併是這樣協做的。假設團隊3我的。 領導開創一個分支。 我和另一個同事在領導的分支下建立一個新分支。 而後 咱們各自開發。 有新功能就 去拉取 並將領導的分支合併到本身的分支。 這樣，我改的東西，和同事改的不會衝突。最後，GIT 導出咱們的差別，經過 QQ 傳給領導。 小程序

-- 引用 https://my.oschina.net/lcsoft/tweet/17666900微信小程序

 

掃一掃體驗

　　能夠經過小程序（已上線）二維碼掃一掃，也能夠在小程序中搜一下【圖靈小書架】進行體驗：api

 

　　它真的很是小（輕量、快、佔用內存小），接近 10 個頁面所佔用的空間大小（代碼+圖片等）才100KB+。數組

 

代碼分析

結構簡析

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

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

　　pages 文件夾：存放每一個頁面信息；

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

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

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

　　app.wxss：全局樣式配置文件，如每一個頁面能夠重用的樣式；

　　project.config.json：程序的配置文件，如項目名稱、微信開發工具配置（是否校驗合法域名、是否壓縮和樣式自動補全等）；

 

　　爲了方便統一管理 api 請求的地址，我統一在 config/config.js 中配置 api 的請求地址：

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

 

　　同時，也把一些靜態 const 變量統一存放在 config/const.js 中，方便管理和維護：

// 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/' //圖片
    }
};

 

Pages 文件夾簡析

 

　　這裏經過 detail （圖書詳情頁）文件夾進行解析，從圖中能夠看到的文件夾中包含：

  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>

　　該文件很是像咱們所學過的 html 結構，只不過標籤替換爲了小程序本身包裝的語義標籤而已。

 

　　detail.js

// 獲取服務器接口地址
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
        });
    },
});

　　裏面的語法相似 VUE，WXML 中的動態數據均來自對應 Page 的 data，由於我把不少本身封裝的方法單獨放到 utils 文件夾和 config 文件夾中，在但願調用對應的方法時須要使用 require 函數將其引入，小程序有許多豐富的 API，代碼中就使用了以下載、請求 json 數組、提示彈出框和 localStorage 緩存等 API（含同步、異步）。

 

　　detail.json

{
  "navigationBarTitleText": "詳情頁"
}

　　這裏只是對應導航頭文字進行了修改而已。

 

　　detail.wxss 樣式文件，並無太多能夠說的，按照本身的 css 樣式進行編寫就行了。

 

其它相關信息（互聯網蒐集）

　　PC 的 IDE、蘋果 IOS 和安卓 Android，它們的運行環境是存在差別，意味着不是全部提供的 API 均可以徹底兼容。

　　見 https://developers.weixin.qq.com/miniprogram/dev/devtools/details.html#運行環境差別

 

 

小程序 - MINA 框架

　　微信團隊爲小程序提供的框架命名爲MINA應用框架。MINA框架經過封裝微信客戶端提供的文件系統、網絡通訊、任務管理、數據安全等基礎功能，對上層提供一整套JavaScript API，讓開發者可以很是方便地使用微信客戶端提供的各類基礎功能與能力，快速構建一個應用。

 

小程序 - 啓動運行機制

 

小程序 - 生命週期

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程