微信小程序学习笔记（1）

写在前面：

本文仅用于记录自己的学习经过和转载一些资料

本文所有练习和实例均使用vscode和微信官方的微信开发者工具共同完成，vscode仅用于编译代码。某些功能如即时模拟，实际上要使用微信官方工具才得以实现。

要达成代码同步，仅需要使用vscode和微信工具同时打开一个项目即可。

---

目录

一、基础组件

二、app.js文件

1、page字段

2、window字段

3、tabbar字段

---

一、基础组件

四个基础文件

app.json
小程序的配置文件，可以配置字体颜色、页面组成、整体布局等等。

app.js
小程序的逻辑文件，也就是后台文件，用于创造案件逻辑，监听生命周期等。

app.wxss
.wxss即.css，也就是css文件，负责渲染，可以直接把配置写在主界面

app.wxml
.wxml也就是.html，页面构建文件。

        这四个基础组件实际上是一个页面应该有的，也就是说若小程序要拥有n个页面，那每个页面都要配置这四项组件（当然不全是必须的）。

---

二、app.js文件

1、page字段

        用于存放子页面路径，例如：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
//引用index、logs两个子页面文件
}

也就是这两个子页面文件

        同时pages文件支持通过直接在字段内添加代码来创建新的子页面文件（此功能需要使用微信开发者工具，后称微工），例如：

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

        ctrl+s保存后便可以直接创建新的子页面：

        创建文件时的排列顺序也就是出现的页面顺序，如上图情况，在进入小程序后的页面顺序即为index、logs，最后是我们新建的demo。也可以通过调整顺序来排列。

2、window字段

        用于设置小程序的外观配置，比如导航栏，状态栏等。属性表如下：

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 dark / light
backgroundColorTop	string	#ffffff	顶部窗口的背景色，仅 iOS 支持
backgroundColorBottom	string	#ffffff	底部窗口的背景色，仅 iOS 支持
enablePullDownRefresh	boolean	false	是否开启当前页面下拉刷新。详见 Page.onPullDownRefresh
onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位为px。 详见 Page.onReachBottom
pageOrientation	string	portrait	屏幕旋转设置，支持 auto / portrait / landscape 详见 响应显示区域变化
disableScroll	boolean	false	设置为 true 则页面整体不能上下滚动。 只在页面配置中有效，无法在 app.json 中设置
usingComponents	Object	否	页面自定义组件配置
initialRenderingCache	string		页面初始渲染缓存配置，支持 static / dynamic
style	string	default	启用新版的组件样式
singlePage	Object	否	单页模式相关配置
restartStrategy	string	homePage	重新启动策略配置

        用微工的实例示例：

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  }

3、tabbar字段

        用于配置小程序导航栏，在微工里输入tabBar可以直接展开一个默认的tab，如下：

"tabBar": {
  "list": [{
    "pagePath": "pagePath",
    "text": "text",
    "iconPath": "iconPath",
    "selectedIconPath": "selectedIconPath"
  }]
},

         一个tabBar起码拥有两个或更多的页面，逐一配置配置就可以完成基本的页面配置。关于tabBar的属性，转载微信官方的文档：

属性	类型	必填	默认值	描述
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	string	否	black	tabbar 上边框的颜色
list	Array	是		tab 的列表，细则如下表。
position	string	否	button	tabBar 的位置
custom	boolean	否	false	自定义 tabBar，见微信官方文档

p.s.小程序所有的颜色属性都仅支持十六进制表达法

​        关于list的属性，同转载官方文档：

属性	类型	必须	说明
pagePath	string	是	页面路径
text	string	是	tab 上按钮文字
iconPath	string	否	未选中图片路径
selectedIconPath	string	否	已选中图片路径