微信小程序_tab标签选中样式-CSDN博客

本文链接：https://blog.csdn.net/weixin_70024734/article/details/132028371

基本语法

1.文本渲染

{{ msg}}可以执行简单的js表达式
{{2+3}}
{{msg.length}}

2，条件渲染

wx:if

wx:if=""
wx:elif=""
wx:else

结合block标签使用wx:if:
如果要一次性控制多个组件标签的展示与隐藏，可以使用一个block标签将多个组件包装起来，并在block标签上使用wx:if控制属性
注意: block并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染

<block wx:if = "{{a===1}}">
<view>你好</view>
</block>

hidden

使用hidden = “{{condition}}”也能实现元素的显示与隐藏
<view hidden = "{{condition}}"></view>条件为true隐藏，false显示

区别：

wx:if与hidden的对比
   运行方式不同
   wx:if是以动态创建和移除元素方式，控制元素的显示于隐藏
   hidden：是以切换的方式，控制元素的显示与隐藏

使用建议:
频繁切换时建议使用hidden
控制条件复杂时，建议使用wx:if搭配wx:elif,wx:else进行展示与隐藏的切换

3，列表渲染 wx:for

<view wx:for = "{{list}}" wx:key = "id">{{item.name+index}}</view>

通过wx:for可以根据指定的数组，循环渲染到重复的组件结构<view wx:for="{{list}}"> </view>索引是{{index}}，当前项是{{item}}默认情况下，当前循环项的索引用index表示，当前循环项用item表示

wx:key的使用

类似于vue列表染中的key，小程序在实现列表染时，也建议演染出来的列表项指定唯一的key值，从而提高渲染的效率
<view wx:for="{{list}}" wx:key = "id">{{temname.name}}< /view>
注意：key不用加{{}}

4，wxss

wxss (Weixin Stye Sheets)是一套样式语言，用于美化wxml的组件样式。类似于网页开发中的css

5，事件

bindInput     表单输入时
bindconfirm    表单输入确认
bindtap      点击时候

tap->bindtap或bind:tap一手指触摸后马上离开，类似于HTML中的click事件
input->bindinput或bindhnput->文本框的输入事件
change->bindchange或bind:change->状态改变时触发

6，内置组件

view         组件块组件
text         组件行内组件
button       组件按钮
input        组件表单

html: div span img a
wxml: view text image navigator

一一对应，可以和js辅助记忆

7.事件的传参

<button data-msg="xxx" bindtap="tapHd">
获取事件的参数  e.target.dataset.msg

(1)不能在绑定事件的同时为事件处理函数传递参数
(2)可以使用组件提供的data-#自定义属性传参，其中#代表的是参数的名字，最终#会被解析为参数的名字，属性值会被解析为参数的值
(3)在事件处理函数中，可以通过currentTarget.dataset获取到传来的参数项

8，表单的绑定

<input value="{{s1}}" bindinput="inputHd">
inputHd(e){
 this.setData({s1:e.detail.value})
}
表单的值获取：e.detail.value

数据绑定的基本原则

（1)在data中定义数据
(2)在wxml中使用数据

事件处理函数中为data中的数据赋值

通过调用this.setData(dataObiect)方法，可以给data中的数据重新赋值

例如：


 data: {
    num: 0,
}

but(){//点击事件
this.setData({
      num: this.data.num + 1,
    })
}

全局配置文件和常用的配置项

小程序目录下的appjson文件是全局配置文件
        pages:记录当前小程序所有页面的存放路径
        window:全局设置小程序窗口的外观
        tabBar: 设置小程序底部部的tabBar效果
        style: 是否启用新版的组件样式

window节点常用的配置项

navigationBarTitleText: 导航栏标题文字内容
navigationBarBackgroundColor: 导航栏背景颜色
navigationBarTextStyle: 导航栏标题颜色，仅支持black和white
IbackgroundTextStyle:下拉loading的样式，仅支持dark和light
enablePullDownRefresh: 是否开启全局下拉刷新
backgroundColor: 窗口的背景色
onReachBottomDistance: 页面上拉触底事件触发时距页面底部的距离，单位为px

设置下拉刷新时窗口的背景色

当前开启全局下拉刷新功能之后，默认窗口背景为白色，如果自定义下拉刷新时窗口背景色，设置步骤为app.josn>window->backgroundColor指定16进制的颜色值

设置下拉刷新时loading的样式

当前开启全局下拉刷新功能之后，默认窗口的loading样式为白色，如果更改loading样式的效果，设置步骤为app;josn->window-backgroundTextStyle指定dark值，可选值只有light和dark

触发下拉打印：

onPullDownRefresh(){
    console.log("我贝触发了");
  },

设置上拉底的距离

上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动效果，从而加载更多数据的行为。app;json->window->onReachBottomDistance设置新的数值 (值为Number)
注意:默认距离为50px，若没有特殊需求，建议使用默认值即可

往下划拉到底部的时候触发：（这个onReachBottomDistance设置上数值后，比如设置100，那么就划拉到距离底部100就到底的时候触发，不设置就是默认到底）

onReachBottom(){
    console.log("我到底部了");
  }

tabBar

tabBar是移动端常见的页面效果，用于实现多页面的快速切换，分为底部tabBar和顶部tabBar

tabBar节点的配置项:

1.position:不是必填项，tabBar的位置，仅支持bottom/top,默认值为bottom
2.borderStyle: 不是必填项，tabBar上边框的颜色，仅支持black/white，默认值为black
3.color: tab上文字的默认颜色 (未选中)，不是必填项，HexColor
4.selectedColor: tab上文字选中时的颜色，不是必填项，HexColorT
5.backgroundColor: tabBar的背景色，不是必填项，HexColon
6.list: tab页签的列表，是必填项，Array类型，最少2个，最多5个

每个tab项的配置选项

1.pagePath:是必填项，页面路径，页面必须在pages中预先定义
2.text:是必填项，tab上显示的文字

3iconPath:不是必填项，未选中时的图标路径，当position为top时，不显示icon
4.selectedlconPath: 不是必填项，选中时的图标路径，当position为top时，不显示icon

"tabBar":{
    "position": "bottom",
    "borderStyle": "black",
    "color": "#BCC645",
    "selectedColor": "#E75E58",
    "backgroundColor": "#E0E0E0",
    "list": [
     {
      "pagePath":"pages/index/index",
      "text":"首页",
      "iconPath": "./img/logo.png",
      "selectedIconPath": "./img/logo.png"
     
     },
     {
      "pagePath":"pages/home/home",
      "text":"home"
     },
     {
      "pagePath":"pages/logs/logs",
      "text":"logs"
     },
     {
      "pagePath":"pages/add/ass",
      "text":"add"
     }
    ]
}

页面配置中的常用配置项

1.navigationBarBackgroundColor: 当前页面导航栏背景色，HexColor，如#000000
2.navigationBarTextStyle: 当前页面导航栏标题颜色，仅支持black和white
3.navigationBarTitleText: 当前页面导航栏标题文字内容
4.backgroundColor: 当前页面窗口的背景色，HexColor
5.BackgroundTextStyle: 当前页面下拉oading的样式，仅支持dark和light
6.enablePullDownRefresh: 是否为当前页面开启下拉刷新的效果
7.onReachBottomDistance:页面上拉触底事件触发时距页面底部的距离，单位为px，值为Number

小程序网络数据请求的限制

出于安全性方面的考虑，小程序官方对数据接口的请求做出了两个限制:
(1)只能请求https类型的接口
(2)必须将接口的域名添加到信任列表中

配置合法域名

步骤: 登录小程序管理后台->开发->开发管理->开发设置->服务器域名->修改request合法域名
注意事项:
   域名只支持https协议
   域名不能使用ip地址或localhoste
   域名必须经过ICP备案
   服务器域名一个月内最多可申请5次修改

发送请求

wx.request(f
url:””,//请求地址
method:"”,//请求方法
data:{},//传输的数据
success:(res)=>{} //成功的回调

fail:(err)=>{ },//失败回调

complete:()=>{ }//成功和失败都回调

 *******get*******
but(){
    wx.request({
      url: "http://wish.byesame.com/admin",
      method:"get",
      data:{
        page:1,
        rows:10
      },
      header:{
        token:this.data.token,
        list:null
      },
      success:(res)=>{
        console.log(res);
        this.setData({
          list:res.data.data.list,
          
        }),
        console.log(this.data.list);
      },
      fail:(err)=>{
        console.log(err);
      },
      complete:()=>{
        console.log("complete");
      }
    })
  },
**************post*************
buts(){
    
    wx.request({
      url: "http://wish.byesame.com/login",
      method:"post",
      data:{
        userName:'admin',
        passWord:"123456"
      },
      success:(res)=>{
        console.log(res);
        this.setData({
          token:res.data.data.token,
          
        })
      }
    })
  }

关于跨域和Ajax的说明

跨域问题只存在于基于浏览器的WEB开发中，由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。
Ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起Ajax请求”而是叫做“发起网络请求”。

本地存储

wx.setStorageSync(key,value)

本地取

wx.getStorageSync(key)
wx.request 网络请求

页面导航

声明式导航:在页面上声明一个<navigator>导航组件，通过点击<navigator>组件实现页面跳转编程式导航:调用小程序的导航API，实现页面跳转

声明式导航

跳转到指定的tabBar页面

使用<navigator>组件跳转到指定的tabBar页面时,需要指定url属性和open-type属性
url:表示要跳转的页面的地址,必须以/开头
open-type表示跳转的方式必须为switchTab

跳转的页面的地址

使用<navigator>导航到非tabBar页面:
   url:表示要跳转的页面的地址,必须以/开头
   open-type表示跳转的方式,必须为navigate
   为了方便,跳转非tabBar页面可以省略open-type属性

<navigator url = "../home1/home1" open-type="navigate">点击跳转hom1页面</navigator>
<view>*****************************************</view>
<navigator url = "../logs/logs" open-type="switchTab">点击跳转login页面</navigator>

后退导航

如果要后退到上一页面或多级页面，则需要指定open-type属性delta属性，其中：
   open-type的值必须是navigateBack，表示要进行后退导航
   delta的值必须是数字，表示要后退的层级
   注意:为了简便，可以省略delta属性，默认值是1

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

自定义组件

1.创建组件

   (1)在项目的根目录中鼠标右键创建components->coms文件夹
   (2)在新建的components->coms文件夹上,鼠标右键点击新建Component
   (3)输入组件的名称之后回车,会自动生成组件对应的4个文件,后缀名分别为,js,json,.wxml,.wxss
   注意:为了保证目录结构的清晰,建议把不同的组件,存放在单独目录中

2.引用组件

分为局部引用和全局引用
局部引用:组件只能在当前被引用的页面内使用
全局引用:组件可以在每个小程序页面中使用

局部引用

在页面的 .json 配置文件中引用组件的方式，叫做“局部引用”。示例代码如下：

//在要使用的页面的.json中的usingComponents里面进行操作
{
  "usingComponents": {
    "my-coms":"/components/coms/coms"
  }
}

//在在要使用的页面的.wxml进行使用
<my-coms></my-coms>

全局引用

在 app.json 全局配置文件中引用组件的方式，叫做“全局引用”。示例代码如下:

在要使用的页面的.wxml上使用

<my-all></my-all>

3.局部引用VS全局引用

   根据组件的使用频率和范围,来选择合适的用方式
   如果某组件在多个页面中经常被用到,建议全局引用
   如果某组件只在特定的页面中被用到,建议局部引用

4.组件和页面的区别

从表面来看,组件和页面都是由js json wxml wxss这四个文件组成的。但是组件和页面的js与json文件有明显的不同
   组件的ison文件中需要声明component:true属性
   组件的js文件中调用的是Component()函数
   组件的事件处理函数需要定义到methods节点中

组件样式隔离

默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的UI结构
好处:
防止外界的样式影响组件内部的样式防止组件的样式破坏外界的样式

组件样式隔离的注意点

   app.wxss中的全局样式对组件无效
   只有class选择器会有样式隔离效果，id选择器属性选择器标签选择器不受样式隔离的影响
   建议: 在组件和引用组件的页面中建议使用class选择器，不要使用id选择器属性选择器标签选择器

修改组件的样式隔离选项

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望外界能够控制组件内部的样式，此时，可以通过stylelsolation修改组件的样式隔离选项

在组件的js文件中增加如下配置

                Component({
                        options:{stylelsolation."isolated"}
                   })

在组件的json文件配置如下选项

{

"stylelsolation":"isolated”

}

stylelsolation的可选值

isolated :

表示启用样式隔离，在自定义组件内外，使用class指定的样式将不会互相影响
apply-shared :

表示页面wxss样式将影响到自定义组件，但自定义组件wxss中指定的样式不会影响页面
shared :

表示页面wxss样式将会影响到自定义组件，自定义组件wxss也会影响到页面和其他设置了applyshared或shared的自定义组件

定义组件 - 数据、方法和属性

.properties属性

  //组件coms
//properties用来接收页面传来的值
properties: {
//第一种，全的
    max:{
      type:Number,
      value:10
    },
//第二种简写
    max:Number
  },

//页面向组件传值
<my-coms max="10"></my-coms>

//传值传了个max = 10
那么在组件中的properties中用max来接收

在小程序组件中，properties是组件对外属性，用来接收外界传递到组件的数据
properties:{
max:( //完整定属性的方式[当需要指定属性默认值时，建议使用此方式]

type:Number，//属性的数据类型

                 value:10 //数据默认值
   }
   max:Number //简化定义属性的方式[不需要指定属性默认值，可以使用简化方式]
}
<my-coms max="10"></my-coms>

组件----数据监听器 observers

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于vue中的watch侦听器


Component({
data: {
    mun:1,
    n1:0,
    n2:0,
    sum:0
  },

  observers:{
//监听max
    "max"(newValue){
      console.log(newValue);
    },
//可以监听多个逗号隔开，n1,n2
    "n1,n2":function(n1,n2){
      this.setData({
        sum:n1+n2
      })
    
  },
//触发的事件，在组件中要写在methodes中
  methods: {
    butn1(){
      this.setData({
        n1:this.data.n1+1
      })
    },
    butn2(){
      this.setData({
        n2:this.data.n2+1
      })
    },
  }
})

基础语法格式:
   observers:{
       "字段A，字段B": function (“字段A的新值"，"字段B的新值"){
。。。。。。。。
       }
   }

监听对象属性的变化

如果某个对象中需要被监听的属性太多，为了方便，可以使用**来监听对象中所有属性的变化
   "obj.**":function(obj){
       // do something
   }

纯数据字段

   概念:指的是那些不用于界面渲染的data字段应用场景:
   例如有些情况下，某些data中的字段既不会展示在页面上，也不会传递给其他组件，仅仅在当前组件内使用，带有这种特性的data字段适合被设置为纯数据字段。
   好处:纯数据字段有助于提升页面更新的性能

生命周期

组件内的生命周期可分为组件全部的生命周期和在页面上使用时候的组件生命周期

使用都是在组件.js的Component里面定义使用

组件全部的生命周期

组件全部的生命周期，最重要的三个生命周期是created，attached，detached

lifetimes节点

在小程序组件中，生命周期函数可以直接定义在Component构造器的第一集参数中，也可以在lifetimes字段内进行声明(这是推荐的方式，其优先级最高)

在页面上使用时候的组件生命周期

pageLifetimes节点

有时，自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期
       show: 组件所在的页面被展示时执行
       hide: 组件所在的页面被隐藏时执行
       resize:function(size) :组件所在的页面尺寸变化时执行

插槽

在自定义组件的wxml结构中，可以提供一个<slot>节点(插槽)，用于承载组件使用者提供的wxml结构

单个插槽

在小程序中，默认每个自定义组件中只允许使用一个<slot>进行占位，这种个数上的限制叫做单个插槽
《对于不确定的内容，可以使用<slot>进行占位，具体的内容由组件的使用者决定》
<slot> </slot>

启用多个插槽

   在组件中的options进行配置
   options:{
       multipleSlots:true
   }

定义多个插槽

在组件中使用多个插槽，要以不同的name来区分不同的插槽
<slot name="slot1"> </slot>

使用多个插槽

使用带有多个插槽的自定义组件时，需要用slot属性来将节点插入到不同的slot标签中
<my-coms>
<view slot="slot1"> </view>
<view slot="slot2"> </view>
</my-coms>

父子组件之间的通信的3种方式

   1.属性绑定: 用于父组件向子组件的指定属性设置数据，仅能设置JSON兼容的数据
   2.事件绑定:用于子组件向父组件传递数据，可以传递任意数据
   3.获取组件实例:
       父组件通过this.selectComponent0获取子组件实例对象
       这样就可以直接访问子组件的任意数据和方法

.属性绑定

属性绑定用于实现父向子传值，而且只能传递普通类型的数据，无法将方法传递给子组件
   properties:{
       name:String，
       count:{
       type:Number

}
//父组件
<com-data name="fnamel" count="fcount;"></com-data>

.事件绑定

   事件绑定用于实现子向父传值，可以传递任何类型的数据
   (1)在父组件的is中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件
   (2)在父组件的wxml中通过自定义事件的形式将步骤一中的函数引用传递给子组件
   （3）在子组件的is中，通过调用this.triggerEvent("自定义事件的名称”，(参数对象))
   (4)在组件的is中通过e.detail获取到子组件传递过来的数据

自定义事件: bind:sync
子组件:
<view bindtap="sendData">点我传值</view>

methods:{
   sendData（){
   this.triggerEvent("dianwo",{a:10})
       }
   }
父组件:
<com-data bind:dianwo="dainwo"> <com-data>
   dainwo(e){
       console.log(e.detail)
   }

.获取组件实例

可在父组件里调用this.selectComponent("id或者class选择器”）,获取子组件的实例对象，从而直接访问自定义组件的任意数据和方法，调用时需要传入一个选择器

父组件:
<com-data class="testValue"> <com-data>
<button bindtap="getChild">点我获议组件实例</button>

   getChild(){
       let child = this.selectComponent(".testValue");
       child.setData({age:20})
       child.testLog()
   }
子组件:
   testLog(){
       console.log(this.data)
       console.log(”我是子组件的方法”)
   }

behaviors

概念:是小程序中，用于实现组件间代码共享的特性，类似vue中的mixins

behaviors的工作模式

每个behaviors可以包含一组属性，数据，生命周期函数和万法。组件引用时，它的属性，数据和方法会被合并到组件
每个组件可以引用多个behaviors，behaviors也可以引用其他的behaviors

创建behaviors

   调用Behavior(Object object)方法即可创建一个共享的behavior实例对象，供所有的组件使用
   //调用Behavior0方法，创建实例对象
   //并使用module.exports将behavior实例对象共享出去
   module.exports = Behavior({
       properties:{},
       data:{},
       methods:{}
       .....
   })

导入并使用behaviors

在组件中，使用require0方法导入需要的behavior，挂载后即可访问behavior中的数据或方法
const myBehavior = require("../../behaviors/my-behavior)

       Component({
           behaviors:[myBehavior]
       })

组件UI*

.小程序对npm的支持与限制

   目前，小程序已经支持使用npm安装第三方包，从而来提高小程序的开发效率。但是，在小程序中使用npm包有三个限制:
   (1)不支持依赖于node.is内置库的包
   (2)不支持依赖于浏览器内置对象的包
   (3)不支持依赖于C++插件的包
总结:虽然npm上的包有千千万，但是能供小程序使用的包却“为数不多”

安装vant组件库

(1)打开终端执行npm init (一定要先执行这一条命令)，执行完成会有package.json文件
(2)下载vant包: npm i @vant/weapp -S --production,会出现node modules文件夹
（3)安装miniprogram(可忽略这一步)，npmiminiprogram-sm-crypto --production
(4)修改配置: 这一步很重要，将app.json文件中的style:v2这行代码删除
(5)在project.config;json文件中添加如下配置，使开发者工具可以正确索引到npm依赖的位置

{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./"
}
]
}
}
(6)构建npm工具，如果调试器报错，页面显示不正常则需要重新构建
(7)使用vant组件，在app.json文件中，进行如下引入
   "usingComponents":{
       "van-button":"@vant/weapp/button/inde"
   }