微信小程序总结总结心得

今天小程序项目完结了,总结一下自己学习的个人心得.

首先从官方文档给的框架说起,微信小程序官方文档给出了app.js, app.json, app.wxss. 先从这三个文件说起. - app.js 这个文件是整个小程序的入口文件,开发者的逻辑代码在这里面实现,同时在这个文件夹里面可以定义全局变量. - app.json 这个文件可以对小程序进行全局配置,决定页面文件的路径,窗口表现,设置网络超时时间,设置多tab等. - app.wxss 是小程序的公共样式表.(为了适应广大的前端开发者，我们的 WXSS 具有 CSS 大部分特性。 同时为了更适合开发微信小程序，我们对 CSS 进行了扩充以及修改。)

接着我们就结合官方给出的代码具体说一下上面提到的三个文件.

首先说的是配置文件app.json.下面是官方给出的例子.

官方给出了app.json五个配置项列表.(pages(Array), window(Object), tabBar(Object), networkTimeout(Object), debug(Boolean)),接着我们就详细的分下一下这几个配置项.
pages

它的作用是配置小程序的页面,这个配置项是必填的,它接受一个数组,里面的每一项都是字符串,从上面给出的代码: “pages”: [ “pages/index/index”, “pages/logs/index” ] 可以看出,每一项分别对应的都是实现文件的路径以及他的文件名. 注意:这个配置里面的第一行配置是它的初始页面,例如上面代码的初始页面就是index

window
这个配置项是用来设置小程序的状态栏、导航条、标题、窗口背景色。他给出了六个属性(navigationBarBackgroundColor(HexColor), navigationBarTextStyle(String-(black,white)), navigationBarTitleText(String), backgroundColor(HexColor), backgroundTextStyle(String-(dark,light)), enablePullDownRefresh(Boolean)),开发者可以根据自己的需求来进行配置.

我们详细说一下这几个属性分别的功能:

navigationBarBackgroundColor 它是用来设置导航栏背景颜色,这个属性要输入的是十六进制颜色值.

navigationBarTextStyle 它是用来导航栏标题颜色的,它的输入类型是字符串(String),但是现在官网给出的文档目前仅支持(black和white)这两种颜色.

navigationBarTitleText 这个属性是显示导航栏标题内容的,开发者可以根据自己的需要来进行设置. - backgroundColor 这个属性是设置窗口的背景色的,它需要输入的也是十六进制颜色值的.

backgroundTextStyle 这个属性我的理解是设置窗口内容的样式的,官方给出的标准说明是下拉背景字体、loading 图的样式,这个属性同navigationBarTextStyle属性一样目前仅支持两种颜色(dark和light).

enablePullDownRefresh 这个属性是设置是否开启下拉刷新,默认是开启的,注意: 在这个配置文件(app.json)中如果关闭了下拉刷新,当你在你自己开发的页面中想要设置下拉刷新也是行不通的,也就是说如果你想要在以后页面中使用下拉刷新这个功能,就必须保证这个配置文件中的这一项设置是打开的.

上面给出的示例代码:
显示出来的效果是这样的:

tabBar
这个配置项是用来配置页面底部的tab栏的,开发者可以根据自己的需求来进行配置.
注意: tabBar是一个数组,只能配置最少2个,最多5个,而且tab栏的顺序是按照数组的排序来的.
tabBar官方给出了一下五个属性(**color(HexColor), selectedColor(HexColor), backgroundColor(HexColor), borderStyle(String), list(Array) **).
接下来说说我对这五个属性的理解:

color 设置tab上的文字默认颜色

selectedColor 设置tab上的文字选中的颜色

backgroundColor 设置tab的背景颜色

borderStyle 设置边框的颜色,现在仅支持(black和white)

上面这四个属性就是按照官方给出的API来设置就可以,下面说一下list属性.list属性接受的是一个数组(Array),在list下面配置的每一项都是一个对象,他们都有以下这四个属性(pagePath(String), text(String), iconPath( String), selectedIconPath(String)).

pagePath 这个定义的是页面的路径,但是这个属性定义的路径必须是在pages上定义过的.

text 设置的是按钮上的文字

iconPath 是定义icon图片的路径,这个属性定义的图片大小不超过40kb selectedIc