微信小程序（逆战）

一、微信小程序-全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象，有以下属性：

1.pages:配置页面路径列表（添加新页面）

在微信开发中工具中自带的编辑器里面为pages数组添加新的路径，微信开发者工具会自动为其创建对应的文件目录。

配置示例：

{
"pages": [
    "pages/index/index",
    "pages/home/home",
    "pages/kind/kind",
    "pages/cart/cart",
    ... ...
  ],
}

2.window：配置全局默认窗口表现

用于设置小程序的状态栏、导航条、标题、窗口背景色等。

• navigationBarBackgroundColor 导航栏背景颜色，如 #000000
• navigationBarTextStyle 导航栏标题颜色，仅支持 black / white
• navigationBarTitleText 导航栏标题文字内容
• backgroundColor 窗口的背景色
• backgroundTextStyle 下拉 loading 的样式，仅支持 dark / light
• enablePullDownRefresh 是否开启全局的下拉刷新。

配置示例：

{
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "逆战",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh":"true",
    ... ...
  }
}

3.tabBar：

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

• color tab上的文字默认颜色，仅支持十六进制颜色
• selectedColor tab上的文字选中时的颜色，仅支持十六进制颜色
• backgroundColor tab的背景色，仅支持十六进制颜色
• borderStyle tabbar上边框的颜色， 仅支持 black / white
• list tab的列表，详见 list 属性说明，最少2个、最多5个 tab。tab 按数组的顺序排序，每个项都是一个对象
• position tabBar的位置，仅支持 bottom / top

配置示例：

{
"tabBar": {
	"color":"#ffffff",
	"selectedColor":"#eefefe",
	"backgroundColor":"#adcabc",
	"borderStyle":"black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath":"icon图片路径",
        "selectedIconPath":"选中时的图片路径"
      },
      {
        "pagePath": "pages/cart/index",
        "text": "购物车",
        "iconPath":"icon图片路径",
        "selectedIconPath":"选中时的图片路径"
      },
      ... ...
    ],
    "position":"bottom"
  },
}

二、微信小程序-页面配置

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象，有以下属性：

• navigationBarBackgroundColor 导航栏背景颜色，如 #000000
• navigationBarTextStyle 导航栏标题颜色，仅支持 black / white
• navigationBarTitleText 导航栏标题文字内容
• backgroundColor 窗口的背景色
• backgroundTextStyle 下拉 loading 的样式，仅支持 dark / light
• enablePullDownRefresh 是否全局开启下拉刷新。
• onReachBottomDistance 页面上拉触底事件触发时距页面底部距离，单位为px。
• disableScroll 设置为 true 则页面整体不能上下滚动。只在页面配置中有效，无法在 app.json 中设置

配置示例：

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
  ... ...
}

三、微信小程序-购物车

其中几个主要的功能：

（1）物品请求数据，使用微信小程序request请求，POST方式得到服务器传来的物品数据。
每次请求要想后端传入用户id和物品id才得到的物品数据，每一次请求要判断还有没有数据，有数据则请求成功，没有数据就不请求。

（2）选中和取消选中单个物品，以及数量的加减。

（3）选中或取消选中物品时，总价格要进行加减。
每次触发选择事件，都会触发计算总价的方法。

（4）全选按钮，实现物品的全选。
当用户通过单选选择了所有物品时，“全选按钮”会自动改变为选中样式；当用户通过“全选按钮”选择所有商品的时候，每个商品都应该是选中状态。

（5）计算总价。
任何一次触发该函数，都会重新计算价格，将总价变为0，再进行选中项的价格累加，而不是在原总价上累加或减某一个商品的价格。

三、微信小程序-api的使用

api包括基础，路由，界面，网络，数据缓存，媒体，位置，转发，画布，文件，开放接口，设备等等。
具体使用方法：https://developers.weixin.qq.com/miniprogram/dev/api/

四、微信小程序-组件的使用

微信小程序组件包括视图容器，基础内容，表单组件，导航，媒体组件，地图，画布，开放能力，原生组件说明，无障碍访问，导航栏，页面属性配置节点
具体使用方法：https://developers.weixin.qq.com/miniprogram/dev/component/