258资源分享网

第一步 项目配置一、编写app.json对整个项目的公共配置1、pages：配置页面路径（必须），列出所有的页面的路径，所有存在的页面都需要在此写出，否则在页面跳转的时候会报出找不 ...

第一步 项目配置 一、编写app.json

对整个项目的公共配置

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

{

"pages":[

"pages/popular/popular",

"pages/coming/coming",

"pages/top/top",

"pages/search/search",

"pages/filmDetail/filmDetail",

"pages/personDetail/personDetail",

"pages/searchResult/searchResult"

],

"window":{

"navigationBarBackgroundColor":"#47a86c",

"navigationBarTextStyle":"white",

"navigationBarTitleText":"电影推荐",

"backgroundColor":"#fff",

"backgroundTextStyle":"dark"

},

"tabBar":{

"color":"#686868",

"selectedColor":"#47a86c",

"backgroundColor":"#ffffff",

"borderStyle":"white",

"list":[{

"pagePath":"pages/popular/popular",

"iconPath":"dist/images/popular_icon.png",

"selectedIconPath":"dist/images/popular_active_icon.png",

"text":"热映"

},{

"pagePath":"pages/coming/coming",

"iconPath":"dist/images/coming_icon.png",

"selectedIconPath":"dist/images/coming_active_icon.png",

"text":"待映"

},{

"pagePath":"pages/search/search",

"iconPath":"dist/images/search_icon.png",

"selectedIconPath":"dist/images/search_active_icon.png",

"text":"搜索"

},

{

"pagePath":"pages/top/top",

"iconPath":"dist/images/top_icon.png",

"selectedIconPath":"dist/images/top_active_icon.png",

"text":"口碑"

}]

},

"networkTimeout":{

"request":10000,

"downloadFile":10000

},

"debug": true

}

根据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 - 小程序公共样式

<template name="filmList">

<block wx:if="{{showLoading}}">

<view class="loading">玩命加载中…</view>

</block>

<block wx:else>