微信小程序初体验（二）

cxy1
165 阅读2分钟

这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战

常用标签

swiper

  • 轮播图组件

  • ww1.sinaimg.cn/large/007rA…

  • 每一个轮播项swiper-item

  • swiper存在默认样式

    • width 100%
    • height 150px
    • swiper高度无法由内容撑开

  • 实现swiper和图片的适应

    • 找出原图的宽高，等比例给swiper定宽高
    swiper width/swiper height=原图 width/原图 height
swiper heigth=swiper width*原图高度/原图width
height {calc(100vw*height/width)}

    css
/*150是图片真实高度，330是图片真实宽度*/
swiper {
width: 100%;
height: calc(100vw*150/330);
 }
 image {
   width: 100%;
 }
 //下面可加可不加
 image,view,navigator {
   box-sizing: border-box;
 }
 image{
   vertical-align: middle;
 }

    <swiper autoplay indicator-dots>
   <swiper-item wx:for="{{swiperData}}" wx:key="goods_id">
     <navigator url="{{item.navigator_url}}" open-type="navigate"> 
       <image src="{{item.image_src}}" mode="widthFix"></image>
     </navigator>
   </swiper-item>
 </swiper>

  • 常用属性

    • autoplay 自动轮播
    • interval 修改轮播时间
    • circular 衔接轮播
    • indicator-dots 显示指示器 分页器 索引器
    • indicator-color 指示器的未选择的颜色
    • indicator-active-color 选中的时候指示器的颜色

navigator

  • 导航组件 类似于a标签
  • 块级元素
  • 常用属性
    • url 要跳转的页面，绝对路径或相对路径
    • target 要跳转到当前小程序还是其他小程序页面
      • self 默认值，自己小程序
      • miniProgram 其他小程序页面
    • open-type 跳转方式
      • navigate 保留当前页面，跳转到某个页面，不能跳转到tabbar页面
      • redirect 关闭当前页面，跳转到某个页面，不能跳转到tabbar页面
      • switchTab 跳转到tabbar页面，关闭其他所有非tabbar页面
      • reLaunch 关闭所有页面，可以跳转到任意页面
      • navigateBack 关闭当前页面，返回上一页面或多级页面，可以通过getCurrentPages()获取当前的页面栈，决定需要返回几层
      • exit 退出小程序，target="miniProgram"时生效
  • 可以向新页面传递参数,在新页面的onLoad的参数中获得,onShow是没有options的参数的，所以无法在onShow中获得URL传递过来的参数
 <navigator url="/pages/goodList/index?cat_id={{item2.cat_id}}" open-type="navigate">
 </navigator
  • onShow中要想获得URL中传递参数的办法： 小程序有个页面栈，是个数组，每当打开一个页面，就会把当前页面放到页面栈中，该页面栈最大长度是10个页面，获得数组中索引最大的页面就是当前页面
//获得页面栈
let pages = getCurrentPage()

rich-text

  • 富文本标签
  • nodes属性来实现
    • 接收标签字符串
    • 接收对象数组，见api

button

  • 按钮
  • 常用属性
    • size 按钮大小
    • type 按钮颜色
    • open-type 开发能力
      • contact 直接打开客服对话功能，需要在小程序后台配置
      • share 转发当前小程序给朋友，不能分享到朋友圈
      • getPhoneNumber 获取当前用户手机号，结合bindgetphonenumber来使用
        • 不是企业账号，没有权限获取用户的手机号码
        • 在事件的回调函数中通过参数获取信息
        • 获取的信息已经加密，需要后台服务器进行解析，再返回给前台，小程序就可以使用了
      • getUserInfo 获取当前用户的个人信息
        • bindgetuserinfo结合该事件来获取
      • launchApp 在小程序中直接打开app
      • openSetting 打开小程序内置的授权页面
        • 授权页面中只会出现用户曾经点击过的权限
      • feedback 打开小程序内置的意见反馈页面
        • 只能通过真机调试

icon

  • 属性
    • type 图标类型 具体值见文档
    • size 图标大小
    • color 图标颜色

radio

  • 单选框
  • value 选中的值
  • 需和radio-group结合使用
  • bindchange中说的选中的值
<radio-group bindchange="handleChange">
  <radio value="1">男</radio>
  <radio value="2">女</radio>
</radio-group>

 handleChange(e){
    console.log(e.detail.value);
  },

checkbox

  • 和checkbox-group一起使用
<checkbox-group bindchange="handleChangeCheck">
    <checkbox wx:for="{{checkData}}" wx:key="id"  value="{{item.id}}">{{item.name}}</checkbox>
</checkbox-group>

导航栏tab

  • app.json中使用tabBar属性实现
"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "icon/_flower.png",
      "selectedIconPath": "icon/flower.png"
    },
    {
      "pagePath": "pages/demo/demo1",
      "text": "demo1",
      "iconPath": "icon/_mao.png",
      "selectedIconPath": "icon/mao.png"
    },
    {
      "pagePath": "pages/demo2/demo2",
      "text": "demo2",
      "iconPath": "icon/_snow.png",
      "selectedIconPath": "icon/snow.png"
    },
    {
      "pagePath": "pages/demo3/demo3",
      "text": "demo3",
      "iconPath": "icon/_tree.png",
      "selectedIconPath": "icon/tree.png"
    }
  ]
  },

slot 标签

是一个占位符，插槽 等到父组件调用子组件的时候，传递过来标签，最终这些标签会替换slot插槽的位置

avatar
文章
阅读
粉丝