wechat_h5plus
所属分类:android开发
开发工具:JavaScript
文件大小:408KB
下载次数:7
上传日期:2019-04-24 17:44:51
上 传 者:
jamesp
说明: 利用Html5Plus技术开发的类微信app,同时支持iOS和Android
(Using Html5Plus technology to develop a Wechat-like app, while supporting iOS and Android)
文件列表:
.project (778, 2018-10-20)
css (0, 2018-10-20)
css\common.css (1418, 2018-10-20)
css\mui.css (96870, 2018-07-13)
css\mui.min.css (75624, 2018-07-13)
css\mui.picker.min.css (5056, 2018-10-24)
fonts (0, 2018-10-10)
fonts\iconfont.css (2058, 2018-10-26)
fonts\iconfont.svg (26706, 2018-10-24)
fonts\iconfont.ttf (10240, 2018-10-27)
fonts\mui.ttf (29884, 2018-07-18)
images (0, 2018-09-05)
img (0, 2018-10-10)
img\avatar_def.png (19989, 2018-08-02)
js (0, 2018-10-20)
js\api.js (2381, 2018-09-21)
js\appconfig.js (9674, 2018-10-28)
js\libs (0, 2018-10-10)
js\libs\dateutils.js (3787, 2018-10-25)
js\libs\doT.min.js (3416, 2018-07-16)
js\libs\fx.js (4965, 2018-07-26)
js\libs\getscript.js (1567, 2018-08-16)
js\libs\lru.js (9271, 2018-09-07)
js\libs\mui.picker.x.js (34191, 2018-10-24)
js\libs\pack-loader.js (3644, 2018-09-10)
js\libs\pinyin_dict_firstletter.js (27952, 2018-08-02)
js\libs\pinyin_notone.js (28141, 2018-08-02)
js\libs\push-client-1.0.js (295586, 2018-08-14)
js\libs\push-sender.js (1630, 2018-10-04)
js\libs\sortable.1.7.0.min.js (15797, 2018-09-02)
js\libs\storagectx.js (4284, 2018-09-21)
js\libs\storageex.js (1922, 2018-09-07)
js\libs\zepto.min.js (26386, 2018-07-22)
js\mui.x.js (257853, 2018-10-13)
js\plugin (0, 2018-10-21)
js\plugin\ntextarea.js (737, 2018-10-21)
manifest.json (14278, 2018-10-28)
pages (0, 2018-10-20)
pages\auth (0, 2018-10-10)
... ...
FIXME resend会导致chat的msg list丢消息(只剩下resend的了)
## 微弟弟定位
聊天+GTD,效率工具
社会化任务管理系统,适用于家庭,学生,团队,工作。。
3项功能:待办管理,文档建设(文档生命期演化问题),共识沟通
一个基本会话消息由:
文音图视(tspv), 时间因子, 相关人员流程, 构成
## 流程
### 聊天流程
等同微信
#### 通讯录
#### 聊天记录
1. 本地记录
2. 同步远程记录
### GTD流程
列出事项,
评估耗时
设置时间要求,重复方式
也就是设置提醒时间
安排优先级
责任人(可无,单个,多个(限定人数与否);可指定到人(列出,全部+排除),可自行认领)
附加信息(地点,资料)
提醒方式:时间/地点提醒
自动帮你安排执行
各种带开始时间,最后期限,时长的小程序
每个小组可以有一个进度
人的维度,有个完成率(权限?
hash视图#
at参与@
--and类型&
issue转proj
### GTD
首先是聊天,在聊天中做事,
First is communicate(means emotion/coop exchange)
second is organize(issues/contents)
third is context(team/loc/conversation...)
factors: priority/importance/scores
non-personal(every issue to group, every body see it)
一个项目,team,完成一个目标
涉及到各种交流协作,任务分解,事务流转,计划依赖,监督check/review-情感互动,内容整理(引用)
第一:直观:缓解拖延压力(事情摆在那)
第二:方便:all are chat
第三:social:watch/coop
第四:依赖,人之间,issues之间
issues:today/upcoming,anytime,someday
locationed
anytime,someday咋显示,定期review/太老发话(一批老人出来发话)
做好一件事,是否主动通知所有人
### 认证
服务端无session状态,客户端根据加密的_authtoken(uid)随时调用。
每一个uid/topic都是加密过的token=md5(uid/topic, id, ts, salt)
#### push.imid
push目标是imid:topic/uid, 同一个目标imid,不同用户拿到的都是加密过的,pushserver会解密再push
#### 远程数据同步问题
FIXME 每次登录后,将远程需要同步的数据(联系人,组成员,todos等)时间戳下发,本地校验决定是否要刷新本地
### 加好友/邀请
0 刚注册的时候,自动列出那些已上传我手机号的好友
1 扫码加好友
直接扫码
2 添加手机联系人 -》上传通讯录找朋友
3 输入手机号搜索-》邀请/添加
4 由微信邀请,发送url邀请
发给个人或群
对方打开,可直接注册与我会话,更进一步,请下载app。。。!!
邀请加好友/邀请进群
### 抄送server
某些消息(例如加好友消息)需要抄送server.uid,
### 消息体
```javascript
// TODO 防止恶意篡改数据(理论上他可以任意改自己的信息,所以没必要check真实性,只过滤禁止内容即可
// 严格不能改的数据,做个签名即可,例如id,type
// https://crackstation.net/hashing-security.htm
// https://github.com/bitwiseshiftleft/sjcl
{ // push: 的detail
"msg": { // 若有chat,则此msg入chat queue
"id",
"t", // msgt;不同chat type下的msgt会有限制,要检查
"a", // 可选,action不同msgt可能有多个动作
"am", // action msg, 用于显示
"d", // data {'id'/*若存在,则为有状态的实体数据*/, 'merged'/*是否已被合并*/}
"s", // 私语消息
"ts", // 时间戳
"p", // push状态:true未发成功
"f": { // from 消息来自哪个user,
"id",
"m", // 是否我自己
"imid":{"uid"}, // imid为uid的签名,无法伪造。(最严格可以搞个内容签名
"a", // avatar
"n", // name
"d", // address
"s", // 个人签名
"f", // 好友状态: undefined:未知, -2:他拒绝;-1:我拒绝;0:我待定;1互好友;2我过期;3我等他答复
}
},
"chat":{ // 可选,一个会话就是一个msg queue,null则msg不入queue
"id",
"t", // type: chat, team, vote, ...
"imid":{"uid/topic"}, // imid和对应的id/type一定要检查,这个无法伪造(最严格可以搞个内容签名
"a", // avatar
"n", // name,
"l", // lastMsg(NOTE: 需要escape html),由chatt和msgt共同生成l
"ts", // 时间戳
"h", // hidden
},
"to":{ // 发消息时必填,收消息时无此字段
"uid/topic",
"nonotif", // 是否不推送notification, 默认false, FIXME pushserver改造
"cc2AppServer" // 是否抄送给app server,例如加好友, 默认false FIXME pushserver改造
}
// 其他字段都可选
}
```
其中,puser server会对uid/topic加密转换;
某些msgt会走notifi,有些不走
### chat.id和msg.id生成
由from.id和ts拼成,能保证唯一(因为同一个人不能同时搞2个chat或msg)
若有发送者恶意构造相同id咋办:自承担重复的影响
### msgt
msg type, 简称msgt,表示各种消息类型
一个msgt打一个包,包含如下要素:
1. ininput模板(创建后先进input box,再发送
1. inchat模板(chat消息必选
2. inchat操作(可选
3. clickview模板(可选
4. clickview操作(可选
5. onpush(msg, showing, data)处理(可选,专处理push来的一刻,showing:当前chat是否正打开
6. mergeMe(可选,将传入msg合并给ininput内的消息
7. merge2me(可选,将ininput内的消息合并给传入msg
### mapp
一个小程序对应并创建一个msgt
### ininput的组合消息
例如发一个任务,组合地址,组合@某人
#### 组合原则
1 插入前向前获取吸附,直到无法吸附停止,
2 插入后,向前1个被吸附--如何显示?加一节模式
#### 组合消息流程
1 调用mapp,传入当前的ininput,供mapp处理
2 mapp执行后,返回新的msgs数组
3 msgs更新ininput
4 发送ininput的msgs
### chatt
chat type, 表示各种chat类型
1. chats item模板
某类chat一个item vs 某个msg一个item
默认只显示最多4个将要的msg,往上可以查看当天要做的,以及pin的
item可以拖动,未完成的挤占普通chat,一根now线
2. chat.menu
3. chat.bottom
5. chat.top bar
4. msg.onpush
### 小组创建/邀请
1 from:invitor to:team lead, msgt:teaming, data:invitee, chat:team
2 (if accept)from:lead, to:team, msgt:teamed, data:invitees/invitor, chat: team
3 from:lead, to:invitees, msgt:teamed, data:invitees/invitor, chat:team,ccApp
4 invitee sub topic
第2步只能lead发,成员发的无效
members信息在app server
5 from x, to y, chat team的限制: x非lead时,y只能是lead;x lead时不限制(appServer检查)
### 各种小程序
#### 待办(TODO)设计
##### 时间因子
包括stime, etime, sday, eday, repeat, _roundStart, _roundEnd, tz
全部缺失,表示无时间因子
缺失的需要自动补齐,补齐属性前加_, 例如stime的补齐属性为_stime
###### 时区
转换公式:gmt-local=tz
注意Date.parse('2018-09-09 00:00')得到local的ts
Date.parse('2018-09-09')得到的是gmt的ts
##### 本地保存
所有公共的待办,每人都保存一份
##### server配合
提醒工作由server端完成,服务端只根据create时间和start时间的时长,来设置提醒(避免手机时间时差等各种误差)
所有待办,server端都保存
#### 课程表? TODO
#### 任务
##### msg.d结构
```javascript
msg.a: // 对task的操作:create,edit,own,watch,,,
msg.d: {
id, // taskId
v, // version: server端发现version不最新的话,就拒绝消息,并帮发送者更新到最新版
cid, // chat id, 创建后不可改,可null(表示私有待办),分享后的待办只读(不能执行)
cday, // 创建日期
ctime, // 创建时间
n, // 标题
eday, // 结束日期
etime, // gmt结束时间
spin, // start time pin
epin, // deadline
duration, // 评估时长
repeat, // 周重复位
single, // 重复一次?
owner, // 指派给
creater,
watchs, // 关注人
comments, // 评论(图文
loc // 地址
}
```
有大致时间安排的正事,
创建时:name,endtime(pin),预估时间,重复周期组成
编辑时可以,评论附件,关注,
进input框,发送时生成
最后期限的,会主动闹钟提醒
#### 定时闹钟
#### 倒计时
#### 正计时秒表
#### 事件,开始/结束时间
### 主要围绕gtd来做
围绕一个团体,若干项目各项事宜的开展,来提供便利的工具
#### 事务,安排,todo
##### 有无时间点
##### 周期性
#### 资料,共享,记录,整理,文档空间(文档附件归入空间,预览评论版本管理。。),图文音视...
#### 沟通,协商,表决,共识
#### 时间视角,项目视角,
更进一步的扩展消息类型,受chats/chat之外的其他view关心,
某些特殊类型的消息,要抄送服务器
### socket.io push js集成
1. 利用js来维护online的透传
2. 集成native sdk(已做到华为,小米,友盟,谷歌,苹果集成),只负责拿到deviceToken(需要与js的uid对应)
4. deviceToken交给js,js来注册(@see SocketIOProxyClient.sendTokenToServer)
5. FIXME 离线时,notification推送,并激活相应的h5 page
6. 回到1
#### app启动顺序
1. local显示(所有上次disconnect之前的)
2. push listener启动,pushClient启动(必须listener好了之后再开client),接受push
3. remote获取并显示
### socket.io push sdk集成??
1. sdk集成
2. js api提供status,send,on push,notification唤起页面等
3. native如何推送给js?
### socket.io 改造
1. 某些消息要抄送app
2. imid加解密
3. team chat from/to检查(至少有一个是lead)
4. msgt=='teamed'时,msg.d.users.imid需要过滤
5. ttlService.maxTllPacketPerTopic: 表示最多存多少条消息,TODO 目前是最后10条
### TODO
#### input输入框不支持自动换行咋办
#### pushid/uid/topic加密,防止陌生人乱发消息
#### 做一个html合并工具:当js/css只被引入一次,则合并进html,否则保留
#### push.io 改需求:
不论pushid或topic/tag, receiver在线就push,否则就notify(无device也push)
现有行为是: push的必走push(有ttl)
notify的:无device注册就放弃;无device.token就push;mi/huawei/apn/google必走;umeng的push+noti
FIXME, cleanInput(lastMsg)
FIXME 离线的话,消息待发
FIXME 发送失败/超时,重发,没回车的内容放txtbox
FIXME inviteUrl邀请页面h5
FIXME 发短信api写到 app server,根据imid流控
TODO 头像缓存本地
FIXME secretmsg样式
FIXME emoji兼容问题
FIXME 通讯录加我自己为好友
FIXME 用户改自己属性咋通知大家, 发消息时?
TODO 所有msg右边加个爱心
TODO 个人页面:显示签到,等级,等统计信息
TODO 大厅概念,PK概念
FIXME 重新show的msg没变成resend;to==null的本地消息不需要resend
FIXME 组人数太多,就显示昵称在头像边上
FIXME 我发给他的chatId=-meId, 他发给我的是-heId,成2个chat了咋办
FIXME 删除chat item需要确认一下
FIXME 从消息添加生成的mapp,要提供回到消息上下文的功能
### 代码
MUI项目中touchend事件在某些时候不触发
示例图
如图所示,在iphone6, 系统ios9.3上,在以下情况中touchend事件不触发:
1. 向上划出屏幕时,touchend事件不触发;
2. 在当前webview中append一个底部有空间的webview,从append的webview中开始滑动,
滑动到外层webview,以及划出屏幕时,均不触发touchend事件。
解决方案:
根据手指触摸位置,判断是否接近屏幕外部,手动触发toucend需要处理的业务逻辑。
参考mui里scroll控件的部分hack代码
var detail = e.detail;
if (this.options.scrollY || detail.direction === 'up' || detail.direction === 'down') { //如果是竖向滚动或手势方向是上或下
//ios8 hack
if ($.os.ios && parseFloat($.os.version) >= 8) { //多webview时,离开当前webview会导致后续touch事件不触发
var clientY = detail.gesture.touches[0].clientY;
//下拉刷新 or 上拉加载
if ((clientY + 10) > window.innerHeight || clientY < 10) {
this.resetPosition(this.options.bounceTime);
return;
}
}
}
### wdd架构
app由3个基础场景构成:
1. index.html,
所有msg receive(pushClient)的中心
订阅topics维护
兼负责auth/storageCtx安全会话维护
2. chats.html
msg预处理onpush
chat对象以及链表维护保存
链表显示操作
3. chat.html
msg队列维护保存
msg显示操作
chat view维护
new msg send(pushSender)操作
4. 消息流程
index.msg->chats.onpush->chats.save->chats.show->chat.save->chat.show->chat.pushSender.send
5. 待办
TODO 下拉界面,进入搜索和标签切换
### 设计模式
标准的前端app,由entry event(打开网址)触发,做如下事情:
1. init doms
2. init data doms from templates
3. bind handlers to events(dom events & server events & storage events ...)
类负责:
1. model lifecycle
2. template
3. event handler
### 关于类
因为chat相关数据维护太分散(team:topic,members..),不同类型处理方式要重写,所以用类;
msg数据很集中(就一条),维护流程很单一,所以不建类
近期下载者:
相关文件:
收藏者: