样式WXSS

WSXX（weixin style sheets）是一套样式语言，用于描述WXML的组件样式。小程序样式使用大部分和web中的css一样，但有两个不同点

1.不支持通配符 ( * )
2.新增了一个响应式单位

写法错误，只能写标签选择器来实现

响应式单位rpx

rpx(responsive pixel):规定不管屏幕为多少px，按照rpx来换算为750rpx

可以使用vw单位
手机屏幕的宽度
10rem = 100vw = 750rpx
不能使用rem

内置组件

1.view:是一个可以替代web中div的容器标签，是一个块级原生，独占一行

2.text:文本标签，理解一起的span标签，行内元素

<text class="" selectable="false" space="false" decode="false"> 哈士奇</text>

3.image：图片标签，小程序中的图片标签有诸多知识和一起的web不一样。默认大小为320*240,支持懒加载（lazy-load=true），通过mode属性控制渲染效果

mode渲染模式，绝对图片内容如何显示

4. swiper:可以理解为小程序内置的轮播图，可以特别方便实现轮播功能。默认宽度和高度为100% * 150px

当swiper 和 image一起使用时，需要调整两者的高度

<swiper >
    <swiper-item class="" item-id="">
        哈士奇
    </swiper-item>
    <swiper-item class="" item-id="">
        萨摩耶
    </swiper-item>
      
    <swiper-item class="" item-id="">
       阿拉斯加
    </swiper-item>
</swiper>

swiper常用属性

5. navigator : 小程序中的导航标签，类似web中的a标签

块级元素

通过url来指定跳转的页面

还可以跳到其他小程序

跳转的页面时当前小程序内时

跳转到其他的小程序页面时

设置target = "miniProgram" 设置app-id=""

<navigator target="miniProgram" app-id="wxf9e01cdca4779ccb" hover-class="navigator-hover" open-type="navigate">
    跳转
</navigator>

点击跳转时

或者填写属性short-link = "链接" 链接可以通过【小程序菜单】->【复制链接】获取 6. button

7. rich-text：小程序中内置的富文本标签，通过传入的nodes属性来使用

user-select属性可以控制文本内容是否可以被选中

页面显示如下

8.radio 单项选择

//wxml结构 checked是否选中选中
<radio-group bindchange="changeFn">
    <label for="" wx:for="{{items}}" wx:key="value">
        <view>
            <radio value="{{item.name}}" checked="{{item.checked}}>
                {{item.name}}
            </radio>
              
        </view>
          
    </label>
</radio-group>
//wxjs
page({
 data:{
   items: [
      {value: 'gz', name: '广州'},
      {value: 'hz', name: '杭州', checked: true},
      {value: 'zh', name: '珠海'},
    ]
  },
  //处理事件
  /*
  radio 标识。当该radio 选中时，radio-group 的 change 事件会携带radio的value
  */
    changeFn(value){
       console.log(value);
  },
 })

返回

多选框 checkbox

//wxml
<!-- 多选框 -->
<checkbox-group bindchange="changeFn">
    <label wx:for="{{items}}" wx:key="value">
        <checkbox value="{{item.name}}">
            {{item.name}}
        </checkbox>
    </label>
</checkbox-group>
//wxjs
page({
 data:{
 items: [
      {value: 'gz', name: '广州'},
      {value: 'hz', name: '杭州', checked: true},
      {value: 'zh', name: '珠海'},
    ]
  },
  //事件处理
    changeFn(val){
       console.log(val);
       console.log(val.detail.value);//数组
  },
})

自定义组件

1.创建

小程序组件的创建，可以利用微信开发之工具快速创建

1.根目录创建文件夹 components

2.该文件夹内 创建一个和组件名称同名的文件夹，如MyButton

3.在开发之工具中，鼠标右键点击MyButton文件夹选择新建组件

2.注册

哪个页面想要使用自定义组件，就在哪个页面的json文件中注册

3.使用

页面完成了注册，就可以直接在标签使用它了

自定义组件

父子传参

父组件

子组件 通过properties:{}接收

子传父

将数据从子组件传递给父组件

1.父组件定义接收数据的方法

2.父组件通过绑定自定义事件

3.子组件触发点击事件

4.点击事件中触发自定义事件

//wxml,父组件中
  <!-- 这堆是自定义组件(子组件) -->
<MyEvent bind:receive="recevieFn" title="第一次传值"></MyEvent>
<MyEvent bind:receive="recevieFn" title="第二次传值"></MyEvent>
<MyEvent bind:receive="recevieFn" title="第三次传值"></MyEvent>
//子组件
<view bindtap="btnFn" class="view">{{title}}</view>

//wxjs文件中
//父组件
 //接收子组件传过来的数据
  recevieFn(params){
      console.log('父组件触发',params);
  },
  //子组件
page({
    properties: {
    //接收数据
   title:{
     type:String,
     value:''
   }
  },
  btnFn(){
  let myEventDetail = {} // detail对象，提供给事件监听函数
 let myEventOption = {} // 触发事件的选项
 //this.properties.title === this.data.title
  this.triggerEvent("receive",this.data.title)
}, 
    })

自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项

小程序生命周期

生命周期(Life Cycle)是指一个对象从创建->运行->销毁的整个阶段，强调的是一个时间段

小程序中的生命周期分为三大类

1.应用生命周期

2.页面生命周期

3.组件生命周期

应用生命周期

指小程序从启动->运行->销毁的过程

页面生命周期

指小程序中，每个页面的加载->渲染->销毁的过程

组件生命周期

组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。

其中，最重要的生命周期是 created attached detached ，包含一个组件实例生命流程的最主要时间点。

• 组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。  通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
• 在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
• 在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。
• 生命周期方法可以直接定义在 Component 构造器的第一级参数中

Component({
  lifetimes: {
    attached() {
      // 在组件实例进入页面节点树时执行
      console.log('我是组件,一进页面就触发');
    },
  },
 })

发送请求

    /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
      wx.request({
        url:'https://cnodejs.org/api/v1/topics',
        //请求成功
        success(res){
     console.log(res.data.data[0].content);
        },
        //请求失败
        fail(err){
          console.log(err,'请求错误了');
        }
      })
  }, 

 onLoad(options) {
      wx.request({
        url:'https://cnodejs.org/api/v1/topics',
        //请求成功
        success:(res)=>{
    //可以修改data里面的值
    this.setData({
         //.....
      })
        },
        //请求失败
        fail(err){
          console.log(err,'请求错误了');
        }
      })
  },