wx:if,hidden、css样式、json常用配置项、tabBar 导航栏、小程序如何发送ajax请求，小程序如何路由传参，小程序如何切换路由，小程序编程式导航，小程序声明式导航

目录

1、wx:if 与 hidden的实现原理

2、关于css样式

3、json 常用配置项

（一）设置头部背景颜色、字体颜色、文字

（二）下拉刷新 上拉触底

（三）tabBar 导航栏

（四）json页面配置

4、通过微信小程序发送给请求

（一）设置开发设置

（二）使用wx.request 发送请求

5、导航跳转

（一）声明式导航跳转

        ①、跳转语法

        ②、声明式导航回退跳转

        ③、跳转并传递参数

（二）编程式导航跳转

          ①、跳转语法

        ②、编程式导航回退跳转

        ③、跳转并传递参数

---

1、wx:if 与 hidden的实现原理

        wx:if 通过创建和删除元素来控制显示和隐藏

        hidden 通过display:none 来实现隐藏

// js
data: {
 isShow: true
},
// wxml
<view wx:if="{{!isShow}}">wx:if</view>
<view hidden="{{isShow}}">hidden</view>
<button bindtap='togger'>切换</button>

 hidden为 true 那么隐藏、wx:if 为true  为显示

2、关于css样式

        1、wxss 文件为写css 样式的文件，绝大多数语法与css3 一样可以正常过度，但是新增rpx单位

        1rpx 等于 屏幕的 1/750，375rpx === 50%

        2、当然 它也可以引入其他wxss的内容

@import '../../common/common.wxss';

        3、根目录下的app.wxss,为全局样式，当全局样式与局部样式层级一样且 冲突时，局部样式覆盖全局样式

3、json 常用配置项

文档地址：全局配置 | 微信开放文档

（一）设置头部背景颜色、字体颜色、文字

  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#00f", // +
    "navigationBarTitleText": "导航栏",  // +
    "navigationBarTextStyle":"white"  // +
  },

（二）下拉刷新 上拉触底

// 下拉刷新
"enablePullDownRefresh":true,
// 上拉触底距离
"onReachBottomDistance":50,
// 页面背景字体颜色
"backgroundTextStyle":"dark",
// 页面背景颜色
"backgroundColor":"#f5f6f7"

 当刷新或触底时，会触发以下在 js文件中的函数

onPullDownRefresh() {
  console.log('下拉刷新');
},
onReachBottom() {
  console.log('上拉触底');
},

（三）tabBar 导航栏

        在window同级下设置 tabbar属性

        可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

        color 为默认颜色，selectedColor 为选中后的颜色

        list 为当前导航栏需要的数组对象，其中对象中的配置项顾名思义依次为：页面地址、文本、默认图标、选中时的图标

   配置项很多，见文档.......

  "tabBar":{
    "color":"#4545f9",
    "selectedColor":"#f0f",
    "list":[
      {
        "pagePath":"pages/home/home",
        "text":"首页",
        "iconPath":"./images/tabs/home.png",
        "selectedIconPath":"./images/tabs/home-active.png"
      },
      {
        "pagePath":"pages/message/message",
        "text":"消息",
        "iconPath":"./images/tabs/message.png",
        "selectedIconPath":"./images/tabs/message-active.png"
      },
      {
        "pagePath":"pages/contact/contact",
        "text":"通讯录",
        "iconPath":"./images/tabs/contact.png",
        "selectedIconPath":"./images/tabs/contact-active.png"
      }
    ]
  },

（四）json页面配置

        我们以上代码都是在 全局的app.json 中进行配置的，它默认是设置的全局配置项。

        当我们某一个页面不需要让他下拉刷新怎么办呢？

        在 页面的json 文件中单独设置配置项

// message.json
{
  "usingComponents": {},
  "enablePullDownRefresh":false
}

 这样配置过后，我们message 这个页面 就不会出现下拉刷新了

4、通过微信小程序发送给请求

（一）设置开发设置

文档地址：RequestTask | 微信开放文档

        在发送请求前需要配置微信小程序的开发设置

        ①、登录个人账号微信小程序

        ②、点击开发管理、并点击开发设置

 ③、添加服务器域名

 ④、在编辑器中 查看是否添加上

（二）使用wx.request 发送请求

  getHandel() {
    wx.request({
      url: 'url',
      method:'GET',
    // 通过success 获取返回结果
      success({data:res}){
        console.log(res);
      }
    })
  },
  postHandel() {
    wx.request({
      url: 'url',
      method:'POST',
      data:{
        name:'ldh',
        age:200
      },
    // 通过success 获取返回结果
      success({data:res}){
        console.log(res);
      }
    })
  },

5、导航跳转

（一）声明式导航跳转

        ①、跳转语法

        使用navigator 标签进行跳转

        open-type 属性控制相关跳转的页面的属性，如果为 tabbar 页面 则为 switchTab

        如果为非tabbar 页面 那么可以省略 也可以为 navigate

<!-- 声明式导航跳转 -->
<navigator url="/pages/contact/contact" open-type="switchTab">
    跳转到tabbar---contact页面
</navigator>
<navigator url="/pages/active/active" open-type="navigate">
    跳转到非tabbar---active页面
</navigator>

        ②、声明式导航回退跳转

        使用 open-type 属性为 navigateBack 设置为回退

        delta 属性为回退的层数，比如 message ->  active ->  layout 

        若将delta 属性设置为2 ，那么直接跳转回 message 页面

<navigator open-type="navigateBack" delta="2" >回退</navigator>

注意：message(tabbar页) -> contact(tabbar页) -> layout(非tabbar)

        当我从tabbar 页面跳转到另一个tabbar页面后 再跳转一个非tabbar页面，

        即使你设置layout 中的回退delta= 2   那么也不会正常回退两个页面(既：返回至message)

        他只会找到最近的一个tabbar页面并返回，也就是跳转到contact 页面

        ③、跳转并传递参数

        注意： 只能传递到非tabbar 页面，否则无效

<navigator url="/pages/layout/layout?name=ldh&age=18" open-type="navigate">
    跳转到非tabbar---layout页面
</navigator>

        获取参数

         在生命周期函数中获得

  onLoad(options) {
    console.log(options);
    // {name: "ldh", age: "18"}
  },

（二）编程式导航跳转

          ①、跳转语法

        分为非tabbar页面与 tabbar页面，跳转调用的函数不一样如下：

 // 跳转至tabbar 页面
switchToHandel(){
  wx.switchTab({
    url: '/pages/contact/contact',
  })
},
// 跳转至非 tabbar 页面
navigateToHandel(){
  wx.navigateTo({
    url: '/pages/active/active',
  }) 
},

        ②、编程式导航回退跳转

        使用wx.navigateBack 来进行回退，同时配置delta

  navigateBackBtn() {
    wx.navigateBack({
      delta: 2
    })
  },

        ③、跳转并传递参数

        获取参数方法与声明式导航一致不过多赘述

  navigateToHandel() {
    wx.navigateTo({
      url: '/pages/active/active?name=zxy&age=100',
    })
  },