全局配置　　

逆战 微信小程序根目录下的 app.json 文件用来对微信小程序进行全局配置

　　　　

1.pages:配置页面路径列表

    • 添加新页面

      在微信开发中工具中自带的编辑器里面为pages数组添加新的路径，微信开发者工具会自动为其创建对应的文件目录会自动创建页面目录和文件。逆战，哪个页面的路径在pages数组的最前面，小程序启动时就显示哪个页面

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

      • "enablePullDownRefresh":是否开启全局的下拉刷新，默认false

      • "backgroundTextStyle"：下拉 loading 的样式，仅支持 dark / light

      • "navigationBarBackgroundColor":导航栏背景颜色，只支持16进制颜色

      • "navigationBarTitleText":导航栏标题文字内容

      • "navigationBarTextStyle": 导航栏标题颜色，仅支持 black / white

      3.tabBar

      如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。（在自带的编辑器里面输入tabBar时会有代码提示，回车会自动有模版代码写入）

      • list:tab 的列表,它是一个数组，里面的每个对象就是一个tab标签，最少要有2个tab
      "tabBar": {
    "list": [
         {
         "pagePath": "页面路径",
         "text": "tab 上按钮文字",
        "iconPath": "icon图片路径",
         "selectedIconPath": "选中时的图片路径"
        },
        {
         "pagePath": "页面路径",
         "text": "tab 上按钮文字",
         "iconPath": "icon图片路径",
         "selectedIconPath": "选中时的图片路径"
        }
    ]
}
      • 其他属性
        color:tab的文字颜色，只能是16进制的颜色
        selectedColor:同上，被选中的文字颜色
        backgroundColor：背景色，只能是16进制的颜色
        borderStyle：边框颜色 仅支持 black / white
        position：tabBar 的位置，仅支持 bottom / top

　　　逆战。。。

页面配置

　　　　每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项

 

 

navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如 #000000  
navigationBarTextStyle string white 导航栏标题颜色，仅支持 black / white  
navigationBarTitleText string   导航栏标题文字内容  
navigationStyle string default 导航栏样式，仅支持以下值：
default 默认样式
custom 自定义导航栏，只保留右上角胶囊按钮		 微信客户端 7.0.0
backgroundColor HexColor #ffffff 窗口的背景色  
backgroundTextStyle string dark 下拉 loading 的样式，仅支持 dark / light  
backgroundColorTop string #ffffff 顶部窗口的背景色，仅 iOS 支持 微信客户端 6.5.16
backgroundColorBottom string #ffffff 底部窗口的背景色，仅 iOS 支持 微信客户端 6.5.16
enablePullDownRefresh boolean false 是否开启当前页面下拉刷新。
详见 Page.onPullDownRefresh		  
onReachBottomDistance number 50 页面上拉触底事件触发时距页面底部距离，单位为px。
详见 Page.onReachBottom		  
pageOrientation string portrait 屏幕旋转设置，支持 auto / portrait / landscape
详见 响应显示区域变化		 2.4.0 (auto) / 2.5.0 (landscape)
disableScroll boolean false 设置为 true 则页面整体不能上下滚动。
只在页面配置中有效，无法在 app.json 中设置		  
usingComponents Object 否 页面自定义组件配置 1.6.3

 

页面配置中只能设置 app.json 中 window 对应的配置项，以决定本页面的窗口表现，所以无需写 window 这个属性。

 

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

 

购物车逻辑

　　在详情页面点击加入购物车判断用户是否登录

　　　　登录了就请求接口给该用户添加商品然后弹窗提示是否跳到购物车页面

　　　　没登录直接跳到登录页面进行登录

　　进入购物车页面异步请求渲染数据购物车商品默认数量为一

　　可手动收入数量给正则判断不为数字清掉数字小于1或nan则为1

每次点击单选的时候给个判断

　　全都选中给全选沟了

　　少一个全选就不沟

　　并且把选中的商品总价计算出来

然后全选只要写个选中和取消就行了

生命周期 逆战

小程序

1、用户首次打开小程序，触发 onLaunch（全局只触发一次）。

2、小程序初始化完成后，触发onShow方法，监听小程序显示。

3、小程序从前台进入后台，触发 onHide方法。

4、小程序从后台进入前台显示，触发 onShow方法。

5、小程序后台运行一定时间，或系统资源占用过高，会被销毁。、

 

1、小程序注册完成后，加载页面，触发onLoad方法，一个页面只会调用一次。

2、页面载入后触发onShow方法，显示页面，每次打开页面都会调用一次。

3、首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。

4、当小程序后台运行或跳转到其他页面时，触发onHide方法。

5、当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。

6、当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload

 

wx.navigateTo跳转状态下，页面A和页面B的生命周期逻辑

 

1、进入A页面：A执行onLoad()-->onShow()-->onReady()；

2、A页面navigateTo B页面：A执行onHide()，B执行onLoad()-->onShow()-->onReady()；

3、B页面返回A页面：B执行onUnload()，A执行onShow()；

4、退出A页面：A执行onUnload()

 

1、小程序初始化完成后，页面首次加载触发onLoad，只会触发一次。

2、当小程序进入到后台，先执行页面onHide方法再执行应用onHide方法。

3、当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法。

组件

 

 

      在写小程序的时候，有时候页面的内容过多，逻辑比较复杂，如果全部都写在一个页面的话，会比较繁杂，代码可读性比较差，也不易于后期代码维护，这时候可以把里面某部分功能抽出来，单独封装为一个组件，也就是通常说的自定义组件，自定义组件类似于页面，它有wxml 模版、wxss 样式和js文件，然后在页面中使用该自定义组件即可。

 

　　例如，我的自定义组件代码结构是这样的：

 

 

myComponent文件就是我所创的自定义组件，myComponent.wxml文件代码为：

 

<view class="inner">
  <Text>I am learning 微信小程序</Text>
</view>

 

 

 

1、在myComponent.json文件中添加以下代码：

 

{
  "component": true
}

 

2、在需要调用自定义组件的文件中，如pages/index文件需要调用自定义组件，那么则需要在pages/index/index.json文件中添加如下代码：

 

{
  "usingComponents": {
    "myComponent": "../../components/myComponent/myComponent"   // 组件名以及组件所在路径
  }
}

 

3、然后就可以在myComponent.wxml文件中使用该自定义组件了，

 

　　index.wxml文件代码如下：

 

<view>
    <myComponent id="myComponent"></myComponent>
</view>

 

 

 

逆战