小程序-心理學(xué)辭典應(yīng)用開(kāi)發(fā)的心得

cnTomato 發(fā)布于2019-08-23 12:22 / 1786人閱讀

摘要：小程序心理學(xué)辭典應(yīng)用開(kāi)發(fā)的心得前言最近學(xué)習(xí)小程序，用了五天工作之余從開(kāi)始，到一個(gè)簡(jiǎn)單的完成，有點(diǎn)心得，記錄下來(lái)。數(shù)據(jù)庫(kù)方面，小程序最近推出云開(kāi)發(fā)的服務(wù)，這東西類(lèi)似，這些后端云服務(wù)，而且這些第三方的服務(wù)對(duì)微信支持的也不錯(cuò)。

小程序-心理學(xué)辭典應(yīng)用開(kāi)發(fā)的心得 前言

最近學(xué)習(xí)小程序，用了五天工作之余從0開(kāi)始，到一個(gè)簡(jiǎn)單的App完成，有點(diǎn)心得，記錄下來(lái)。

想法

最近在學(xué)習(xí)算法動(dòng)態(tài)規(guī)劃那部分，有點(diǎn)感悟，不要想著怎么樣讓整體結(jié)果最優(yōu)，因?yàn)樵谙到y(tǒng)足夠復(fù)雜的情況下太消耗時(shí)間。如果按貪婪算法的思路，讓每一步都是當(dāng)下最優(yōu)，也許結(jié)果并不是最優(yōu)，但也足夠優(yōu)秀了，關(guān)鍵時(shí)間很快。
所以這次寫(xiě)項(xiàng)目改了思路，不像之前設(shè)計(jì)的很完整后再做，這次只先做最核心的功能，其他功能暫時(shí)用簡(jiǎn)單技術(shù)替代，先做出東西來(lái)，再慢慢優(yōu)化。
坑還是只有走過(guò)了才印象深刻。

預(yù)備工作

前陣子剛學(xué)習(xí)了心理學(xué)皮毛，里面有個(gè)心理學(xué)詞典的內(nèi)容，我覺(jué)得很受用，就像做個(gè)詞典類(lèi)的App，讓我能時(shí)?；仡櫆亓?xí)，運(yùn)氣好的話還可以幫助到別人。
所以我的核心需求就是：做個(gè)“心理學(xué)辭典”，能夠?yàn)g覽各個(gè)詞條，并推薦一些文章供擴(kuò)展閱讀。
花了點(diǎn)時(shí)間大致構(gòu)思了下，我要做的事情有：

設(shè)計(jì)原型

設(shè)計(jì)界面

設(shè)計(jì)數(shù)據(jù)庫(kù)

技術(shù)選型

瀏覽一遍小程序文檔（不用深入，只需要知道它有哪些能力，在大腦建個(gè)索引，需要時(shí)能快速查找）

數(shù)據(jù)庫(kù)方案

制作測(cè)試數(shù)據(jù)

開(kāi)發(fā)階段

界面制作

數(shù)據(jù)

優(yōu)化

總結(jié)歸納

進(jìn)入開(kāi)發(fā) 設(shè)計(jì)原型

因?yàn)樾枨蠛?jiǎn)單，原型也不需要高保真，手繪就搞定了。一個(gè)搜索框，一個(gè)標(biāo)簽列表，一個(gè)結(jié)果列表。一個(gè)詞典的內(nèi)容并不會(huì)很多，可以在列表項(xiàng)中直接做展開(kāi)。
因?yàn)樵~典數(shù)據(jù)量有限，選擇一次加載完所有的項(xiàng)目（包含_id,name,tags），點(diǎn)擊后查詢(xún)?cè)斍榫彺娼Y(jié)果，再展開(kāi)。
搜索有兩種模式，普通搜索和標(biāo)簽搜索。為了更好展示，這里設(shè)計(jì)成，tag搜索也當(dāng)做條件，只是在前面加個(gè)“#”號(hào)。
具體交互效果可查看小程序。

界面設(shè)計(jì)

交互稿確定后，去網(wǎng)絡(luò)上找了幾個(gè)對(duì)眼的設(shè)計(jì)稿，參考了下，在psd上大致設(shè)計(jì)了下（設(shè)計(jì)和PS技術(shù)太渣 (￣.￣)|||）

數(shù)據(jù)庫(kù)設(shè)計(jì)

App的第一階段做純展示，就涉及一張表

vocabulary(_id, name, tags, content, remark, links, create_at, update_at)

技術(shù)選型

小程序的語(yǔ)法很簡(jiǎn)單，和Vue有點(diǎn)相似，發(fā)展到如今有基于React的Taro，基于Vue的mpvue/wepy，還有uni-app?？蛇x擇的挺多的，但是我任然選擇用小程序自帶的語(yǔ)法來(lái)寫(xiě)，畢竟在用其他語(yǔ)法時(shí)，明白其原先的樣子總是有好處的。確實(shí)在實(shí)際過(guò)程中發(fā)現(xiàn)小程序自身語(yǔ)法設(shè)計(jì)不足與不同之處。

數(shù)據(jù)庫(kù)方面，小程序最近推出云開(kāi)發(fā)的服務(wù)，這東西類(lèi)似Leancloud，Bmob這些后端云服務(wù)，而且這些第三方的服務(wù)對(duì)微信支持的也不錯(cuò)。這次項(xiàng)目選用云開(kāi)發(fā)，畢竟是一家的，集成的應(yīng)該會(huì)更好一些。不過(guò)實(shí)際使用過(guò)程中發(fā)現(xiàn)這玩意不足的地方很多，大項(xiàng)目慎用。

因?yàn)檫x用的技術(shù)都是沒(méi)有使用的技術(shù)，這里就要用些策略了，我是這樣做的。

先把文檔大致看下，主要了解下大體情況，了解小程序和云開(kāi)發(fā)的能力，在腦海里建立個(gè)索引，知道哪些內(nèi)容文檔里有，在要用到的時(shí)候就能快速查找。

遇到云開(kāi)發(fā)增刪改查的問(wèn)題，我是把常用的方法和場(chǎng)景都羅列到自己的筆記本里，為了更方便的查找

制作測(cè)試數(shù)據(jù)

數(shù)據(jù)源主要來(lái)自《武志紅的心理學(xué)課》，在課程末尾老師有把講到的關(guān)鍵詞都羅列出來(lái)了。但是有個(gè)問(wèn)題，老師給的那些資料里，都是以圖片展示的，如果一個(gè)個(gè)手動(dòng)錄入也太不像程序員了。于是找了個(gè)Mac下好用的OCR工具iText，App Store里可以下載到。如此一來(lái)靜態(tài)文本數(shù)據(jù)就不是問(wèn)題了，但是要怎么入庫(kù)呢？

云開(kāi)發(fā)里有個(gè)通過(guò)CSV或JSON上傳數(shù)據(jù)的功能。那么我們就做個(gè)JSON文件吧。
又有個(gè)問(wèn)題，在content字段里存的是比較復(fù)雜的文本數(shù)據(jù)，JSON文件處理字符串麻煩。所以我借用yaml，把數(shù)據(jù)卸載yml文件里，然后寫(xiě)個(gè)函數(shù)把結(jié)果翻譯成JSON

開(kāi)發(fā)階段

這里記錄幾個(gè)開(kāi)發(fā)過(guò)程中遇到的幾個(gè)問(wèn)題

獲取多條數(shù)據(jù)

因?yàn)樵崎_(kāi)發(fā)有對(duì)取數(shù)據(jù)做限制，客戶(hù)端請(qǐng)求數(shù)據(jù)最多每次20條，云函數(shù)每次100條。因?yàn)槲业男枨笫侨〕鏊性~條的基本數(shù)據(jù)，所以需要做點(diǎn)工作，我拿官方的代碼稍作修改：

// 云函數(shù)目錄/db_get_many_record/index.js
const cloud = require("wx-server-sdk")
cloud.init()
const db = cloud.database()
const MAX_LIMIT = 100 // 云函數(shù)一次最多獲取100條數(shù)據(jù)

/**
 * 取出多條數(shù)據(jù)
 * wx.cloud.callFunction({
    name: "db_get_many_record",
    data: {
      collection: "vocabulary",
      field: {
        name: true,
        tags: true
      },
    }
  }).then().catch()
 */
exports.main = async (event, context) => {
  const { collection = "", where, field } = event
  let commond = db.collection(collection)

  if (collection === ""){
    return;
  }
  if(where){
    commond = commond.where(where)
  }

  // 先取出集合記錄總數(shù)
  const { total } = await commond.count()
  // 計(jì)算需分幾次取
  const batchTimes = Math.ceil(total / 100)
  // 承載所有讀操作的 promise 的數(shù)組
  const tasks = []
  
  if (field) {
    commond = commond.field(field)
  }
  for (let i = 0; i < batchTimes; i++) {
    const promise = commond.skip(i * MAX_LIMIT).limit(MAX_LIMIT).get()
    tasks.push(promise)
  }
  // 等待所有
  return (await Promise.all(tasks)).reduce((acc, cur) => {
    return {
      data: acc.data.concat(cur.data),
      errMsg: acc.errMsg,
    }
  })
}

換存數(shù)據(jù)

為了減少請(qǐng)求的次數(shù)，提示性能，緩存數(shù)據(jù)是必要的。我利用app.globalData，和微信提供的Storage能力。
本來(lái)是想用Map類(lèi)型來(lái)做數(shù)據(jù)存儲(chǔ)的，但是Storage不支持這種數(shù)據(jù)類(lèi)型。

富文本內(nèi)容

內(nèi)容是分段落的，但是小程序本身是不支持html標(biāo)簽的，但還好有個(gè)rich-text的組件可以用。
如何把自己收集的內(nèi)容翻譯成html的內(nèi)容？寫(xiě)個(gè)腳本遍歷下。當(dāng)然后期會(huì)寫(xiě)個(gè)可視化的界面來(lái)管理內(nèi)容。

const fs = require("fs");

const readYaml = require("read-yaml");
readYaml("./data.yml", function(err, data) {
  if (err) throw err;
  // 處理content內(nèi)容
  let result = data.map(item => {
    let _content = item.content.split(/[
]/).map(item => {
      return "" + item + ""
    })
    item.content = _content.join("")
    return item
  });

  fs.writeFileSync("./result.json", JSON.stringify(result));
});

補(bǔ)充 總結(jié)目前小程序云開(kāi)發(fā)會(huì)用到的代碼

const db = wx.cloud.database()
const _ = db.command
const xxCollection = db.collection("collection")

/////////////////////////////////////// 查詢(xún)記錄 ///////////////////////////////////////
xxCollection.doc("id").get()
// ID查詢(xún)
db.collection("collection").doc("id").get().then(res => {}).catch(error => {})
// 條件查詢(xún)
db.collection("collection").where({}).get()
db.collection("collection").where({name:_.eq("xxx")}).get() // _.eq  neq  lt  lte  gt  gte  in  nin  and  or
// 限制返回字段
db.collection("collection").where({}).field({name: true}).get()
// 排序
db.collection("collection").where({}).orderBy("field", "asc|desc").get()
// 分頁(yè)
db.collection("collection").where({}).skip(0).limit(10).get()
// 統(tǒng)計(jì)
db.collection("collection").where({}).count()

/////////////////////////////////////// 新增記錄 ///////////////////////////////////////
db.collection("collection").add({
  data:{
    update_at: db.serverDate(),
    location: db.Geo.Point(113, 23)
  }
})

/////////////////////////////////////// 更新數(shù)據(jù) ///////////////////////////////////////
db.collection("collection").where({}).update({})
db.collection("collection").doc("id").set({}) // 替換記錄
db.collection("collection").doc("id").update({
  data:{
    // _.inc(自增) _.set(更新對(duì)象使用) _.push _.pop _.shift _.unshift(數(shù)組)
  }
})

/////////////////////////////////////// 刪除數(shù)據(jù) ///////////////////////////////////////
db.collection("collection").doc("id").remove()
db.collection("collection").where({}).remove() // 目前只能在云函數(shù)里操作

//////////////////////////////////////// 文件 /////////////////////////////////////////
wx.chooseImage({
  success: chooseResult => {
    // 將圖片上傳至云存儲(chǔ)空間
    wx.cloud.uploadFile({
      // 指定上傳到的云路徑
      cloudPath: "my-photo.png",
      // 指定要上傳的文件的小程序臨時(shí)文件路徑
      filePath: chooseResult.tempFilePaths[0]
    })
  },
})
wx.cloud.downloadFile({
  fileID: "",
})
wx.cloud.deleteFile({
  fileID: "",
})
// 換取臨時(shí)鏈接
wx.cloud.getTempFileURL({
  fileList: [],
})

/////////////////////////////////////// 云函數(shù) ////////////////////////////////////////
wx.cloud.callFunction({
  name: "methodName", 
  data: {
    a: 12,
  },
  success: res => {},
  fail: error => {},
  complete: () => {}
})
wx.cloud.callFunction({
  name: "methodName",
  data: {
    a: 12,
  }
}).then(res => {}).catch(error => {})
// error: errCode errMsg

/////////////////////////////////////// 錯(cuò)誤參考 ///////////////////////////////////////
error => {
  let message;
  switch (error.errCode) {
    case -1:
      message = "通用錯(cuò)誤"
      break
    case -401001:
      message = "無(wú)權(quán)限使用 API"
      break
    case -401002:
      message = "API 傳入?yún)?shù)錯(cuò)誤"
      break
    case -401003:
      message = "API 傳入?yún)?shù)類(lèi)型錯(cuò)誤"
      break
    case -402001:
      message = "檢測(cè)到循環(huán)引用"
      break
    case -403001:
      message = "上傳的文件超出大小上限"
      break
    case -404001:
    case -404002:
    case -404003:
    case -404004:
    case -404005:
    case -404006:
    case -404007:
    case -404008:
    case -404009:
      message = "云函數(shù)調(diào)用失敗"
      break
    case -404010:
      message = "云函數(shù)執(zhí)行失敗"
      break
    case -601004:
      message = "無(wú)權(quán)限使用 API"
      break
    case -501001:
      message = "云端系統(tǒng)錯(cuò)誤"
      break
    case -501002:
      message = "云端響應(yīng)超時(shí)"
      break
    case -501003:
      message = "請(qǐng)求次數(shù)超出環(huán)境配額"
      break
    case -501004:
      message = "請(qǐng)求并發(fā)數(shù)超出環(huán)境配額"
      break
    case -501005:
      message = "環(huán)境信息異常"
      break
    case -501009:
      message = "操作的資源對(duì)象非法或不存在"
      break
    case -502001:
      message = "數(shù)據(jù)庫(kù)請(qǐng)求失敗"
      break
    case -502002:
      message = "非法的數(shù)據(jù)庫(kù)指令"
      break
    case -502003:
      message = "無(wú)權(quán)限操作數(shù)據(jù)庫(kù)"
      break
    case -502005:
      message = "集合不存在"
      break
    case -503001:
      message = "云文件請(qǐng)求失敗"
      break
    case -503002:
      message = "無(wú)權(quán)限訪問(wèn)云文件"
      break
    case -503003:
      message = "文件不存在"
      break
    case -504001:
      message = "云函數(shù)調(diào)用失敗"
      break
    case -504002:
      message = "云函數(shù)執(zhí)行失敗"
      break
  
    default:
      message = error.errMsg
      break
  }
}

總結(jié)

雖然初看小程序的語(yǔ)法和vue有點(diǎn)像，實(shí)際做起來(lái)，和想象的差太多，很多功能不支持，做起來(lái)不是那么順手

云開(kāi)發(fā)的能力也很有限，解決一點(diǎn)簡(jiǎn)單數(shù)據(jù)可以，稍微復(fù)雜點(diǎn)功能要自己用代碼實(shí)現(xiàn)

云服務(wù)器 GPU云服務(wù)器開(kāi)發(fā)小程序的語(yǔ)言小程序的開(kāi)發(fā)語(yǔ)言小程序的開(kāi)發(fā)原理免費(fèi)小程序的開(kāi)發(fā)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98389.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

cnTomato

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

六六云：韓國(guó)vps,韓國(guó)原生IP,六折起,解鎖韓國(guó)本土所有流媒體

閱讀 4457·2021-11-24 10:24
js禁止復(fù)制，右鍵，選擇，禁止另存為

閱讀 1445·2021-11-22 15:22
四足機(jī)器人——舵機(jī)控制

閱讀 2083·2021-11-17 09:33
什么是因特網(wǎng)主機(jī)的域名-什么是因特網(wǎng)主機(jī)的域名？

閱讀 2483·2021-09-22 15:29
css多種方式實(shí)現(xiàn)等高布局

閱讀 542·2019-08-30 15:55
2019前端最全面試題

閱讀 1687·2019-08-29 18:42
騰訊前端求職直播課——筆試篇

閱讀 2762·2019-08-29 12:55
Gatsby極速入門(mén)—添加博客文章列表（3）

閱讀 1806·2019-08-26 13:55

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

小程序-心理學(xué)辭典應(yīng)用開(kāi)發(fā)的心得

相關(guān)文章

一位程序員社畜的2021閑讀書(shū)單！

發(fā)表評(píng)論

0條評(píng)論

cnTomato

男|高級(jí)講師

TA的文章

六六云：韓國(guó)vps,韓國(guó)原生IP,六折起,解鎖韓國(guó)本土所有流媒體

js禁止復(fù)制，右鍵，選擇，禁止另存為

四足機(jī)器人——舵機(jī)控制

什么是因特網(wǎng)主機(jī)的域名-什么是因特網(wǎng)主機(jī)的域名？

css多種方式實(shí)現(xiàn)等高布局

2019前端最全面試題

騰訊前端求職直播課——筆試篇

Gatsby極速入門(mén)—添加博客文章列表（3）

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

小程序-心理學(xué)辭典應(yīng)用開(kāi)發(fā)的心得

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！