天空之城
演示源站天空之城
演示课程成品
源站随着时间的推移可能会不断演变，而课程作品并不会一起跟着变化，所以作品跟你现在看到的源站不同是很正常的。课程要求
能够跟着老师练习一遍，理解业务需求及其实现过程，基本了解相关表达式的用法及其使用场景，不懂之处随时查阅文档。
如果能够不看视频自己再做一遍就基本掌握了众触平台了。手机版和桌面版的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)