天空之城

  1. 演示源站天空之城

  2. 演示课程成品
    源站随着时间的推移可能会不断演变,而课程作品并不会一起跟着变化,所以作品跟你现在看到的源站不同是很正常的。

  3. 课程要求
    能够跟着老师练习一遍,理解业务需求及其实现过程,基本了解相关表达式的用法及其使用场景,不懂之处随时查阅文档。
    如果能够不看视频自己再做一遍就基本掌握了众触平台了。

  4. 手机版和桌面版的UI分别设计,互不影响,共用后端数据

  5. 克隆后端数据
    网站跑起来需要一定量的数据,花太多时间去注册大量用户并上传图片视频不太现实,所以此课程从已有成品中克隆后端数据。此课程的数据有保存于product表的摄影作品和保存于user表的摄影师。
    外部CSS也会一起克隆,它是在源站的所有CSS文件去除无用样式后合并而成。此课程不讲解CSS样式的编写。

我们先做比较简单的摄影师列表页

  1. 导入移动版页面

  2. onReady事件

  3. 重点表达式
    $user.search(),$v,$r,forEach()

  4. 数据组件

  5. 展示表达式

  6. 动态样式

  7. 数据组件嵌套

  8. 渲染条件

  9. 分页插件

  10. 桌面版页面

  1. 桌面版共享组件

    1. 页首菜单栏
      onMouseOver,onMouseOut,$event.keyCode

    2. 页脚

  2. 移动版共享组件

    1. 页首菜单栏

    2. 动态类名

  3. 页面间共享

作品详情页也简单

  1. 导入移动版页面

  2. 根节点数据源

  3. img resize与?x-oss-process=image/resize

  4. 渲染条件

  5. date().format()

  6. $c.user与$user.get()

  7. 数据组件展示作者

  8. 桌面版页面

  1. $product.search()

  2. grid/list样式变换:$v.style

  3. 渲染条件

  4. render()

  5. 统计当前摄影师所有作品被赞总数(复杂)
    $product.aggregate(),$match,$group,$sum,$字段,json里的变量:"($id)"
    $product.aggregate("被赞" + $id, json('[{"$match": {"auth": "($id)"}}, {"$group": {"_id": null, "total":{"$sum": "$y.like"}}}]'))

  6. 交叉观察器(IntersectionObserver)

  1. $exp,exc()

  2. 动态改变列数
    $w.Math,$w.innerWidth,apply()
    excs(),render()

  3. onResize()

  1. 数据组件:$c.arr,循环子组件下标、HTML元素

  2. $()

  3. 局部表达式$exp赋值给页面变量$v

  4. 相同search()不重复执行,直接返回上次的结果

  5. $user.search(),$l,$l.users,$in

  6. 动态改变列数

  7. onInit(),onResize()

  8. 正在加载图标
    $v.loading,render()

  1. $product.distinct()

  2. $w.IntersectionObserver()
    func(),$arg,$$(),observe()

  3. 自定义属性:data-tag,dataset

  4. timeout()

  1. 移动版和桌面版添加共享组件

  2. 使用swiperjs外部插件

  3. 按要求准备HTML结构,数据组件,静态数据

  4. 挂载组件或onReady:
    load(),new()

  1. $c.obj,keys(),slice()

  2. onReady:
    $product.search(),$v.O.skip,$v.O.limit

  3. $l,$l.users,$user.search(),$in

  4. 交叉观察器(IntersectionObserver)

  1. $c.arr

  2. forEach,$exp,$product.search(),$user.search()

  3. $v.slice,$parent,$x,slice()

  1. $(),firstChild

  2. 数据组件,HTML元素

  3. $c.obj,keys()

  4. $product.distinct()

  5. 引号嵌套时使用反义符

  6. $exists

  1. 桌面版标签页
    动态改变列数

  2. 移动版标签页
    $w.document.title
    无数据源的数据组件
    交叉观察器

  1. 浏览量

  2. $c.exp.onReady

  3. 重点表达式
    $product.modify(),$V,localStorage(),$id,stopIf(),$inc

  4. 点赞

  1. 搜索作品

  2. 搜索用户

  3. 动态改变列数

  4. 正在加载图标
    $v.loading,render()

  5. 交叉观察器

  1. 使用账号插件(zp133)注册和登陆账号

  2. $me.logout()
    必要时退出前先跳转:go()

  1. 重点表达式
    $xtk.modify(),$c.me,$me.get(),$inc,$pull,$pullAll,$push,$addToSet

  2. 共享表达式
    $c.exp,exc()

  1. 在”我的“页上传个人封面
    upload(),$user.modify(),$el.nextElementSibling,file type input,onChange,$el.files

  2. 自定义属性
    "accept": ".jpg, .png, .jpeg"

  3. 上传个人头像(点”编辑“头像或”修改个人信息“)
    预览而不上传:生成预览图,$w.URL.createObjectURL()
    backgroundImage URL的顺序

  1. 表单form
    表单名,表单初始数据,查看当前表单数据:更多属性或$f.表单名

  2. input输入
    字段名,类型

  3. 单选框
    透明radio input,表单赋值
    单选框插件开箱即用简单便捷

  4. 下拉框
    只读input,使用数据组件来渲染下拉列表,表单赋值
    下拉框插件开箱即用简单便捷

  5. Textarea
    字段名,行数

  6. 社交账号
    input动态字段名

  7. 保存
    上传个人头像,$user.modify(),清除$v.file和$v.thumb

  1. 表单form
    挂载事件里赋值或静态初始数据,强调数组字段

  2. 标签输入
    数据组件渲染标签项,点击切换:includes,splice,indexOf,push
    数据组件渲染已选标签数组
    input,临时字段名 _tag(保存时删除),$event.keyCode

  3. 拍摄设备
    嵌套数据组件渲染二级选项列表
    $exp静态对象
    onMouseOver,onMouseOut,addClass(),removeClass()

  4. 选择多张图片
    自定义属性:multiple
    转换成数组:$w.Array.from($el.files)

  5. 待上传图片列表
    预览图,$w.URL.createObjectURL()
    类名:上传动画

  6. 拖拽上传
    addEventListener(),func(),$arg

  7. 发布图片
    addRemoveClass(),filter(),$ext
    status,onProgress percent,调低网速体验进度圈;掐掉网络体验上传失败,点击重传。
    naturalWidth,naturalHeight,onSuccess url

  8. $product.create(),$user.modify(),$inc

  1. 选择视频
    自定义属性:accept
    转换成数组:$w.Array.from($el.files)

  2. 拖放视频

  3. 选择封面

  4. 发布视频
    duration,videoWidth,videoHeight
    上传封面

  1. 数据库管理,使自己上传的作品在某个页面显示

  2. 资源管理

  3. 流量统计

  4. 搜索缓存,清缓存

  1. 使用默认基本配置

  2. 放宽$user.get()的字段限定
    okIf(1, "wx.nickname wx.headimgurl") => okIf(1, "x y")

  3. 放宽$user.search()的字段限定

    option.select = "wx.nickname wx.headimgurl" => option.select = "x y"

  4. 放松$product.modify()和$user.modify()的权限
    ngIf(isModifyY) => okIf(isModifyY && !updater.$inc.keys().find('!$x.startsWith("y.")'))
    允许任何人通过浏览/点赞/收藏摄影照片增加其浏览/点赞/收藏量(y.),但不可更改摄影师自身的用户数据(x.)
    允许任何人通过关注摄影师增加其粉丝数(y.),但不可更改摄影师自身的用户数据(x.)

  5. 收紧$xtk.modify()的权限,只允许修改自己的收藏和关注记录
    ngIf(user._id != key)

  6. 完全禁止$xdb.modify(),整个习作都是通过$xtk来操作的
    ngIf(1)

Make in ZC APP Platform