微信小程序开发学习--7.27日

微信小程序开发------7.27日学习内容

pages字段

用于描述当前小程序所有页面路径，这是为了让为您客户端知道你当前的小程序页面定义在哪个目录。
小程序在启动时首先加载app.json文件，微信客户端首先在app.json文件中查找字段"pages"，客户端找到这个字段名称后，就可以加载这里面的页面了。这个pages名字是不可以修改的，这是微信官方规定的，可以理解为微信客户端用来加载微信小程序路径的标识，没有这个标识小程序里面的页面无法加载。并且首先加载pages字段中第一个路径界面。
在pages字段中写入一个路径将会直接在微信资源管理窗口出现，并且只能在微信开发者工具中实现，如果用其他编译器就不会,需要重新刷新。

Window字段

另一小程序所有页面的顶部背景颜色，文字颜色定义等。

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	string	导航栏标题颜色，仅支持 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	是否开启全局的下拉刷新。
onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位为 px。
pageOrientation	string	portrait	屏幕旋转设置，支持 auto / portrait / landscape

tabbar字段

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

"tabBar": {
    "list": [{
      "pagePath": "pagePath",//页面路径，点击菜单跳转到的页面，存在于pages字段中
      "text": "text",//标题
      "iconPath": "iconPath",//未被选中的图标
      "selectedIconPath": "selectedIconPath"//被选中后的图标
    }]
  }

注：其他的属性如color，selectedColor，backgroundColor等属性与list属性同一级。
当设置tab栏的position为top时就无法显示图片。
其他的属性参考官网API

页面配置文件page.json

• 控制页面导航栏的外观
• 后期使用自定义组件时也可以在里边配置
• 开启禁用上拉下拉等功能可在页面配置中设置

sitemap配置（先了解后深入）

指的是项目中sitemap.json文件，用于配置小程序及其页面是否允许被微信索引到。

数据绑定

在wxml中 text标签在web中相当于 span标签 行内元素 不会换行
在wxml中 view标签在web中相当于 div标签 块级元素 会换行

在js文件中的page({date:{}});中来定义数据，在wxml中的标签中可以输出。
在wxml代码中用可用{{}}输出js中的初始数据

<!--js代码-->

page({
	date:{
	   msg:"hello baby",
	   num:"10000",
	   isBaby:true	
       person:{
       		height:160,
      		weight:82,
      		age:19,
      		name:"宝宝"
    },
    isChecked:true
}})

<!--wxml代码-->

<!--pages/demo2/demo2.wxml-->
<!--字符串-->
<view>{{msg}}</view>
<!--数字类型-->
<view>{{num}}</view>
<!--bool类型-->
<view>是否是宝宝：{{isBaby}}</view>
<!--object类型-->
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.age}}</view>
<view>{{person.name}}</view>
<!--使用bool类型充当属性 checked
字符串和花括号之间一定不能存在空格，否则会出现识别错误
错误演示： <checkbox checked="    {{isChecked}}"></checkbox>
-->
<view>
  <checkbox checked="{{isChecked}}"></checkbox>
</view>

运行结果：