微信小程序学习（四）——小程序常见组件

1.view 标签——用于代替HTML中的 div 标签

2.text标签——类似于HTML中的 span 标签

 

   1）文本标签

   2）只能嵌套 text 标签

   3）只有text 标签带有长按文字可以复制的功能

   4）可对空格、回车进行编码

对文本文字长按复制，使用text 标签的selectable 属性

对文本内容进行编码，使用text 标签的decode 属性，如果不使用decode 的属性，那么text标签会把像 &nbsp（空格） 等编码内容打印出来，而不会编码出一个空格或者其他标识符内容。

<!--1.长按文字复制  selectable-->
<!--2.对文本内容进行编码 decode-->
<text selectable decode>长按复制 &nbsp;文本解码       &lt;</text>

 3.image 图片标签

     1）必须是网络上的图片链接

     2）默认宽度320px，默认高度240px

     3）src属性指定需要加载的路径

     4）mode 属性决定图片内容如何和图片标签宽高做适配            

       （1）scaleToFill 默认值不保持纵横比缩放图片，使图片的宽高完全拉伸值填满image元素

       （2）aspectFit 保持宽高比，确保图片的长边显示出来——页面轮播图常用

       （3）aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来——少用

       （4）widthFix 以前web的图片的宽度指定了之后高度会自己按比例来调整——常用

       （5）bottom类似以前的background-position

     5）小程序当中的图片直接就支持懒加载  lazy-load(懒加载：会自己判断当图片出现在视口上下三屏的高度之内的时候自己开始加载图片)

<image mode ="aspectFit" lazy-load src="https://ae01.alicdn.com/kf/He665ec8da6ba4991b9caae11e838ce3al.jpg" />
  

可以在WXss中规定image的表现样式

image{
    box-sizing: border-box;
    border: 1px solid red;
    width: 300px;
    height: 200px;
}

 

             

4.swiper轮播图标签

      1）轮播图的外层容器——swiper

      2）每一个轮播项——swiper-item

     3）swiper标签存在默认样式 width 100%   height 150px，同时image标签也存在默认宽度和高度  320*240

           注意：swiper高度无法由像素撑开

     4）给swiper定宽高的方法：

             先算原图的宽高等比例给swiper顶宽度和高度

             swiper 宽度/swiper 高度=原图的宽度/原图的高度

             swiper高度=swiper宽度*原图高度/原图宽度（vw）

100%意味着占据着的宽的和页面的全部宽度等长

swiper
{
    width: 100%;
    height: calc(100vw*300/600);
}
image
{
    width: 100%;
}

     5） autoplay 属性——自动轮播   

     6）interval 属性——修改轮播时间  单位是毫秒

     7）circular 属性——循环轮播

     8）indicator-dots——显示轮播时的面板指示点

     9 ） indicator-color——指示器未选择的颜色

    10）indicator-active-color——选中时指示器的颜色

<swiper autoplay circular indicator-dots interval="3000">
    <swiper-item>
        <image mode ="widthFit"src="https://ae01.alicdn.com/kf/Heb13691d9b9c4a4b9d4c5ddb46cdf81ea.jpg" />     
    </swiper-item>
    <swiper-item>
        <image mode="widthFit" src="https://ae01.alicdn.com/kf/H71b50011facd4b988a57521c06b721d7a.jpg" />     
    </swiper-item>
    <swiper-item>
        <image mode="widthFit" src="https://ae01.alicdn.com/kf/Hdc02dad85f1d4e699032d59efff7d8d80.jpg" />     
    </swiper-item>
</swiper>

 

5. navigator 导航标签

       1）导航组件——是块级元素，会默认换行，可以直接加宽度和高度

       2）url  属性是需要跳转的页面路径，路径可以是绝对路径或者相对路径

                  注意：注意路径之间都是‘/’

       3）target 属性是要跳转到当前小程序还是其他小程序的页面

                 self 默认值  自己小程序的页面

                 miniProgram  其他小程序的页面

      4）open-type 属性是跳转的方式

               （1）navigate 默认值  保留当前页面，跳转到应用程序内的某个页面，但是不能跳到  tabbar页面

               （2）rediect  关闭当前页面，跳转到应用程序内的某个页面，但是不允许跳转到tabber页面

               （3）switchTab 跳转到tabber页面，并且关闭其他所有非tabber页面

               （4）reLaunch 关闭所有页面，打开到应用内的某个页面

              （5）navigateBack 关闭当前页面，返回上一级页面或多级页面，可通过getCurrentOages()获取当前的页面栈，决定需要返回第几层

              （6）exit 退出小程序，target="miniProgram"时生效

<navigator url="/pages/swiper/swiper">
    点此跳转轮播图页面
</navigator>
<navigator open-type="switchTab" url="/pages/index/index">
    跳转tabber页面
</navigator>
<navigator open-type="redirect" url="/pages/swiper/swiper">
    点此再次跳转
</navigator>

在此演示 navigate 默认值、redirect、switchTab三个open-type的跳转方式

点击open-type="navigate"的按钮，我们发现有返回按钮，是可以反回的，所以意味着当前页面并没有被关闭。

点击open-type="switchTab"的按钮，跳转到了一个tabBar页面，但是没有返回按钮，说明当前页面已经被关闭。

 点击open-type="redirect"的按钮，跳转到了轮播图页面，没有返回按钮说明当前页面已经关闭。

6.rich-text富文本标签

 使用 nodes 属性来实现

1）接收标签字符串——最常用

     在其他地方扒一段代码放在js变量中，使用字符串变量来存储，再在html文件中使用nodes来接收字符串。

<rich-text  nodes="{{html}}">
    
</rich-text>

2）接收数组对象——没想明白

    页面js文件

// pages/rhtext/rtext.js
Page({

  /**
   * 页面的初始数据
   */
data: 
{
//对象数组
html:
[{
  //1  div标签 name属性来指定
  name:"div",
  //2  标签上有哪些属性
  attrs:
  {
      //标签上的属性  class style
      class:"my_div",
      style:"color:red;"
  },
  //3.子节点children要接收的数据类型和nodes第二种渲染方式的数据类型一致
  children:
  [{
    name:"p",
    attrs:{},
    //放文本
    children:
    [{
      type:"text",
      text:"hellow"
    }]
  }]
}]
  }
})

页面html文件 

<rich-text  nodes="{{html}}">
    
</rich-text>

 

 

 7.button 按钮标签

button的外观样式

  1）size 属性

        default默认大小

        mini小尺寸

  2）type 属性

         default灰色

         primary绿色

         warn红色

  3）plain 属性定义按钮是否镂空，背景色透明

  4）loading 属性定义按钮名称前是否有加载图标

<button size="mini" type="warn">按钮</button>
<button plain>按钮</button>
<button loading>按钮</button>

button 的开发能力

 1）contact 直接打开，客服对话功能，需要在微信小程序的后台配置

         只能真机调试

 2）share 转发当前的小程序到微信朋友中，不能把小程序分享到朋友圈

 3）getPhoneNumber 获取当前用户的手机号码信息  结合一个事件来使用 ——不是企业的小程序账号，没有权限来获取用户的手机号码 

       （1）绑定一个事件 bindgetphonenumber

         (2)在事件的回调函数中  通过参数来获取信息

         (3)获取到的信息已经加密过了

            需要用户自己搭建小程序的后台服务器，在后台服务器中进行解析手机号码，返回到小程序中，就可以看到信息了

  4）getUserInfo 获取当前用户的个人信息

        （1）使用方法类似获取用户的手机号码

        （2）可以直接获取，不存在加密字段

    5）launchApp 在小程序当中直接打开APP

        （1）需要现在APP中通过APP的某个链接打开小程序

        （2）在小程序中再通过这个功能重新打开APP

        （3）测试：找到京东APP再找一个京东小程序

    6）openSetting 打开小程序内置的授权页面

        在授权页面中只会出现用户曾经点击过的权限

    7）feedback 打开小程序内置的意见反馈页面

        只能真机调试

获取用户的手机号码和个人信息的接口函数，已经和按钮绑定了，这样就可以使用。

Page({
//获取用户的手机的号码信息
getPhoneNumber(e)
{
  console.log(e);
},
getUserInfo(e)
{
  console.log(e);
}
  
})

<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
<button open-type="getUserInfo"  bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>

8.icon图标标签

icon 标签小程序中的字体图标

   1）type 属性是图标类型

       success|success_no_circle|info|warn|waiting|cancel|download|search|clear

   2）size 属性是图标大小

   3）color 属性是图标颜色

<icon type="success" size="60" color="yellow"></icon>

9.radio 单选框标签

    1）radio标签必须要和父元素radio-group来使用，想要获取用户所钩选的内容那么只能绑定一个接口函数

    2）value 属性选中的单选框的值  color 属性是单选框被选中的颜色

    3）需要给radio-group绑定change事件

    4）需要在页面中显示选中的值

接收所勾选的内容，获取选中的单选框的值，可以先打印，看单选框的值在什么地方，再进行赋值。

// pages/icon/icon.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    gender:""
  },
  handleChange(e)
  {
    //console.log(e);
    //1.获取单选框中的值
    let gender=e.detail.value;
    //2.把值赋给data中的数据
    this.setData
    ({
       gender//相当于gender:gender
    })
  }
})

<radio-group bindchange="handleChange">
  <radio color="red" value="men">
    男
  </radio>
  <radio color="red" value="women">
    女
  </radio>
</radio-group>
  

<view>
  选中的是：{{gender}}
</view>

 

10.checkBox 复选框标签

和radio类似，也必须和checkbox-group配套使用，并使用checkbox-group绑定勾选事件函数。

Page({
  data: {
    list:[
      {
        id:0,
        name:"🍎",
        value:"apple"
      },
      {
        id:1,
        name:"🍇",
        value:"grape"
      },
      {
        id:2,
        name:"🍌",
        value:"banana"
      }
    ],
    checkList:[]

  },
  //复选框的选中事件
  handleCheckBox(e)
  {
    //1.获取被选中的复选框的值
    const checkList=e.detail.value;
    //2.进行赋值
    this.setData({
      checkList
    })
  }
})

checkList是一个空白的数组，用于存放所选择内容的值 ，checkbox使用循环渲染更加方便。

<view>
    <checkbox-group bindchange="handleCheckBox">
      <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
      {{item.name}}
      </checkbox>    
    </checkbox-group>
    <view>
        选中的水果：{{checkList}}
    </view>
</view>