微信小程序开发-笔记

Posted 小仙女63

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序开发-笔记相关的知识,希望对你有一定的参考价值。

一、开发文件结构

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,则页面整体不能上下滚动

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

以上是关于微信小程序开发-笔记的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序开发之--"template模板“的应用

微信小程序开发笔记 进阶篇④——getPhoneNumber 获取用户手机号码(小程序云)

小程序开发遇到问题如何联系微信官方

微信小程序开发:学习笔记[3]——WXSS样式

微信小程序开发(笔记)

微信小程序开发:学习笔记[1]——Hello World