最近要做小程序词典，需要用到思维导图，无奈小程序没有相应的组件，只能使用网页。
客户目标
这是网页版的，他要做手机版
客户资料
我的天竟然是word文档，我只好用python处理成云开发数据
1.将其处理成utf-8的txt
with open('book/2音变.txt', encoding='utf-8') as f:
with open('book/2音变2.txt','w', encoding='utf-8') as f2:
for i in f.readlines():
i = i.strip('●')
f2.write(i)
with open('book/2音变2.txt', encoding='utf-8') as f:
with open('book/2音变3.txt', 'w', encoding='utf-8') as f2:
for i in f.readlines():
if i == '\n':
i = i.strip('\n')
f2.write(i)
2. 再处理成云开发数据库所需的数据
ñáéóíúü 苦这个7个天杀的西班牙文久矣，其中踩了好多格式的坑
如，无论读写都要encoding='utf-8'
而且正则表达式我实在搞不定了，找了segmentFault和stackOverflow的大神，
妈的硬生生啃下了捕获分组、循环推导式，with open as f等等的概念。
我为什么要学这些东西，吐血三升，在这之前我对正则表达式只停留在[a-zA-Z]而已，而且还是office里的宏。。。
# coding=utf-8
import re
import json
def extract_case(text):
return [dict(zip(['word', 'meaning'], i.split(maxsplit=1))) for i in text.split('\n') if i]
with open('book/词根.txt', encoding='utf-8') as f:
with open('book/词根.json', 'w', encoding='utf-8') as f2:
exp = (
'\d+\..*?([a-z|ñáéóíúü].*)-(.*)\n'
'((?:\**?[a-z|ñáéóíúü]+.*?\n)+)'
)
contents = re.findall(exp, f.read())
arr = []
for content in contents:
root, meaning, rootList = content
arr.append({
'root': root,
'meaning': meaning,
'rootList': extract_case(rootList)
})
json.dump(arr, f2, ensure_ascii=False)
处理后的数据格式
{"data":[{"root": "act(u)-，ag", "meaning": "做 （拉丁语agere做/引导，分词为actus）", "rootList": [{"word": "acto", "meaning": "（act-做） m.行动，行为；动作"}, {"word": "acción", "meaning": "（act-；-ión名词后缀，并使前面的t腭化为c） f.行动，活动；作用；股份"}, {"word": "reacción", "meaning": "（re-再次、相反；见acción行动） f.反应（状态）；反动；保守"}, {"word": "reaccionar", "meaning": "（reacción反应；-ar动词后缀） intr.有反应，作出反应"}, {"word": "activo,", "meaning": "va （act-做；-ivo形容词后缀） adj.活跃的；主动的；积极的"}, {"word": "actividad（activo活跃的；-idad名词后缀）", "meaning": "f.活动；灵敏；能动性；积极性"}, {"word": "*activar", "meaning": "（activo活跃的；-ar动词后缀） tr.使活动，使活泼，加快"}, {"word": "*inactivo,", "meaning": "va （in-表否定；activo活跃的） adj.不活动的，不活跃的"}, {"word": "actor", "meaning": "（见acto行动、动作；-or人⇒在舞台上做动作的人） m.男演员"}, {"word": "actriz", "meaning": "（act-做；-triz表女性⇒演戏的女性） f.女演员"}, {"word": "actuar", "meaning": "（见acto行动、动作；-ar动词后缀⇒在舞台上做动作） intr.表演，演出；担任，充当 （某角色） tr.使运动，使运转 "}, {"word": "actuación", "meaning": "（actuar表演；-ción名词后缀） f.表演，演出；活动"},
3. 导入到云开发数据库
4.小程序jsmind嵌入
一开始客户说的是竖屏，可是竖屏这么点地方肿么放得下思维导图？
横屏走起
ps. 吐槽一句，为什么从ide复制过来的代码连黑色背景也复制过来了，讨厌。。。
用的是自己的域名，而且还要在腾讯云里修改https://www.junanapp.com 为信任域名（卡了好久），感觉血亏。
<web-view src="https://www.junanapp.com"></web-view>
json
"pageOrientation":"landscape"
好久没用云开发的网页sdk了，很多语句都改了慢慢适应中
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="style/jsmind.css" />
<script type="text/javascript" src="js/jsmind.js"></script>
<script type="text/javascript" src="js/jsmind.draggable.js"></script>
<script src="//imgcache.qq.com/qcloud/cloudbase-js-sdk/1.5.0/cloudbase.full.js"></script>
</head>
<body>
<div id="jsmind_container"></div>
<script type="text/javascript">
var app = cloudbase.init({
env: 'rcontrol-2uxif'
})
var p1 = new Promise((rs)=>{
app.auth({
persistence: "session"
})
.anonymousAuthProvider()
.signIn()
.then((e) => {
var db = app.database()
var test = db.collection('one')
test.get().then(res => {
res = res.data[0].data[0]
var secondArr = res[0]
var prefix = res.prefix
var prototype = res.prototype.intro
var variation = res.variation.intro
var variationList = res.variation.list
var prototypeList = res.prototype.list
var arr = {
id: prefix,
topic: prefix,
children: [{
id: prototype,
topic: prototype,
},
{
id: variation,
topic:variation
}
]
}
// rs = arr
rs(arr)
// console.log(rs)
// // console.log(arr)
// console.log('我在里面')
})
// 登录成功
})
.catch((err)=> {
console.log(err)
// 登录失败
});
})
Promise.all([p1]).then(res=>{
var finalRes = res[0]
console.log('finalRes',finalRes)
var mind = {
"meta": {
"name": "jsMind-demo-tree",
"author": "hizzgdev@163.com",
"version": "0.2"
},
/* 数据格式声明 */
"format": "node_tree",
/* 数据内容 */
"data":finalRes
};
var options = {
container: 'jsmind_container',
theme: 'orange',
editable: true
};
var jm = new jsMind(options);
jm.show(mind);
})
</script>
</body>
</html>
今天聊了一下，这么点word文档客户竟然要求分n级，才能适配到jsmind里。又要修改人生苦短语言了，头都要爆掉了好吗。。。
痛并快乐着，未完待续。。
六一儿童节第二天
