购物车 (0)  
亲,您的购物车空空的哟~
去购物车结算
华寸科技

南安微信小程序官方文档学习个人心得

发表时间:2021-12-20 22:05

 

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

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

  1. 首先说的是配置文件app.json.下面是官方给出的例子.
{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

官方给出了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)中如果关闭了下拉刷新,当你在你自己开发的页面中想要设置下拉刷新也是行不通的,也就是说如果你想要在以后页面中使用下拉刷新这个功能,就必须保证这个配置文件中的这一项设置是打开的.  上面给出的示例代码:
{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
} 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

显示出来的效果是这样的:

tabBar





文章分类: 优化知识
分享到:
HC TECHNOLOGY
联系
地址:泉州丰泽区云鹿路兴祥大厦2楼
电话: 13067030702
邮箱:lai@qzhckj.cn