小程序常见组件04

作者: 仕明同学 | 来源:发表于2020-02-17 15:32 被阅读0次

小程序常见组件04
小程序常见组件
【Flutter】基础组件【04】Row/Column
微信小程序(六)表单组件
微信小程序直播如何接入？开源代码接入案例分享
微信小程序-canvas压缩图片使用入门
微信小程序(四)视图组件
小程序 image 组件常见问题
微信小程序画布(canvas)转化出来的图片模糊问题的解决方案
【总结】2017.03.02

view ：hover-class 按下去颜色改变 hover-stop-propagation：指定是否阻止本节点的祖先节点出现点击态

<view hover-class="h-class" hover-stop-propagation="false">按我颜色变</view>

text

文本标签
只能嵌套 text
长安文字可以复制（只有他有着功能）
可以对空格回车进行编码

1 selectable :长安复制
2 对文本内容进行解码 decode
decode可以解析的有 &nbsp(空格); <（小于符号） > & '

<text selectable="{{true}}" decode="{{true}}">哈哈&nbsp;123 &lt;</text>

图片 image小程序最多2m，最好把图片放在网上 ,图片默认宽度 320 *240

mode 决定图片内容如何和图片做适配，就好像安卓一样
- scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit: 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
小程序中的lazy-load 懒加载：就是出现在窗口的时候，图片开始来加载
lazy-load="false" 默认的是false 这个用处在，大量图的时候列表吧

<image class="" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4010395508,932047146&fm=26&gp=0.jpg" mode="scaleToFill" lazy-load="false" binderror="" bindload="" />

swiper 容器

image.png

swiper-item 轮播项
swiper : width 是100% height 是150px image的默认：320*240
swiper 如何适应图片的宽高
autoplay:自动轮播 interval:时间默认是5s circular：循环轮播 indicator-dots:指示器

<swiper autoplay="{{true}}"  interval="1000" circular="{{true}}" indicator-dots="{{true}}" indicator-active-color="#ff4500" indicator-color="rgba(0, 0, 0, .3)">
    
    <swiper-item class="" item-id="">
        <image src="https://gw.alicdn.com/tfs/TB1xv_6vBv0gK0jSZKbXXbK2FXa-380-320.png" />
        
       
    </swiper-item>

    <swiper-item class="" item-id="">
         <image class="" src="https://gw.alicdn.com/bao/upload/TB1n5XVvrj1gK0jSZFuXXcrHpXa.jpg_Q75.jpg" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="">
             
         </image>
    </swiper-item>
      
      <swiper-item class="" item-id="">
            <image class="" src="https://gw.alicdn.com/bao/upload/TB1ujCKvhD1gK0jSZFsXXbldVXa.jpg_Q75.jpg" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
           
    
      </swiper-item>
        
      
</swiper>

导航组件 navigator (默认换行，块级元素),注意跳转的方式

1、url 要跳转的页面绝对和相对路径
2、target 要跳转到当前小程序还是其他的小程序在哪个目标上发生跳转，默认当前小程序默认是self
3、open-type 跳转的方式
navigate 保留当前页面，跳转到引用内的页面，但是不能跳转tabbar 页面
redirect 关闭当前页面，跳转到引用内的某个页面，但是不嫩跳转到tabbar页面，其实就是灭有返回按钮了
switchTab 跳转到tabbar页面，关闭其他非tabbar的页面
reLaunch 关闭所有页面，打开引用内的某个页面

<navigator class="" target="" url="/pages/demo10/demo10" hover-class="navigator-hover" open-type="navigate">
    轮播图页面1
</navigator>

<navigator class="" target="" url="/pages/demo10/demo10" hover-class="navigator-hover" open-type="navigate">
    轮播图页面2
</navigator>

<navigator class="" target="" url="/pages/index/index" hover-class="navigator-hover" open-type="navigate">
    跳转到tabbar 页面
</navigator>
<navigator  class="" target="" url="/pages/index/index" hover-class="navigator-hover" open-type="switchTab">
     switchTab 跳转到tabbar页面，关闭其他的页面
</navigator>
<navigator  class="" target="" url="/pages/index/index" hover-class="navigator-hover" open-type="reLaunch">
      reLaunch  关闭所有页面，打开引用内的某个页面
</navigator>

rick-text 富文本标签

nodes 属性来实现
接受标签字符串

 // 标签支付串 比较常用
    html: '<div style="border: 0px solid black; position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0;"><div style="border: 0px solid black; position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; width: 320px; height: 136.533px; padding-bottom: 8.53333px; background-color: rgb(255, 255, 255); overflow: hidden;"><img lazyload="true" placeholder="https://gw.alicdn.com/tfs/TB1vexLQXXXXXXlXpXXXXXXXXXX-1-1.png" autoremovescheme="true" autoreplacedomain="true" autoscaling="true" autowebp="true" ignoregif="true" autocompress="true" highquality="true" compresssuffix="Q75,Q50" defaultheight="750rem" autopixelratio="true" isonce="1" fallbacksource="[object Object]" src="//gw.alicdn.com/tfs/TB15vHzbKuSBuNjy1XcXXcYjFXa-750-552.png_790x10000.jpg_.webp" style="display: flex; width: 320px; height: 235.947px; position: absolute; top: -132.267px; left: 0px;"><div style="border: 0px solid black; position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; width: 320px; height: 136.533px; overflow: hidden;"><!-- empty --><div style="border: 0px solid black; position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; width: 707.84px; height: 136.533px; transform: translate3d(0px, 0px, 0px); transition: all 300ms ease 0ms;"><div style="border: 0px solid black; position: absolute; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; transform: scale(1); opacity: 1; left: 0px; top: 0px; width: 287.573px; height: 136.533px; margin-left: 5.97333px; transition: all 300ms ease 0ms;"><div sliderid="1" preventmoveevent="true" style="-webkit-box-orient: horizontal; flex-direction: row; position: relative; width: 287.573px; height: 136.533px;"><img placeholder="https://gw.alicdn.com/tfs/TB1vexLQXXXXXXlXpXXXXXXXXXX-1-1.png" autoremovescheme="true" autoreplacedomain="true" autoscaling="true" autowebp="true" ignoregif="true" autocompress="true" highquality="true" compresssuffix="Q75,Q50" defaultheight="750rem" lazyload="false" autopixelratio="true" isonce="1" fallbacksource="[object Object]" src="//gw.alicdn.com/tfs/TB154_SlkOWBuNjSsppXXXPgpXa-674-320.png_580x10000.jpg_.webp" style="display: flex; width: 287.573px; height: 136.533px; position: absolute; left: 0px; top: 0px;"><div style="border: 0px solid black; position: absolute; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; left: 4.26667px; top: 0px; width: 279.04px; height: 128px; background-color: rgb(255, 255, 255); overflow: hidden; border-radius: 10.24px;"><!-- empty --><div resizemode="cover" source="[object Object]" placeholder="https://gw.alicdn.com/tfs/TB1vexLQXXXXXXlXpXXXXXXXXXX-1-1.png" autoremovescheme="true" autoreplacedomain="true" autoscaling="true" autowebp="true" ignoregif="true" autocompress="true" highquality="true" compresssuffix="Q75,Q50" defaultheight="750rem" lazyload="false" autopixelratio="true" isonce="1" style="border: 0px solid black; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; height: 128px; position: absolute; left: 0px; top: 0px; width: 279.04px; overflow: hidden; border-radius: 10.24px; background-image: url(&quot;undefined&quot;); background-size: cover; background-repeat: no-repeat; background-position: center center;"></div><!-- empty --><div resizemode="cover" source="[object Object]" placeholder="https://gw.alicdn.com/tfs/TB1vexLQXXXXXXlXpXXXXXXXXXX-1-1.png" autoremovescheme="true" autoreplacedomain="true" autoscaling="true" autowebp="true" ignoregif="true" autocompress="true" highquality="true" compresssuffix="Q75,Q50" defaultheight="750rem" lazyload="false" autopixelratio="true" isonce="1" style="border: 0px solid black; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; height: 128px; position: absolute; left: 0px; top: 0px; width: 279.04px; background-image: url(&quot;//gw.alicdn.com/tfs/TB1wrqQvUH1gK0jSZSyXXXtlpXa-654-300.jpg_570x10000Q75.jpg_.webp&quot;); background-size: cover; background-repeat: no-repeat; background-position: center center;"></div><div sliderid="1" preventmoveevent="true" style="position: absolute; left: 0px; top: 0px; width: 279.04px; height: 128px;" data-spm-anchor-id="a2141.7631544.0.i0"></div></div></div></div><div style="border: 0px solid black; position: absolute; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; transform: scale(1); opacity: 1; left: 289.28px; top: 0px; width: 287.573px; height: 136.533px; margin-left: 5.97333px; transition: all 300ms ease 0ms;"><div sliderid="1" preventmoveevent="true" style="-webkit-box-orient: horizontal; flex-direction: row; position: relative; width: 287.573px; height: 136.533px;"><img placeholder="https://gw.alicdn.com/tfs/TB1vexLQXXXXXXlXpXXXXXXXXXX-1-1.png" autoremovescheme="true" autoreplacedomain="true" autoscaling="true" autowebp="true" ignoregif="true" autocompress="true" highquality="true" compresssuffix="Q75,Q50" defaultheight="750rem" lazyload="false" autopixelratio="true" isonce="1" fallbacksource="[object Object]" src="//gw.alicdn.com/tfs/TB154_SlkOWBuNjSsppXXXPgpXa-674-320.png_580x10000.jpg_.webp" style="display: flex; width: 287.573px; height: 136.533px; position: absolute; left: 0px; top: 0px;"><div style="border: 0px solid black; position: absolute; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; left: 4.26667px; top: 0px; width: 279.04px; height: 128px; background-color: rgb(255, 255, 255); overflow: hidden; border-radius: 10.24px;"><!-- empty --><div resizemode="cover" source="[object Object]" placeholder="https://gw.alicdn.com/tfs/TB1vexLQXXXXXXlXpXXXXXXXXXX-1-1.png" autoremovescheme="true" autoreplacedomain="true" autoscaling="true" autowebp="true" ignoregif="true" autocompress="true" highquality="true" compresssuffix="Q75,Q50" defaultheight="750rem" lazyload="false" autopixelratio="true" isonce="1" style="border: 0px solid black; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; height: 128px; position: absolute; left: 0px; top: 0px; width: 279.04px; overflow: hidden; border-radius: 10.24px; background-image: url(&quot;undefined&quot;); background-size: cover; background-repeat: no-repeat; background-position: center center;"></div><!-- empty --><div resizemode="cover" source="[object Object]" placeholder="https://gw.alicdn.com/tfs/TB1vexLQXXXXXXlXpXXXXXXXXXX-1-1.png" autoremovescheme="true" autoreplacedomain="true" autoscaling="true" autowebp="true" ignoregif="true" autocompress="true" highquality="true" compresssuffix="Q75,Q50" defaultheight="750rem" lazyload="false" autopixelratio="true" isonce="1" style="border: 0px solid black; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; height: 128px; position: absolute; left: 0px; top: 0px; width: 279.04px; background-image: url(&quot;//gw.alicdn.com/tfs/TB1vWpVvO_1gK0jSZFqXXcpaXXa-654-300.png_570x10000.jpg_.webp&quot;); background-size: cover; background-repeat: no-repeat; background-position: center center;"></div><div sliderid="1" preventmoveevent="true" style="position: absolute; left: 0px; top: 0px; width: 279.04px; height: 128px;"></div></div></div></div><!-- empty --></div><!-- empty --></div></div></div>'

    ,
    htmlContent: '<header class="sc-VigVT SQtZc"><div class="header-bd"><a class="placeholder"><span class="text iconfont icon-search">寻找宝贝店铺</span></a></div></header>'
    ,

    // 对象数组 不常用

    htmlArr: [
      {
        //  div 标签 
        name: "div",
        // 标签上的属性
        attrs: {
           class :"my_div",
           style:"color:red;"
        },
        //子节点 children 

        children:[
          {
            name:"p",
            attrs:{},
            children:[{
              type:"text",
              text:"hello"
            }]
          }
        ]
      }
    ]

这个功能强大呀

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

 <rich-text class="" nodes="{{htmlContent}}">
     
 </rich-text>


 <rich-text class="" nodes="{{htmlArr}}">
     
 </rich-text>

button ：原有颜色

外观属性
size：大小 type :按钮颜色 plain ：按钮是否镂空，背景色透明
loading ：名称前是否带 loading 图标

 <button size="mini">xiao按钮</button>
 <button size="default">默认按钮</button>

 <button size="default" type="default">默认颜色按钮</button>
<button size="default" type="primary">白色按钮</button>
<button size="default" type="warn">红色按钮</button>
<button size="default" type="warn" plain="{{true}}"> plain ：按钮是否镂空，背景色透明</button>
 <button size="default" loading="{{true}}">默认按钮</button>

button 开放的能力

open-type: 
contact 打开客户对话，需要在后台进行配置才可以
share 转发小程序到微信朋友中 ，不能分享朋友圈
getPhoneNumber 获取当前用户的电话号码 ，企业账号才有权限
   1、绑定事件：bindgetphonenumber 
   2、事件回调中，通过参数来获取信息  
   3、信息已经加密，需要搭建后台服务器，在后台服务器中进行解析   
getUserInfo 获取当前的个人信息
   1、获取用户信息，可以从bindgetuserinfo回调中获取到用户信息
   2。直接获取
launchApp 在小程序中直接打开app
   1、需要app中某个连接打开小程序，
   2、在通过小程序打开这个app 
openSetting 打开小程序内置的授权页面
   1、授权出现用户曾经点击过得权限
feedback 打开小程序的意见反馈
   1、只能通过手机

 <button open-type="contact">打开客服会话</button>
<button open-type="share">转发小程序到微信朋友中</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取当前用户的电话号码</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo" >获取当前的个人信息</button>
<button open-type="launchApp">在小程序中直接打开app</button>
<button open-type="openSetting">打开小程序内置的授权页面</button>
<button open-type="feedback">打开小程序的意见反馈</button>

  //获取手机号
  getPhoneNumber(e){
   console.log(e)
 },
//  获取个人信息
 getUserInfo(e){
   console.log(e)
 },

icon 小程序的字体图标

size 大小 color 颜色

radio 单选框

1、 radio和父元素 radio-group 一起使用
2、value 选中的单项框的值
3、处理函数handelChange
4、显示处理的值

 <radio-group bindchange="handelChange">
     <radio color="red" class="" value="male" >
         男
     </radio>
     <radio class="" value="female"  color="">
        女
     </radio>

     <view class="" hover-class="none" hover-stop-propagation="false">
         选中：{{gender}}
     </view>

 </radio-group>

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

  /**
   * 页面的初始数据
   */
  data: {
    gender:""
  },
  handelChange(e){
    console.log(e);
    //ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。 
    let gender=e.detail.value;
    this.setData({
      gender
    })


  },

checkbox

<view class="" hover-class="none" hover-stop-propagation="false">
    
  <checkbox-group bindchange="handelItemChange">
      <checkbox  value="{{item.value}}" wx:for="{{lists}}" wx:key="id">
       {{item.name}}
      
      
      </checkbox>
  </checkbox-group>
    
<view class="" hover-class="none" hover-stop-propagation="false">
    选中的 : {{checkedList}}
</view>

</view>

let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量，一旦声明，常量的值就不能改变

 /**
   * 页面的初始数据
   */
  data: {
    lists:[
      {
        id:0,
        name:"苹果",
        value:"apple"
      },
      {
        id:1,
        name:"菠萝",
        value:"grape"
      },
      {
        id:2,
        name:"香蕉",
        value:"bananer"
      }
    ],
    checkedList:[]


  },
  handelItemChange(e){
    console.log(e)
    //let 声明的变量只在 let 命令所在的代码块内有效。

// const 声明一个只读的常量，一旦声明，常量的值就不能改变
    const checkedList=e.detail.value;

    this.setData({
      checkedList
    })
  },

小程序常见组件04
view ：hover-class 按下去颜色改变 hover-stop-propagation：指定是否阻止...
小程序常见组件
view,text,rich-text,button,image,navigator,icon,swiper,ra...
【Flutter】基础组件【04】Row/Column
?【Flutter】学习养成记，【程序员必备小知识】 ? 今日小知识——【Flutter】基础组件【04】Row/...
微信小程序(六)表单组件
小程序表单组件了解小程序表单组件明确不同表单组件的使用方法 (1)button
微信小程序直播如何接入？开源代码接入案例分享
小程序直播组件接入指引一、简介小程序直播，是微信提供给小程序开发者的直播组件。通过调用该组件，商家可以在小程序...
微信小程序-canvas压缩图片使用入门
微信小程序canvas组件官方文档微信小程序canvas组件官方文档canvas API canvas组件介绍 ...
微信小程序(四)视图组件
小程序组件视图容器 (一) 视图容器了解小程序组件中的视图容器明确小程序组件中的视图容器的用途和方法了解不...
小程序 image 组件常见问题
image 组件拉取图片的本质是使用wx.downloadFile这个接口加载图片的资源，加载以后，再将加载的图像...
微信小程序画布(canvas)转化出来的图片模糊问题的解决方案
微信小程序提供canvas组件以及比较丰富的关于canvas的API，非常常见的应用有生成一张带有小程序码或者二维...
【总结】2017.03.02
2017.03.02 - 计划小程序组件化设计 - 实际完成剖析小程序组件化设计尝试hM侧边栏组件化 - 总...

小程序常见组件04

view ：hover-class 按下去颜色改变 hover-stop-propagation：指定是否阻止本节点的祖先节点出现点击态

text

图片 image小程序最多2m，最好把图片放在网上 ,图片默认宽度 320 *240

swiper 容器

导航组件 navigator (默认换行，块级元素),注意跳转的方式

rick-text 富文本标签

button ：原有颜色

button 开放的能力

icon 小程序的字体图标

radio 单选框

checkbox

相关文章

小程序常见组件04

小程序常见组件

【Flutter】基础组件【04】Row/Column

微信小程序(六)表单组件

微信小程序直播如何接入？开源代码接入案例分享

微信小程序-canvas压缩图片使用入门

微信小程序(四)视图组件

小程序 image 组件常见问题

微信小程序画布(canvas)转化出来的图片模糊问题的解决方案

【总结】2017.03.02

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读