微信小程序开发-笔记

Posted 2020-10-14 小仙女63

一、开发文件结构

1.根目录下有三个文件：app.js,app.json和app.wxss。一个小程序项目必须有的三个描述App的文件。这三个文件是应用程序级别的文件。这3个文件的意义：

表1.1  app.js,app.json和app.wxss文件的含义

文件	必填	作用
app.js	是	小程序逻辑文件
app.json	是	小程序配置文件
app.wxss	否	全局公共样式文件

 

2.和这三个应用程序级别文件平行的pages文件夹。一个小程序由若干个页面文件构成。每个页面由4个文件构成，分别是：.js,.json,.wxml和.wxss文件。这4个文件意义：

表1.2  .js,.wxml,.wxss和.json文件的含义

文件	必填	作用
.js	是	页面逻辑
.json	否	页面配置
.wxml	是	页面结构
.wxss	否	页面样式表

二、配置程序：

1.app.json文件是小程序最基本的全局配置文件，它决定页面文件的路径（路由）、窗口表现、设置网络超时时间、设置多Tab等。对于app.json的具体配置如下表：

表2.1 app.json配置项

属性	类型	必填	描述
pages	String Array	是	设置页面路径
window	Object	否	设置默认页面的窗口表现
tabBar	Object	否	设置底部tab表现
networkTimeout	Object	否	设置网络超时时间
debug	Boolean	否	设置是否开启debug模式

1).pages:

pages接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的（路径+文件名）信息，数组的第一项代表小程序的初始页面。例如：在app.json配置：

{
"pages":[
    "pages/index/index"
    "pages/logs/logs"
   ]
}

2).window

window属性用于设置小程序的状态栏、导航条、标题、窗口背景色、具体含义及配置如表2.2

表2.2  window属性及配置

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持dark/white
navigationBarTitleText	String	无	导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉背景字体、loading图的样式、仅支持dark/white
enablePullDownRefresh	Boolean	false	是否开启下拉刷新

 

3).tabBar

tabBar

用于配置小程序的菜单选项。tabBar是一个数组，只能配置最少2个、最多5个tab，tab按数组的顺序排序，其具体配置属性如表2.3

表2.3  tabBar属性配置

属性	类型	必填	默认值	描述
color	HexColor	是		tab上的文字默认颜色
selectedColor	HexColor	是		tab上的文字选中时颜色
backgroundColor	HexColor	是		tab的背景颜色
borderStyle	String	否	black	tabBar上边框的颜色，仅支持black/white
list	Array	是		tab的列表，详见表2.4
position	String	否	bottom	可选值bottom、top

tabBar的属性list是一个数组，数组中的每一项都是一个对象，属性表如表2.4

表2.4  list属性

属性	类型	必填	说明
pagePath	String	是	页面路径，必须在pages中先定义
text	String	是	tab上按钮的文字
iconPath	String	是	图片路径，icon大小限制为40KB，建议尺寸为81px * 81px
selectediconPath	String	是	选中时的图片路径，icon大小限制为40KB，建议尺寸为81px * 81px

例如：将两个页面链接指向首页和日志页：

"tabBar":{
     "list":[{
       "pagePath":"pages/index/index",
       "text":"首页"
      },{
       "pagePath":"pages/logs/logs",
       "text":"日志"
      }]
}

4).networkTimeout

networkTimeout属性可以设置各种网络请求的超时时间，具体属性如表2.5

表2.5  networkTimeout属性

属性	类型	必填	说明
request	Number	否	wx.request的超时时间，单位毫秒，默认为：60000
connectSocket	Number	否	wx.connectSocket的超时时间，单位毫秒，默认为：60000
uploadFile	Number	否	wx.uploadFile的超时时间，单位毫秒，默认为：60000
downloadFile	Number	否	wx.downloadFile的超时时间，单位毫秒，默认为：60000

2.page.json

每一个小程序页面可以使用.json文件来对本页面的窗口表现进行配置，页面中配置项会覆盖app.json的window中相同的配置项。page.json配置属性如表2.6

表2.6  page.json的配置属性

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持dark/white
enablePullDownRefresh	Boolean	false	是否开启下拉刷新
backgroundTextStyle	String	dark	下拉背景字体、loading图的样式、仅支持dark/white
backgroundColor	HexColor	#ffffff	窗口的背景色
navigationBarTitleText	String	无	导航栏标题文字内容
diaableScroll	Boolean	false	设置为true，则页面整体不能上下滚动

仅是自己在学微信小程序的笔记。