這篇文章主要介紹微信小程序項目中如何實現記賬小程序功能，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

為張家川回族自治等地區用戶提供了全套網頁設計制作服務，及張家川回族自治網站建設行業解決方案。主營業務為網站設計、網站建設、張家川回族自治網站設計，以傳統方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業、用心的態度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

一、小程序部分

這是理財系統的前端,江蘇海洋大學微信小程序比賽，最后獲得了一等獎
GitHub：https://github.com/GeorgeLeoo/finance

1. 項目描述

(1). 此項目為記賬小程序
(2). 包括賬單、圖表、搜索、用戶等多個子模塊
(3). 使用微信小程序技術
(4). 采用模塊化、組件化、工程化等模式開發

2. 項目功能界面

在 1.0.2版本中刪除了扇形圖

3. 項目目錄

 * pages：頁面
  * components：組件
  * utils：工具類 
    |-- util.js：工具類 
    |-- wxcharts.js：圖表插件
  * images：資源圖片
  * config：配置文件
  * filter：過濾器
  * http：網絡請求
    |-- http.js：對 wx.request 的封裝
    |-- api.js：對網絡請求接口的封裝

4. 請求封裝

一開始使用 wx.request 對數據進行網絡請求，可寫完后，發現太過冗余，也太麻煩，故對其做了封裝。
通過創建一個函數返回 Promise 對象，就可以屏蔽公共的部分

// http/http.js
/**
 * 對微信普通網絡請求封裝
 * @param url  請求地址
 * @param data 請求的參數
 * @param method  請求的方法類型 
 * @param headers  頭部信息，在這里主要是 token 認證功能
 * @returns {Promise<unknown>} 返回請求的 Promise 對象
 */
function http({url, data, method, headers = {}}) {
  return new Promise((resolve, reject) => {
    wx.request({
      url,
      method,
      data,
      header: {
        Authorization: headers.token,
        expiresIn: headers.expiresIn
      },
      success: (result) => {
        const res = result.data;
        if (res.code === 0) {
          resolve(res.data);
        } else if (res.code === 1) {
          reject(res.msg);
        }
        // 隱藏 loading
        wx.hideLoading();
      },
      fail: (err) => {
        console.error('server error', err);
      }
    });
  })
}

/**
 * 對文件上傳接口封裝
 * @param url  請求地址
 * @param fileOptions  文件配置項
 * @param data 請求發送的數據
 * @param headers  頭部信息，在這里主要是 token 認證功能
 * @returns {Promise<unknown>} 返回請求的 Promise 對象
 */
function uploadFile({url, fileOptions, data, headers = {}}) {
  return new Promise(((resolve, reject) => {
    wx.uploadFile({
      url: url,
      filePath: fileOptions.filePath,
      name: fileOptions.name || 'file',
      header: {
        Authorization: headers.token,
        expiresIn: headers.expiresIn
      },
      formData: data,
      success: (res) => {
        console.log(res.data);
        if (JSON.parse(res.data).code === 0) {
          resolve(res.data);
        } else if (res.code === 1) {
          reject(res.msg);
        }
      },
      fail: (err) => {
        console.error('server error', err);
      }
    })
  }))
}

module.exports = {
  http,
  uploadFile
};

5. 遇到的問題

(1). 在更新賬單數據后，如何更新賬單界面的數據？
        這個問題我的解決方案是，在 globalData 中添加一個全部變量 isRefreshBills，默認為 false，
     當更新賬單數據成功后，將 isRefreshBills 修改為 true，同時返回到賬單界面，在賬單界面的
     onShow()方法中，判斷 isRefreshBills 是否為 true，若為 true 則重新請求數據，同時將 isRefreshBills
     設為 false，否則不請求。這樣就避免了沒有更新數據的情況下多次請求數據。
        對這個解法，還有一種更加節流的方法，就是更新后不去請求，而是對原來的獲取到的數據進行個別刪除。比如當
     更新數據成功后，獲取一個被更新的這條數據的id，然后在賬單頁面的 onShow() 方法中，遍歷找到這個 id 對應的
     數據，并刪除這條數據也能達到數據更新的效果
    
(2). 在進行類別添加的時候，自定義的類別會出現雙倍？
        由于我有一分部初始數據是存在 globalData 中的，每次從服務器獲取自定義類別時，都會對其進行拼接，
     在拼接的時候修改了原來的 globalData 中的值，所以每次添加后都會請求一次自定義數據，進行拼接。
     解決方案：禁止更新 globalData 中的數據
    
(3). 返回哪個頁面問題？
        在賬單頁面可以進去修改賬單的頁面，在搜索頁面也可以進入修改賬單賬單的頁面，他們用的是同一個組件，
     那么如何保證在賬單頁面進入修改賬單頁面后返回到賬單頁面，在搜索頁面進入修改賬單頁面后返回到搜索頁面。
     首先在路由跳轉的時候添加當前路由信息，然后在修改賬單頁面中接受這個路由信息，最后通過這個路由信息返回到原來的路由

6. 總結

 這個項目是我5月份參加學校微信小程序的項目，兩個禮拜倉促的做了這么一個項目，前后端都有，最后榮獲一等獎。
    在之前比賽用的版本中其實有很多的 bug 以及卡頓現象居多，故這兩天我有對這個項目進行了一定的維護，發現原來的代碼實在
    慘不忍睹，現在經過升級，頁面卡頓現象減少，若后期再想維護，也相對于之前的版本好維護多了，但是還有很多可以維護的空間。
    其實我并不對這個項目很滿意，比如之前我沒做分頁加載， 現在想加個分頁加載的功能，我發現并不是一下子就能搞定的，
    因為我的數據結構不是很合理，因為后端返回的數據和前端要顯示的數據格式是不一致，故前端要重新定義數據結構，
    所以對分頁來說就有一定的困難。在我對項目進行維護后，代碼比以前更簡潔，可讀性相對于之前的版本來說要更加好。

二、服務器部分

1.簡述

這個項目是微信小程序記賬 app 的后端代碼，使用技術：MongoDB+Express。
GitHub：https://github.com/GeorgeLeoo/finance-server

這個項目的目錄是這樣的

• config: 配置文件

• routes: 路由配置

• utils: 工具類

• db: 操作數據庫的代碼

• controller: 控制是當前地址否要 token 驗證

• service: 如何調用操作數據庫函數（我也不知道為什么要寫controller，service，感覺這兩個寫一個就可以了）

2.遇到的問題

(1). token 驗證問題？

關于 token 驗證問題我使用了 jsonwebtoken 插件，故先用 npm 安裝這個插件。
token 驗證流程大概如下圖：

使用這個插件: 定義兩個方法，一個用來生成 token，另一個用來驗證 token。

 /**
 * 生成token
 * @param {object} content 對某個內容生成 token
 */
 const access_token=function (content) {
   let secret = 'jizhangxitongfinancegeorgeleeo'; // 秘鑰
   let expiresIn = Math.round((new Date().getTime()/1000)) + 3600; // 過期時間
   let token = jwt.sign(content, secret, { expiresIn });
   return {
     token,
     expiresIn
   };
 }
 /**
 * 驗證token
 * @param {string} token token值
 */
 const check_token= function (token) {
   let secret = 'jizhangxitongfinancegeorgeleeo'; // 秘鑰，根生成的 token 要一致
   return new Promise((resolve, reject) => {
     jwt.verify(token, secret, (err, decode) => {
       if (err) {
         //時間失效或偽造 token 或 token 不存在
         reject({
           status: 10010,
           error: 'invalid_token'
         });
       } else {
         resolve();
       }
     });
   })
 }

在controller.js 中，去判斷 token 驗證成功與否

function billController(method, options, req, res) {
  // 驗證 token
  utils.check_token(req.headers.authorization, res).then(() => {
    // token驗證成功，調用操作數據庫的方法
    billService[method](options).then((data) => {
      res.json(data);
    }).catch((err) => {
      res.json(err)
    });
  }).catch((err) => {
    // token 驗證失敗
    res.json(err)
  })
}

(2). 文件上傳問題？

在這個項目中，有使用文件上傳的功能，express 默認是帶這個功能的，所以就必須使用 npm
安裝 express-fileupload 這個插件，然后再 app.js 中引入并注冊這個插件

var fileUpload = require('express-fileupload');
app.use(fileUpload());

當前端發送文件時，后端從 req.files['name']獲取 file 對象，然后通過 file.mv()方法進行文件存儲

  file.mv(fileSavePath, function (e) {
    if (e) {
      // 失敗時
    } else {
      // 成功時
    }
  });

比如我的項目中，上傳圖片代碼抽取出來就是

 // 小程序代碼
    wx.uploadFile({
      url: 'http://localhost:3000/users/avatar',
      filePath: 'XXXXXXX',
      name: 'avatar',
      header: {
        Authorization: headers.token,
        expiresIn: headers.expiresIn
      },
      formData: data,
      success: (res) => {},
      fail: (err) => {}
    });

  // 服務器代碼
    let file = req.files.avatar
    file.mv('upload/a.png', function (e) {
      if (e) {
        // 失敗時
      } else {
        // 成功時
      }
    });

(3). 關于前端讀取upload中圖片的問題

本來想用服務器的 ip 來讀取項目中 upload 中的圖片，但是發現并不能讀取，或顯示404，故最后將 upload 文件放在了項目的外邊，

然后對這個 upload 文件單獨開了一個服務，把他當做圖片服務器來使用。

3. 總結

當初選用 Express + MongoDB 的唯一原因就是開發快，因為基本上每天都滿課，所以快速開發是我的需要。在這個項目中其實還有很多可以優化的地方，還有一定的冗余，比如在操作數據的時候，所有的查詢成功或失敗的函數都可以存放到一個公共類里面，而不是每一對應的文件里都有一個這個方法

以上是“微信小程序項目中如何實現記賬小程序功能”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯行業資訊頻道！

文章題目：微信小程序項目中如何實現記賬小程序功能
網頁地址：http://www.yijiale78.com/article40/ghdseo.html

成都網站建設公司_創新互聯，為您提供用戶體驗、App設計、網站制作、微信小程序、品牌網站制作、服務器托管

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯