小程序 view\text 解码和image标签

wtml

<!--
    1、 长按文字复制 
    2、对文本内容进行解码
    -->
<text user-select="true" decode>pages/demo5/demo5.wxml
&nbsp;
123；
</text>

image

!-- 图片标签image
1、src  指定要加载图片的路径
图片存在默认的宽度和高度 320*240  
2、mode 决定 图片内容 如何 和 图片标签 做适配
scaleToFill  默认值 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit  缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
           页面轮播图 常用
其余可看微信官方文档
3、小程序当中大的图片 直接就支持 懒加载  lazy-load
  lazy-load 会自己判断 当图片 出现在 视口 上下三屏高度之内的时候 自己开始加载
 -->
<image mode="aspectFit" lazy-load src="https://img0.baidu.com/it/u=374248271,322086601&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334"
 
/>

自动轮播图

wxml

!-- 
    1、轮播图外层容器  swiper 
    2、每一个轮播项 swiper—item
    3、swiper标签存在 默认样式
      1、width 100%
      2、height 150px image存在默认宽度和高度 320*240
      3、swiper无法实现内容撑开
    4、先找出来 原图的宽度和高度  等比例 给swiper定宽度和高度
      原图的宽度和高度是 351*468
      swiper 宽度/swiper 高度=原图的宽/原图的高度
      swiper 高度 =swiper 宽度*原图的高度 / 原图的宽度
      height：750rpx*468/351  //100vw
      5、自动轮番 autopaly 自动轮播
      6、interval 修改轮播修改的时间
      7、衔接循环轮播
      8、indicator-dots 显示 指示器 分页器 索引器
    -->
<swiper autoplay="true" interval="2000" circular="true" indicator-dots="true" >
<swiper-item>
<image mode="widthFix" src="https://img.alicdn.com/imgextra/i2/1782660161/O1CN01LzId9S1D3mU7sSjgR_!!0-saturn_solar.jpg_468x468q75.jpg_.webp"/>
</swiper-item>
<swiper-item>
    <image mode="widthFix" src="https://img.alicdn.com/imgextra/i1/119701626/O1CN01bxJQXM1NskihZx8oy_!!0-saturn_solar.jpg_468x468q75.jpg_.webp"/>
</swiper-item>
<swiper-item>
    <image mode="widthFix" src="https://img.alicdn.com/imgextra/i3/1880990057/O1CN013NGiEQ1CI9IAat1Ne_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" />
    </swiper-item>
</swiper>

wxss

swiper{
    width:100%;
    height:100vw*468/351;
}
image{
    width:100%;
}

导航栏

<!-- 导航组件 navigator
0 块级元素 默认会换行 可以直接加宽度和高度
1、url要跳转的路径 相对路径 绝对路径
2、target 要跳转到当前的小程序 还是其他的小程序的页面
  self 默认自己的小程序的页面
  miniProgram 其他的小程序的页面
  3、open-type 跳转的方式
     navigate 默认值 保留当前页面，跳转到应用内的某个页面，但是不能跳转到 tabbar页面
     redirect 关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar页面
     switch 跳转到tabBar页面，并关闭其他所有非tabBar页面
     reLaunch 关闭所有页面，打开应用内的某个页面
 -->
 <!-- //有返回按钮 -->
 <navigator url="/pages/demo1/demo1">轮播页面</navigator>
 <!-- /没反应 -->
 <navigator url="/pages/index/index">直接跳转到tabbr页面</navigator>
<!-- //没有返回按钮 -->
 <navigator open-type="redirect" url="/pages/demo1/demo1">小车神</navigator>
<!-- 跳转到tabBar页面 -->
 <navigator open-type="switchTab" url="/pages/index/index">直接跳转到tabBar页面</navigator>
<!-- 可以随便跳转 -->
<navigator open-type="reLaunch" url="/pages/index/index">可以随便跳转</navigator>

按钮

<!-- button标签
      1、外观属性
        size：控制按钮的大小
          default：默认大小
          mini：小尺寸
      2、type：用来控制页面颜色的
         default：灰色
         primary：绿色
         warn：红色
      3、plain：按钮是否镂空
      4、名称前是否带loading图标
     -->
     <button>默认按钮</button>
     <button size="mini">mini 默认按钮</button>
     <button type="primary">绿色 默认按钮</button>
     <button type="warn">红色 默认按钮</button>
     <button type="warn" plain>plain红色 默认按钮</button>
     <button type="primary" loading> loading绿色 默认按钮</button>

显示

 button的开放能力

 <!-- button的开放能力
     open-type：
     1、
 contact	打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明 （小程序插件中不能使用）
 share	触发用户转发，到微信朋友中，不能把小程序分享到朋友圈	
 getPhoneNumber	获取用户手机号，结合一个事件来使用 不是企业的小程序账号 没有权限来获取用户的手机号码 可以从bindgetphonenumber回调中获取到用户信息，具体说明 （小程序插件中不能使用）
    1、绑定一个事件 bindgetphonenumber
    2、在事件的回调函数中获取参数信息
    3、获取到的信息已经加密过了
       需要用户自己搭建小程序的后台服务器中进行解析 手机号码，返回到小程序中 就可以看到信息了
 getUserInfo	获取用户信息，可以从bindgetuserinfo回调中获取到用户信息 （小程序插件中不能使用）
  使用方法：
    1、类似于用户的手机号码
    2、可以直接 获取 不存在加密的字段
 launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数具体说明	
   1、需要现在app中 通过某个连接打开小程序
   2、在小程序 中 在通过这个功能重新打开一个app
   3、找到京东的app和京东的小程序
 openSetting	打开小程序内置的 授权设置页
   1、授权页面中只会出现用户曾经点击过的 权限
 feedback	打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容
   1、只能通过真机调试来打开
      -->
      <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>