第一步 项目配置

一、编写app.json

对整个项目的公共配置

1、pages：配置页面路径（必须），列出所有的页面的路径，所有存在的页面都需要在此写出，否则在页面跳转的时候会报出找不到页面的错误
2、window：窗口配置，配置导航及窗口的背景色和文字颜色，还有导航文字和是否允许窗口进行下拉刷新
3、tabBar：tab栏配置，配置tab栏背景色及出现位置，上边框的颜色（目前只支持黑或白），文字颜色及文字选中颜色，最核心的配置是list即tab栏的列表，官方规定最少2个，最多5个，每个列表项目可配置页面路径、文字、图标及选中时图标的地址
4、network：网络配置，配置网络请求、上传下载文件、socket连接的超时时间
5、debug：调试模式，建议开发时开启（true），可以看到页面注册、页面跳转及数据初始化的信息，另外报错的错误信息也会比较详细

1. {
2. "pages": [
3. "pages/popular/popular",
4. "pages/coming/coming",
5. "pages/top/top",
6. "pages/search/search",
7. "pages/filmDetail/filmDetail",
8. "pages/personDetail/personDetail",
9. "pages/searchResult/searchResult"
10. ],
11. "window": {
12. "navigationBarBackgroundColor": "#47a86c",
13. "navigationBarTextStyle": "white",
14. "navigationBarTitleText": "电影推荐",
15. "backgroundColor": "#fff",
16. "backgroundTextStyle": "dark"
17. },
18. "tabBar": {
19. "color": "#686868",
20. "selectedColor": "#47a86c",
21. "backgroundColor": "#ffffff",
22. "borderStyle": "white",
23. "list": [{
24. "pagePath": "pages/popular/popular",
25. "iconPath": "dist/images/popular_icon.png",
26. "selectedIconPath": "dist/images/popular_active_icon.png",
27. "text": "热映"
28. }, {
29. "pagePath": "pages/coming/coming",
30. "iconPath": "dist/images/coming_icon.png",
31. "selectedIconPath": "dist/images/coming_active_icon.png",
32. "text": "待映"
33. },{
34. "pagePath": "pages/search/search",
35. "iconPath": "dist/images/search_icon.png",
36. "selectedIconPath": "dist/images/search_active_icon.png",
37. "text": "搜索"
38. },
39. {
40. "pagePath": "pages/top/top",
41. "iconPath": "dist/images/top_icon.png",
42. "selectedIconPath": "dist/images/top_active_icon.png",
43. "text": "口碑"
44. }]
45. },
46. "networkTimeout": {
47. "request": 10000,
48. "downloadFile": 10000
49. },
50. "debug": true
51. }

二、确定目录结构

根据UI图，提取组件和公共样式/脚本，以及page的目录

• comm - 公用的脚本及样式
  • script - 公共脚本
    • config.js 配置信息 （单页数据量，城市等）
    • fetch.js 接口调用 （电影列表及详情，人物详情、搜索）
  • style - 公共样式
    • animation.wxss 动画
• component - 公用的组件
  • filmList - 电影列表
    • filmList.wxml - 组件结构
    • filmList.wxss - 组件样式
• dist - 静态资源
  • images 本地图片，主要存导航的图标 （样式中不可引用本地图像资源）
• pages - 页面
  • popular - 页面文件夹 （"popular"为自定义的页面名称，页面相关文件的文件名需与页面名相同）
    • popular.js 页面逻辑
    • popular.wxml 页面结构
    • popular.wxss 页面样式
    • popular.json 页面窗口配置 （可参考app.json中的window配置）
• app.js - 小程序整体逻辑 （初始化、显示、隐藏的事件，以及存放全局数据）
• app.json - 小程序公共配置
• app.wxss - 小程序公共样式

第二步 编写组件

电影列表

结构