title	speaker	date	transition	highlightStyle	theme
「微信小程序系列 Workshop 02」之框架 + 组件 + API 实战	Jimmy Lv & Rui Li	2017年01月13日	move	kimbie.light	green

nodeppt start -w by ksky521/nodePPT

[slide]

WeChat App Workshop 02

Total Time: 2 hours

吕靖 & 李睿

[slide]

Branches:

• master: only README to record scripts
• quickstart: from offical-demo, add necessary icons
• pages: added all pages and config tab icons
• workshop-section-*: implement page step by step
• ......

---

[slide]

0. Setup (env & developer account)

• reminder in jinshuju/invitation mail
• collect exsiting accounts @Xing @Chaowei
• join wechat group
• git@github.com:ThoughtWorksInc/wxapp-workshop.git

[slide]

1. Doc overview: 框架、API、组件

(10 mins)

[slide]

2. Offical demo and theory

(20 mins)

[slide]

App lifecycle

• 首次打开，小程序初始化

• 小程序初始化完成后，触发onShow事件

• 小程序被切换到后台（熄屏，切换APP等），触发onHide

• 小程序从后台切换到前台，再次触发onShow

• 小程序出错，触发onError

[slide]

Page lifecycle(vs React)

[slide]

API wx.doSth({ ...config })

• wx.login
• wx.getUserInfo
• data binding & initial data (vs Angular)

[slide]

[note] 逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。 [/note]

wxml -> vd -> dom

• wxml tags
• bindtap="handleTap"
• wxss rpx（responsive pixel）

[slide]

3. clarify requirements

@Xing (10 mins)

• #3 profile
• #1 position
• #2 job & apply
• #4 explore

[slide]

4. initial another three pages

(10 mins)

• Page api & config
• Page navigator
  • wx.navigateTo

[slide]

------ lunch time ------

[slide]

modify special pages deps on requirements

1. profile (wx.login wx.getUserInfo page-api)
2. user info input (form, button compoent)
3. position
   • onPullDownRefresh 当前共有 10 个职位
   • onShareAppMessage 分享给你的朋友