天空之城
演示源站天空之城
演示课程成品
源站随着时间的推移可能会不断演变,而课程作品并不会一起跟着变化,所以作品跟你现在看到的源站不同是很正常的。课程要求
能够跟着老师练习一遍,理解业务需求及其实现过程,基本了解相关表达式的用法及其使用场景,不懂之处随时查阅文档。
如果能够不看视频自己再做一遍就基本掌握了众触平台了。手机版和桌面版的UI分别设计,互不影响,共用后端数据
克隆后端数据
网站跑起来需要一定量的数据,花太多时间去注册大量用户并上传图片视频不太现实,所以此课程从已有成品中克隆后端数据。此课程的数据有保存于product
表的摄影作品和保存于user
表的摄影师。
外部CSS也会一起克隆,它是在源站的所有CSS文件去除无用样式后合并而成。此课程不讲解CSS样式的编写。
我们先做比较简单的摄影师列表页
导入移动版页面
onReady事件
重点表达式
$user.search(),$v,$r,forEach()数据组件
展示表达式
动态样式
数据组件嵌套
渲染条件
分页插件
桌面版页面
桌面版共享组件
页首菜单栏
onMouseOver,onMouseOut,$event.keyCode页脚
移动版共享组件
页首菜单栏
动态类名
页面间共享
作品详情页也简单
导入移动版页面
根节点数据源
img resize与?x-oss-process=image/resize
渲染条件
date().format()
$c.user与$user.get()
数据组件展示作者
桌面版页面
$product.search()
grid/list样式变换:$v.style
渲染条件
render()
统计当前摄影师所有作品被赞总数(复杂)
$product.aggregate(),$match,$group,$sum,$字段,json里的变量:"($id)"
$product.aggregate("被赞" + $id, json('[{"$match": {"auth": "($id)"}}, {"$group": {"_id": null, "total":{"$sum": "$y.like"}}}]'))交叉观察器(IntersectionObserver)
$exp,exc()
动态改变列数
$w.Math,$w.innerWidth,apply()
excs(),render()onResize()
数据组件:$c.arr,循环子组件下标、HTML元素
$()
局部表达式$exp赋值给页面变量$v
相同search()不重复执行,直接返回上次的结果
$user.search(),$l,$l.users,$in
动态改变列数
onInit(),onResize()
正在加载图标
$v.loading,render()
$product.distinct()
$w.IntersectionObserver()
func(),$arg,$$(),observe()自定义属性:data-tag,dataset
timeout()
移动版和桌面版添加共享组件
使用swiperjs外部插件
按要求准备HTML结构,数据组件,静态数据
挂载组件或onReady:
load(),new()
$c.obj,keys(),slice()
onReady:
$product.search(),$v.O.skip,$v.O.limit$l,$l.users,$user.search(),$in
交叉观察器(IntersectionObserver)
$c.arr
forEach,$exp,$product.search(),$user.search()
$v.slice,$parent,$x,slice()
$(),firstChild
数据组件,HTML元素
$c.obj,keys()
$product.distinct()
引号嵌套时使用反义符
$exists
桌面版标签页
动态改变列数移动版标签页
$w.document.title
无数据源的数据组件
交叉观察器
浏览量
$c.exp.onReady
重点表达式
$product.modify(),$V,localStorage(),$id,stopIf(),$inc点赞
搜索作品
搜索用户
动态改变列数
正在加载图标
$v.loading,render()交叉观察器
使用账号插件(zp133)注册和登陆账号
$me.logout()
必要时退出前先跳转:go()
重点表达式
$xtk.modify(),$c.me,$me.get(),$inc,$pull,$pullAll,$push,$addToSet共享表达式
$c.exp,exc()
在”我的“页上传个人封面
upload(),$user.modify(),$el.nextElementSibling,file type input,onChange,$el.files自定义属性
"accept": ".jpg, .png, .jpeg"上传个人头像(点”编辑“头像或”修改个人信息“)
预览而不上传:生成预览图,$w.URL.createObjectURL()
backgroundImage URL的顺序
表单form
表单名,表单初始数据,查看当前表单数据:更多属性或$f.表单名input输入
字段名,类型单选框
透明radio input,表单赋值
单选框插件开箱即用简单便捷下拉框
只读input,使用数据组件来渲染下拉列表,表单赋值
下拉框插件开箱即用简单便捷Textarea
字段名,行数社交账号
input动态字段名保存
上传个人头像,$user.modify(),清除$v.file和$v.thumb
表单form
挂载事件里赋值或静态初始数据,强调数组字段标签输入
数据组件渲染标签项,点击切换:includes,splice,indexOf,push
数据组件渲染已选标签数组
input,临时字段名 _tag(保存时删除),$event.keyCode拍摄设备
嵌套数据组件渲染二级选项列表
$exp静态对象
onMouseOver,onMouseOut,addClass(),removeClass()选择多张图片
自定义属性:multiple
转换成数组:$w.Array.from($el.files)待上传图片列表
预览图,$w.URL.createObjectURL()
类名:上传动画拖拽上传
addEventListener(),func(),$arg发布图片
addRemoveClass(),filter(),$ext
status,onProgress percent,调低网速体验进度圈;掐掉网络体验上传失败,点击重传。
naturalWidth,naturalHeight,onSuccess url$product.create(),$user.modify(),$inc
选择视频
自定义属性:accept
转换成数组:$w.Array.from($el.files)拖放视频
选择封面
发布视频
duration,videoWidth,videoHeight
上传封面
数据库管理,使自己上传的作品在某个页面显示
资源管理
流量统计
搜索缓存,清缓存
使用默认基本配置
放宽$user.get()的字段限定
okIf(1, "wx.nickname wx.headimgurl") => okIf(1, "x y")放宽$user.search()的字段限定
option.select = "wx.nickname wx.headimgurl" => option.select = "x y"
放松$product.modify()和$user.modify()的权限
ngIf(isModifyY) => okIf(isModifyY && !updater.$inc.keys().find('!$x.startsWith("y.")'))
允许任何人通过浏览/点赞/收藏摄影照片增加其浏览/点赞/收藏量(y.),但不可更改摄影师自身的用户数据(x.)
允许任何人通过关注摄影师增加其粉丝数(y.),但不可更改摄影师自身的用户数据(x.)收紧$xtk.modify()的权限,只允许修改自己的收藏和关注记录
ngIf(user._id != key)完全禁止$xdb.modify(),整个习作都是通过$xtk来操作的
ngIf(1)