3.标签

1.view代替原来的div标签 
<view hover-class="h-class">点我试试view>
2.text文本标签
  • 只能嵌套text
  • 长按文字可以复制（只有该标签有这个功能）
  • 可以对空格 回车 进行编码
    • 长按文字复制 selecttable
    • 对文本内容进行解码 decode
3.image标签
  1. 微信小程序打包上线不能超过2M,使用图片的时候用外网图片。
  2. image组件存在默认宽320px，高度240px。
  3. mode 决定 图片内容 和图片标签 宽高做适配。
    1. scaleToFill 默认值 不保持纵横缩放图片，使图片的高度完全拉伸填满image 元素。
    2. aspectFit 保持宽高比 确保图片的长边显示出来。
    3. aspectFill 保持纵横比缩放，只保证图片的短边完全显示出来，少用。
    4. widthFix 以前web图片 宽度指定之后 高度会按比例来调整，常用。
    5. bottom。。类似以前backgroud-position
  4. 小程序图片 直接支持懒加载 在标签加上 lazy-load
    1. lazy-load会判断 当图片出现在视口上下三屏的高度之内，小程序会自己开始加载图片 
<image mode="bottom" lazy-load src=""/>
  4.swiper标签
  • 外层容器 swiper，每一个轮播项 swiper-item。
  •  swiper默认宽度100%，高度150px（无法实现由内容撑开），图片存在高度和宽度320*240。
  • 先找出原图的宽高，给swiper定宽高
    • swiper宽度 / swiper高度 =原图宽 /原图高 ；swiper高度 =swiper宽原图宽 /原图高度；
  • autoplay 自动轮播；interval修改轮播时间；circular衔接轮播；
  • indicator-dots显示指示器分页器索引器；indicator-color指示器未选择颜色；indicator-active-color 选中时指示器的颜色
  5.navigator导航标签
  • 块级元素 默认会换行，url要跳转的页面路径：相对或者绝对路径。
  •  target 跳转当前还是其他小程序页面；默认自己seft，其他页面miniprogram。
  • open-type跳转的方式：
    • 默认navigate 保留当前页面，跳转到应用的某个页面，不能是tabbar页面
    • redirect 关闭当前页面，跳转到应用的某个页面，不能是tabbar页面
    • switchTab 跳转到tabbar页面，并关闭其他非tabbar页面
    • reLaunch 关闭所以页面，打开到应用内的某个页面
  6.text-rich富文本标签
  • nodes属性来实现，标签接收字符串/对象/对象数组
  • 常用标签字符串（如图）支持的标签看官网
  7.button按钮标签       外观属性
  • size 大小，值default默认大小，mini小尺寸。
  • type颜色，值default灰色，primaryl绿色，warn红色。
  • plain 按钮是否镂空，背景透明。
           开发能力
  • open-type：
    • concact 直接打开 客服对话功能，需要在微信小程序的后台配置。
    • share转发当前的小程序到微信朋友中。不能分享到朋友圈。
    • getPhoneNumber获取当前用户手机号码信息。结合一个事件来使用，不是企业账号没有权限
      • 绑定一个事件 bindgetphonenumber。
      • 在事件的回调函数中 通过参数来获取信息。
      • 获取的信息已经加密过了（需要用户自己搭建小程序后台服务器，在后台服务器进行解析手机号码，返回小程序中）
    • getUserInfo获取当前用户的个人信息。
      • 使用方法类似手机号码
      • 可以直接获取，不存在加密字段
    • launchApp在小程序中 直接打开app。
      • 先在app中通过某个链接打开小程序
      • 在小程序再通过这个功能重新打开app
      • 京东app和京东小程序
    • openSetting 打开小程序内置的授权页面。
      • 授权页面只会出现，用户曾经点击过的 权限        
    • feedback 打开小程序内置的意见反馈页面。
      • 只能通过真机调试来打开
  • type颜色，值default灰色，primaryl绿色，warn红色。
  • plain 按钮是否镂空，背景透明。
   open-type的contact的实现流程         
  1. 将小程序的appid由测试号改为自己的appid
  2. 登录小程序官网，添加“客服-微信”
  7.icon图标  
  • type图图标类型：success，success_no_circle,info,warn,waiting,cancel,download,search,clear
  • size图标的大小，color图标的颜色。
    8.radio单选框  
  • radio标签 必须和父元素 'radio-group' 来使用
  • value 选中的单选框的值
  • 需要给 radio-group 绑定 bindchange 事件
  • 在页面显示选中的值
  
<radion-group bindchange="handleChange">
    <radio value="male" color="red">男radio> 
    <radio value="female" color="red">女radio>
radio-group>
 
<view>您选中的性别：{{gender}}view>
  js：   
page({
  data:{
        gender:""
    },
    handleChange(e){
 
     //1.获取单选框中的值
        let gender = e.detail.value;
     //2.把值赋给 data中的数据
    this.setData({
       //gender:gender 同下
        gender
    });
    }
})
9.checkbox复选框  
  • checkbox标签 必须和父元素 'checkbox-group' 来使用
  • value 选中的单选框的值
  • 需要给 checkbox-group 绑定 bindchange 事件
  • 在页面显示选中的值
  

    {{item.name}}

 
 
您选中的水果：{{checkedList}}
  js：   
page({
  data:{
        list:[
            {
            id:0,
            name:"苹果",
            value:"apple"
            },
            {
            id:1,
            name:"葡萄",
            value:"grape"
            },
             {
            id:3,
            name:"香蕉",
            value:"bananer"
            },
        ],
         checkedList[]
    },
   handleItemChange(e){
 
     //1.获取复选框中的值
        const checkedList= e.detail.value;
     //2.把值赋给 data中的数据
    this.setData({
       //checkedList:checkedList同下
       checkedList
    });
    }
})
小程序基础

相关

❥微信小程序❥----小程序基础

标签