零基础学习微信小程序（7）:组件

view标签

text标签相当于html里的span标签，是行内元素，写入时，不会进行换行

text标签

view标签相当于html里的div标签，是块级元素，写入时，会导致换行
text标签只能嵌套text，只有该标签才有长按文字复制的功能

<!--pages/demo03/demo03.wxml-->
<!--长按文字复制-->
<text selectable>1</text>
<!--是否解码-->
<text decode>2&nbsp;2</text>
<view>3</view>

image

由于小程序使用的使用对于图片的大小是有要求的，图片不能过大，所以最好使用的图片是外网的图片。
其实在csdn上上传的图片不是直接放置图片到博客里的，而是用户在博客里复制自己的图片时，图片也被上传到了网上。此时放入图片的连接，就可以显示这个图片。例如上面的图在markdown里的显示是酱婶的：

感兴趣的小伙伴可以使以下点击此处
就可以出现上面那种图。
所以打算在小程序里插入图片话，需要先讲图片上传到网站上。
注意点：
图片存在默认的宽高：320*240
mode决定图片的宽高适配情况，可以参考开发文档进行使用。

小程序中的图片支持懒加载，lazy-load.
意思就是会判断图片出现在屏幕的时候会自动的加载出来

swiper：

是小程序内置的轮播图效果
轮播图外层容器为swiper，存在默认样式,width=100%，height=150px。同时image存在默认宽度和高度 320*240.。
这时候的显示效果观赏性不强，所以这时候需要进行一定的调整。
这时候可以根据公式：
swiper width/swiper height=image width/image height
每一个轮播项是swiper-item，swiper-item的默认宽度和高度都是100%
制作轮播图的第一步是先在swiper里插入图片，此时要注意图片的大小和swiper的大小需要进行调整
第二步是为swiper修改属性值。

/* pages/demo08/demo08.wxss */
swiper{
    width: 100%;
    height: calc(100vw*352/1125);
}
image{
    width: 100%;
}

<swiper autoplay circular interval="4000" indicator-dots>
    <swiper-item><image mode="widthFix" src="//img.alicdn.com/imgextra/i3/153/O1CN01fM1GmB1D07CNrVw4f_!!153-0-luban.jpg"/></swiper-item>
    <swiper-item><image mode="widthFix" src="//gw.alicdn.com/imgextra/i4/127/O1CN01Rr0Esl1CoCtvDoqbg_!!127-0-lubanu.jpg"/></swiper-item>
    <swiper-item><image mode="widthFix" src="//gw.alicdn.com/imgextra/i1/18/O1CN01wD46EF1C0HjFmU5ZU_!!18-0-lubanu.jpg"/></swiper-item>
</swiper>
  

navigator：

导航组件 类似于超链接标签
navigator是一个块级元素，加入的时候是会换行的
target是表示要跳转到当前的小程序，还是其他的小程序页面，默认值是self即自己的小程序，miniProgram是其他的小程序页面
url表示要跳转的页面路径

<!--pages/demo09/demo09.wxml-->
<navigator url="/pages/demo08/demo08" open-type="navigate">navigate</navigator>
<navigator url="/pages/demo08/demo08" open-type="redirect">redirect</navigator>
<navigator url="/pages/index/index" open-type="switchTab">swithchTab</navigator>
<navigator url="/pages/demo08/demo08" open-type="relaunch">relaunch</navigator>

效果：

rich-text：

可以讲字符串解析为对应的标签，类似于v-html功能

button：

contact功能的使用需要微信小程序的后台配置，需要通过真机调试
share功能可以将小程序分享给微信朋友和微信群里，但是不能但是不能分享到微信朋友圈里
getPhoneNumber功能需要结合一个事件（bindgetphonenumber）来使用，不是企业的小程序账号，没有权限来获取用户的手机号码。在事件的回调函数中，通过参数来获取信息，此时获取到的信息是已经加密过的
getUserInfo功能可以获取用户的个人信息，使用方法相当于获取用户的手机号方法，不存在加密字段
launchApp功能在小程序中直接打开app，需要通过app的某个链接打开app
openSetting功能打开小程序的内置授权页面，而且授权页面中只会出现用户曾经点击过的权限
feedback功能是意见反馈，需要通过真机调试

<text>pages/demo10/demo10.wxml</text>
<button>默认按钮</button>
<button size="mini">默认按钮</button>
<button type="primary">primary按钮</button>
<button type="primary" plain>plain按钮</button>
<button type="primary" disabled>disabled按钮</button>
<button type="primary" loading>loading按钮</button>

icon图标：

radio单选框：

需要搭配radio-group来使用，才能实现单选的功能

// pages/demo10/demo10.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    gender:""
  },
  handleChange(e){
    console.log(e);
    this.setData({
      gender:e.detail.value
    })
  }

})

<!--pages/demo10/demo10.wxml-->
<radio-group bindchange="handleChange">
    <radio value="male">male</radio>
    <radio value="female">female</radio>
</radio-group>
<view>
 {{gender}}   
</view>

checkbox复选框：

与radio的是相似的，需要搭配checkbox-group使用。

// pages/demo10/demo10.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    fruit:[],
    list:[
      {
        id:0,
        name:"apple",
        value:"apple"
      },
      {
        id:1,
        name:"grape",
        value:"grape"
      },{
        id:2,
        name:"banana",
        value:"banana"
      }
    ]
  },
  handleChange(e){
    console.log(e);
    this.setData({
      fruit:e.detail.value
    })
  }

})

<!--pages/demo10/demo10.wxml-->
<checkbox-group bindchange="handleChange">
    <checkbox wx:for="{{list}}" value="{{item.value}}" wx:key="id">
    {{item.name}}
    </checkbox>
</checkbox-group>
  <view>
      {{fruit}}
  </view>

文章内容为视频零基础玩转微信小程序【黑马程序员】知识点整合