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

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

一、小程序部分

這是理財(cái)系統(tǒng)的前端,江蘇海洋大學(xué)微信小程序比賽，最后獲得了一等獎(jiǎng)
GitHub：https://github.com/GeorgeLeoo/finance

1. 項(xiàng)目描述

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

2. 項(xiàng)目功能界面

在 1.0.2版本中刪除了扇形圖

3. 項(xiàng)目目錄

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

4. 請(qǐng)求封裝

一開始使用 wx.request 對(duì)數(shù)據(jù)進(jìn)行網(wǎng)絡(luò)請(qǐng)求，可寫完后，發(fā)現(xiàn)太過冗余，也太麻煩，故對(duì)其做了封裝。
通過創(chuàng)建一個(gè)函數(shù)返回 Promise 對(duì)象，就可以屏蔽公共的部分

// http/http.js
/**
 * 對(duì)微信普通網(wǎng)絡(luò)請(qǐng)求封裝
 * @param url  請(qǐng)求地址
 * @param data 請(qǐng)求的參數(shù)
 * @param method  請(qǐng)求的方法類型 
 * @param headers  頭部信息，在這里主要是 token 認(rèn)證功能
 * @returns {Promise<unknown>} 返回請(qǐng)求的 Promise 對(duì)象
 */
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);
      }
    });
  })
}

/**
 * 對(duì)文件上傳接口封裝
 * @param url  請(qǐng)求地址
 * @param fileOptions  文件配置項(xiàng)
 * @param data 請(qǐng)求發(fā)送的數(shù)據(jù)
 * @param headers  頭部信息，在這里主要是 token 認(rèn)證功能
 * @returns {Promise<unknown>} 返回請(qǐng)求的 Promise 對(duì)象
 */
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). 在更新賬單數(shù)據(jù)后，如何更新賬單界面的數(shù)據(jù)？
        這個(gè)問題我的解決方案是，在 globalData 中添加一個(gè)全部變量 isRefreshBills，默認(rèn)為 false，
     當(dāng)更新賬單數(shù)據(jù)成功后，將 isRefreshBills 修改為 true，同時(shí)返回到賬單界面，在賬單界面的
     onShow()方法中，判斷 isRefreshBills 是否為 true，若為 true 則重新請(qǐng)求數(shù)據(jù)，同時(shí)將 isRefreshBills
     設(shè)為 false，否則不請(qǐng)求。這樣就避免了沒有更新數(shù)據(jù)的情況下多次請(qǐng)求數(shù)據(jù)。
        對(duì)這個(gè)解法，還有一種更加節(jié)流的方法，就是更新后不去請(qǐng)求，而是對(duì)原來的獲取到的數(shù)據(jù)進(jìn)行個(gè)別刪除。比如當(dāng)
     更新數(shù)據(jù)成功后，獲取一個(gè)被更新的這條數(shù)據(jù)的id，然后在賬單頁面的 onShow() 方法中，遍歷找到這個(gè) id 對(duì)應(yīng)的
     數(shù)據(jù)，并刪除這條數(shù)據(jù)也能達(dá)到數(shù)據(jù)更新的效果
    
(2). 在進(jìn)行類別添加的時(shí)候，自定義的類別會(huì)出現(xiàn)雙倍？
        由于我有一分部初始數(shù)據(jù)是存在 globalData 中的，每次從服務(wù)器獲取自定義類別時(shí)，都會(huì)對(duì)其進(jìn)行拼接，
     在拼接的時(shí)候修改了原來的 globalData 中的值，所以每次添加后都會(huì)請(qǐng)求一次自定義數(shù)據(jù)，進(jìn)行拼接。
     解決方案：禁止更新 globalData 中的數(shù)據(jù)
    
(3). 返回哪個(gè)頁面問題？
        在賬單頁面可以進(jìn)去修改賬單的頁面，在搜索頁面也可以進(jìn)入修改賬單賬單的頁面，他們用的是同一個(gè)組件，
     那么如何保證在賬單頁面進(jìn)入修改賬單頁面后返回到賬單頁面，在搜索頁面進(jìn)入修改賬單頁面后返回到搜索頁面。
     首先在路由跳轉(zhuǎn)的時(shí)候添加當(dāng)前路由信息，然后在修改賬單頁面中接受這個(gè)路由信息，最后通過這個(gè)路由信息返回到原來的路由

6. 總結(jié)

 這個(gè)項(xiàng)目是我5月份參加學(xué)校微信小程序的項(xiàng)目，兩個(gè)禮拜倉促的做了這么一個(gè)項(xiàng)目，前后端都有，最后榮獲一等獎(jiǎng)。
    在之前比賽用的版本中其實(shí)有很多的 bug 以及卡頓現(xiàn)象居多，故這兩天我有對(duì)這個(gè)項(xiàng)目進(jìn)行了一定的維護(hù)，發(fā)現(xiàn)原來的代碼實(shí)在
    慘不忍睹，現(xiàn)在經(jīng)過升級(jí)，頁面卡頓現(xiàn)象減少，若后期再想維護(hù)，也相對(duì)于之前的版本好維護(hù)多了，但是還有很多可以維護(hù)的空間。
    其實(shí)我并不對(duì)這個(gè)項(xiàng)目很滿意，比如之前我沒做分頁加載， 現(xiàn)在想加個(gè)分頁加載的功能，我發(fā)現(xiàn)并不是一下子就能搞定的，
    因?yàn)槲业臄?shù)據(jù)結(jié)構(gòu)不是很合理，因?yàn)楹蠖朔祷氐臄?shù)據(jù)和前端要顯示的數(shù)據(jù)格式是不一致，故前端要重新定義數(shù)據(jù)結(jié)構(gòu)，
    所以對(duì)分頁來說就有一定的困難。在我對(duì)項(xiàng)目進(jìn)行維護(hù)后，代碼比以前更簡潔，可讀性相對(duì)于之前的版本來說要更加好。

二、服務(wù)器部分

1.簡述

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

這個(gè)項(xiàng)目的目錄是這樣的

• config: 配置文件

• routes: 路由配置

• utils: 工具類

• db: 操作數(shù)據(jù)庫的代碼

• controller: 控制是當(dāng)前地址否要 token 驗(yàn)證

• service: 如何調(diào)用操作數(shù)據(jù)庫函數(shù)（我也不知道為什么要寫controller，service，感覺這兩個(gè)寫一個(gè)就可以了）

2.遇到的問題

(1). token 驗(yàn)證問題？

關(guān)于 token 驗(yàn)證問題我使用了 jsonwebtoken 插件，故先用 npm 安裝這個(gè)插件。
token 驗(yàn)證流程大概如下圖：

使用這個(gè)插件: 定義兩個(gè)方法，一個(gè)用來生成 token，另一個(gè)用來驗(yàn)證 token。

 /**
 * 生成token
 * @param {object} content 對(duì)某個(gè)內(nèi)容生成 token
 */
 const access_token=function (content) {
   let secret = 'jizhangxitongfinancegeorgeleeo'; // 秘鑰
   let expiresIn = Math.round((new Date().getTime()/1000)) + 3600; // 過期時(shí)間
   let token = jwt.sign(content, secret, { expiresIn });
   return {
     token,
     expiresIn
   };
 }
 /**
 * 驗(yàn)證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) {
         //時(shí)間失效或偽造 token 或 token 不存在
         reject({
           status: 10010,
           error: 'invalid_token'
         });
       } else {
         resolve();
       }
     });
   })
 }

在controller.js 中，去判斷 token 驗(yàn)證成功與否

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

(2). 文件上傳問題？

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

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

當(dāng)前端發(fā)送文件時(shí)，后端從 req.files['name']獲取 file 對(duì)象，然后通過 file.mv()方法進(jìn)行文件存儲(chǔ)

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

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

 // 小程序代碼
    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) => {}
    });

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

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

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

然后對(duì)這個(gè) upload 文件單獨(dú)開了一個(gè)服務(wù)，把他當(dāng)做圖片服務(wù)器來使用。

3. 總結(jié)

當(dāng)初選用 Express + MongoDB 的唯一原因就是開發(fā)快，因?yàn)榛旧厦刻於紳M課，所以快速開發(fā)是我的需要。在這個(gè)項(xiàng)目中其實(shí)還有很多可以優(yōu)化的地方，還有一定的冗余，比如在操作數(shù)據(jù)的時(shí)候，所有的查詢成功或失敗的函數(shù)都可以存放到一個(gè)公共類里面，而不是每一對(duì)應(yīng)的文件里都有一個(gè)這個(gè)方法

以上是“微信小程序項(xiàng)目中如何實(shí)現(xiàn)記賬小程序功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章題目：微信小程序項(xiàng)目中如何實(shí)現(xiàn)記賬小程序功能
網(wǎng)頁地址：http://jinyejixie.com/article40/ghdseo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、App設(shè)計(jì)、網(wǎng)站制作、微信小程序、品牌網(wǎng)站制作、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)