微信小程序开发

作业讲解

做小程序底部页面选项

在小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。在"pages"中输入你需要创建的页面如下

创建的页面放在第一排时，打开项目就会直接打开到该页面

（注：创建页面时最好是每新建一个后按Ctrl+S保存，避免微信开发者工具出错） 

在"pages"下方输入

"tabBar": {
    "color": "#f00",
    "selectedColor": "#0f0",
    
    "list":[
      {
        "pagePath": "pages/my/my",
        "text":"我的",
        "iconPath": "images/Bane 1.png",
        "selectedIconPath": "images/Bane 2.png"
      },
      {
        "pagePath": "pages/login/login",
        "text":"登录",
        "iconPath": "images/Detective Ellen Yen.png",
        "selectedIconPath": "images/Detective Ethan Bennett.png"
      },
      {
        "pagePath": "pages/type/type",
        "text":"分类"
      }
    ]
  },

"tabBar"为底部 tab 栏的表现，

"color"为tab上的文字默认颜色，仅支持十六进制颜色，

"selectedColor"为tab上的文字选中时的颜色，仅支持十六进制颜色，

"list"为tab页面列表，按"pagePath"的上下排列顺序从左到右排列最少 2 个、最多 5 个 tab，

"text"为tab上按钮文字，

"iconPath"为未选中时该tab显示的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片，

"selectedIcPath"为选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片（注：如果position设置为top则不会出现图片按钮，只有在默认bottom时出现）

效果如下：

 

<!-- 
wxml:书写页面结构 类似于之前的html。称为组件
https://developers.weixin.qq.com/miniprogram/dev/component/ 
wxss:书写页面样式。和之前的css基本一样
json配置文件
js书写动态效果
-->

<!-- 引入文字text -->
<text>请上传头像</text>
<!-- 引入视图、容器 view -->
<view>容器</view>
<!-- 小程序中的标签一定要闭合
 <标签 />或者<标签>< /标签> -->
<input type="text" />
<!-- 引入图片 -->
<image mode="aspectFit" src="../../images/Alfred Pennyworth.png"></image>
<image src="../../images/aa.gif" mode=&