小程序入门日记(1)

视图层

视图层是有框架设计的标签语言wxml 和 由于描述wxml组件样式的wxss (weixin style sheet)组成,两者的关系类比 html 和ccs的关系

逻辑层

小程序的逻辑层是一套运行在本地的js引擎的js代码,在此基础上框架实现了一套模块化机制,让每个js文件有独立的作用域和模块化能力

小程序的视图层和逻辑层的交互是通过数据绑定和事件响应来实现的,是一中单项绑定机制

一个完整小程序是有框架的主体文件和页面文件俩部分组成

框架的主体文件

框架的主体文件是有 app.json/app.js/app.wxss 构成,这三个文件必须放在项目的根目录下,一个小程序只有一份,他们负责小程序的整体配置

• app.json

小程序的公共配置,配置小程序的全局设置

• app.js

小程序的逻辑文件,主要用于注册小程序的全局实例,编译时会和其他页面逻辑文件打包成一份js文件

• app.wxss 小程序的公共样式表,对所有的页面的布局文件都有效,可以根据项目情况进行创建

app.json中配置说明

app.json是小程序的配置文件,编写是严格遵循json的格式规范.app.json 在程序加载时加载,负责对小程序的全局配置,配置项说明如下:

• pages 设置lancher页面的路径 必填项
• window 设置默认页面的窗口表现
• tabBar 设置tab的表现
• networkTimeout 设置网络的超市时间
• debug 设置是否开启debug模式,默认关闭

pages

负责注册小程序页面,必须填写,value 值为一个包含页面路径的数组,用来指定小程序由那些页面构成,没一项都是路径加文件名组成

"pages": [
    "mypages/index/index",
    "pages/logs/logs",
    "mypages",
    "mypages/home/index",
    "mypages/remark",
    "mypages/remark/remark"
  ],

window 配置

"window": {
    "backgroundTextStyle": "light",//下拉背景字体/loading图的样式,仅支持 dark/light
    "navigationBarBackgroundColor": "#fff",//导航栏背景颜色
    "navigationBarTitleText": "WeChat",//导航栏标题内容
    "navigationBarTextStyle": "black",//导航栏标题颜色,仅支持black/white 
    "backgroundColor": "#000000",//窗口背景颜色
    "enablePullDownRefresh": false//是否开启下拉刷新,默认为false
  },

tabBar

配置当程序顶部或者底部需要菜单栏时,我们可以通过tabBar快速实现,tabBar是个非必填项,可配置属性如下:

• color tab :上文字的默认颜色
• selectedColor :选中时文字的颜色
• backgroundColor :tab背景色
• borderStyle tab :上边框的颜色,仅支持black/white 默认是black
• list :tab的列表 其值为一个数组,最少2个,最多5个,数组的每一项是一个对象,代表tab的相关配置,每项的配置如下:
• pagePath :页面路径,必须先在page中定义,必填项
• text :tab按钮上的文字,必填项
• iconPath :tab上icon图片的相对路径 icon大小限制为40kb,必填项
• selectedIconPath :选中时图片的相对路径
• position :显示位置,可选值 bottom,top

networkTimeout 配置

小程序中各种网络请求的超时时间只能通过networkTimeout统一配置,不能单独配置

• request :设置请求的超时时间,单位毫秒
• connectSocket:连接超时时间
• uploadFile :文件上传的超时时间
• downloadFile :文件下载的超时时间