雨落辰潇-文档站

Appearance

组件 ​

通过组件的形式来代替html中的标签元素,类似于element-plus中的组件

view组件 ​

ts
view组件 替代 div标签

button组件 ​

ts
button组件 替代 button按钮 类似于 element-plus中的button组件

属性
	size
    type: primary(绿色) default白 warn红
	open-type
		contact	打开客服
        share	分享

// 使用button组件的 open-type="chooseAvatar" 属性获取用户头像
// 使用button组件的 bindchooseavatar 属性绑定获取用户头像的钩子函数,设置用户头像数据状态
// 使用button组件的 open-type="contact" 属性获取客服
// 使用button组件的 open-type="getPhoneNumber" 属性获取手机号

使用案例

xml
<button type="primary" size="mini" open-type="share">分享内容</button>

获取用户头像 ​

xml
<!-- 展示用户头像 -->
    <button class="avatar" open-type="chooseAvatar" bindchooseavatar="chooseAvatar">
        <text class="text">头像:</text>
        <image src="{{headimgurl}}" class="img" />
    </button>
ts
//获取用户头像的回调
    chooseAvatar(event) { // event对象指向当前
        this.setData({
            headimgurl: event.detail.avatarUrl
        })
    },

text组件 ​

ts
text组件 替代 span标签

textarea组件 ​

ts
textarea 组件的 name="textarea" 属性 用于提交表单时获取属性值

image组件 ​

ts
image组件 替代 img标签

mode属性: 图片的裁剪和缩放
	scaleToFill 不保持比例缩放图片
    widthFix 	保持比例,宽度不变
	aspectFill  缩放模式，保持纵横比缩放图片
xml
<view class="home">
    <view class="title">微信小程序基础语法</view>
    <image src="https://2216847528.oss-cn-beijing.aliyuncs.com/asset/20241118104045.png" mode="aspectFill"/>
    <button type="primary" size="mini">按钮</button>
</view>
less
/* pages/home/home.wxss */
.home{
    width: 100%;
    height: 100%;
    .title{
        width: 750rpx;
        height: 200rpx;
        background-color: aquamarine;
        text-align: center;
        line-height: 200rpx;
    }
}

input组件 ​

ts
input组件 替代 input标签 类似于 element-plus中的input组件

属性

属性类型默认值必填说明
typestringtext否input 的类型
placeholder-stylestring是指定 placeholder 的样式

type 属性值

ts
text	文本输入键盘	
number	数字输入键盘	
idcard	身份证输入键盘	
digit	带小数点的数字键盘	
safe-password	密码安全输入键盘 指引。仅 Webview 支持。	2.18.0
nickname	昵称输入键盘。

input双向绑定 ​

ts
<!-- 展示微信用户昵称 -->
    <view class="nickname">
        <text class="text">昵称:</text>
        <input type="nickname" placeholder="请你输入昵称" model:value="{{nickname}}"/>
    </view>

icon组件 ​

微信内置图标组件 icon

ts
<icon type="success" size="16" color="red"></icon>

阿里图标 ​

1 首先需要把阿里图标下载到本地

ts

2 在static文件夹中新建一个样式文件 iconfont.wxss

/static/iconfont.wxss

css
把阿里图标下载下来的 css文件 复制,把本地的字体图标更换为在线的字体

3 在全局样式文件app.wxss中引入wxss文件

这样 iconfont.wxss 就变成了全局样式，全部的页面可以使用图标

css
@import "/static/iconfont.wxss"
page{
	width:100%,
    height:100%
}

4 使用图标 /pages/home/home.wxml

xml
# 使用阿里图标 需要使用 iconfont 作为类名
<text class="iconfont icon-tubiaozhizuomoban-01"></text>

5 调整图标的样式 /pages/home/home.wxss

css
# 调整阿里图标的图标大小和颜色
.iconfont{
    font-size:40px;
    background-color:red;
    color:red
}

使用案例

首页：/pages/index/index.wxml

xml
# index.wxml

<view class="home">
    <view class="title">微信小程序基础语法</view>
    <view>{{name}}</view>
    <image src="https://2216847528.oss-cn-beijing.aliyuncs.com/asset/20241118104045.png" 
        style="transform:rotate({{deg}}deg)"
        class="avatar"
    />
    <view class="iconfont">
        <icon class="iconfont icon-baomirenyuan"/>
        <icon class="iconfont icon-gongsi"/>
    </view>
    
    <button type="primary" size="mini" catch:tap="handler">按钮1</button>
    <button type="primary" size="mini" bind:tap="add" style="margin-top: 20rpx;">按钮2</button>
</view>

首页：/pages/index/index.wsss

css
# index.wxss

.home{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.home .title{
    width: 750rpx;
    height: 200rpx;
    background-color: aquamarine;
    text-align: center;
    line-height: 200rpx;
}
.home .avatar{
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
    margin: 20rpx 0rpx;
}
.iconfont{
    display: flex;
    font-size: 40px;
    margin-bottom: 20rpx;
}

首页：/pages/index/index.js

ts
# index.js

//通过Page方法创建页面   App->Page
Page({
    //页面数据
    data: {
        name: '结城sakuna',
        deg:0,
    },
    //第一个按钮
    handler(event) {
        // 微信小程序的事件:window、document
        // 事件回调会注入事件对象
        // 微信小程序事件回调不能传递参数 catch:tap="handler(1,2,3)"
        // 修改页面的数据务必通过setData方法进行修改
        const newname = this.data.name + '❤';
        this.setData({
            name: newname
        })
    },
    //第二个按钮
    add() {
        this.setData({
            deg: this.data.deg + 10
        })
    }
})

应用：/app.json

json
# app.json

{
    "pages": [
        "pages/index/index"
    ],
    "window": {
        "navigationBarBackgroundColor": "#ccc",
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "结城sakana"
    }
}

应用：/app.wxss

css
# app.wxss

/**iconfont.wxss全局样式,全部的页面可以使用图标**/
@import "/static/iconfont.wxss";
page{
    width: 100%;
    height: 100%;
}

应用：/app.js

js
# app.js
// 通过App内置函数:创建微信小程序应用
App({

    /**
     * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
     */
    onLaunch: function () {

    },

    /**
     * 当小程序启动，或从后台进入前台显示，会触发 onShow
     */
    onShow: function (options) {

    },

    /**
     * 当小程序从前台进入后台，会触发 onHide
     */
    onHide: function () {

    },

    /**
     * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
     */
    onError: function (msg) {

    }
})

应用：/static/iconfont.wxss

css
# /static/iconfont.wxss

@font-face {
    font-family: 'iconfont';  /* Project id 4749301 */
    src: url('//at.alicdn.com/t/c/font_4749301_a0gaqm2n8ms.woff2?t=1731899538449') format('woff2'),
         url('//at.alicdn.com/t/c/font_4749301_a0gaqm2n8ms.woff?t=1731899538449') format('woff'),
         url('//at.alicdn.com/t/c/font_4749301_a0gaqm2n8ms.ttf?t=1731899538449') format('truetype');
  }
  
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-canchuyongpin:before {
    content: "\e6bf";
  }
  
  .icon-huiyuanyonghu:before {
    content: "\e6c0";
  }
  
  .icon-remaituijian:before {
    content: "\e6c1";
  }
  
  .icon-lengdongmiandian:before {
    content: "\e6c2";
  }
  
  .icon-jingdianhuoguo:before {
    content: "\e6c3";
  }
  
  .icon-jingpinmeizhuang:before {
    content: "\e6c4";
  }
  
  .icon-shengxianshuiguo:before {
    content: "\e6c5";
  }
  
  .icon-shequdianpu:before {
    content: "\e6c6";
  }
  
  .icon-yangshengchadao:before {
    content: "\e6c7";
  }
  
  .icon-xiawucha:before {
    content: "\e6c8";
  }
  
  .icon-yuzhicaipin:before {
    content: "\e6c9";
  }
  
  .icon-baomirenyuan:before {
    content: "\101ce";
  }
  
  .icon-bangongqu:before {
    content: "\101cf";
  }
  
  .icon-chucha:before {
    content: "\101d0";
  }
  
  .icon-gongsi:before {
    content: "\101d1";
  }
  
  .icon-jianliku:before {
    content: "\101d2";
  }
ts
# 路由跳转的组件 声明式导航

swiper组件 ​

ts
# 轮播图
滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为
仅可放置在swiper组件中，宽高自动设置为100%。
属性类型默认值说明
indicator-dotsbooleanfalse否是否显示面板指示点
indicator-colorcolorrgba(0, 0, 0, .3)否指示点颜色
indicator-active-colorcolor#000000否当前选中的指示点颜色
autoplaybooleanfalse否是否自动切换
currentnumber0否当前所在滑块的 index
intervalnumber5000否自动切换时间间隔
durationnumber500否滑动动画时长
circularbooleanfalse否是否采用衔接滑动
verticalbooleanfalse否滑动方向是否为纵向
display-multiple-itemsnumber1否同时显示的滑块数量
previous-marginstring"0px"否前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
next-marginstring"0px"否后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值。skyline 于 3.5.1 版本支持
easing-functionstring"default"否指定 swiper 切换缓动动画类型

easing-function 类型

ts
default	默认缓动函数
linear	线性动画
easeInCubic	缓入动画
easeOutCubic	缓出动画
easeInOutCubic	缓入缓出动画

scroll-view组件 ​

flex布局 ​

滚动视图

ts
前提：
	不管是横向还是纵向,srcoll必须要有高度
属性：
	设置滚动的方向
    设置限制滚动的高度
    隐藏滚动条
    enable-flex 开启flex容器功能 
    scroll-x	允许x轴方向移动
    scroll-into-view	滚动到对应的子节点(子节点配置id属性,id属性值也为"a1"),属性值是非数字开头的id例如"a1",这样就能滚动到对应的子节点
						值为string类型,"a{{index}}",值为跳转到对应子节点的位置
	scroll-with-animation	设置滚动的动画效果	


补充：
	flex布局中,伸缩容器宽度不足,伸缩容器会等比例缩小
	在伸缩项目上设置  flex-shrink:0; 伸缩项目不收缩
属性类型默认值必填说明
scroll-xbooleanfalse否允许横向滚动
scroll-ybooleanfalse否允许纵向滚动
scroll-into-viewstring否值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-into-view-offsetnumber0否跳转到 scroll-into-view 目标节点时的额外偏移
scroll-with-animationbooleanfalse否在设置滚动条位置时使用动画过渡
show-scrollbarbooleantrue否滚动条显隐控制 (同时开启 enhanced 属性后生效)

WebView 特有属性 ​

属性类型默认值必填说明
enhancedbooleanfalse否启用 scroll-view 增强特性，启用后可通过 ScrollViewContext 操作 scroll-view
enable-flexbooleanfalse否启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。

使用案例1

y轴滚动: /pages/category/category.wxml

xml
<!--pages/category/category.wxml-->
<view class="category flex">
    <view class="left">
        <!-- 滚动视图 -->
        <scroll-view class="scroll" scroll-y enhanced show-scrollbar="{{false}}">
            <view data-index="{{index}}" bind:tap="changeActive" class="item {{index===active&&'active'}}" wx:for="{{50}}" wx:key="{{index}}">
                <text class="select" wx:if="{{index==active}}">|</text>
                <image wx:if="{{index < 2}}" class="img" src="/static/category/hot.png" mode=""/>
                <text>生命周期</text>
            </view>
        </scroll-view>
        
    </view>
    <view class="right">
       <view class="title">香气护体</view>
       <view class="box">
         <view class="item" wx:for="{{11}}">
           <image class="img" src="https://2216847528.oss-cn-beijing.aliyuncs.com/asset/20241118104045.png"/>
           <text class="title">123</text>
         </view>
       </view>
    </view>
</view>

/pages/category/category.js

js
// pages/category/category.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        active: 0, //控制左侧菜单高亮
        sortArr: [], //存储分类的数据
    },

    //左侧菜单点击事件回调
    changeActive(event) {
        //修改active数据
        this.setData({
            active: event.currentTarget.dataset.index
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

/pages/category/category.wxss

css
/* pages/category/category.wxss */
.category {
    width: 100%;
    height: 100%;
}
.category .left {
    width: 180rpx;
    height: 100%;
}
.category .left .scroll {
    width: 180rpx;
    height: 100%;
    background-color: #cdcdcd;
}
.category .left .scroll .item {
    display: block;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 26rpx;
}
.category .left .scroll .item .select{
    position: absolute;
    color: orange;
    font-weight: 700;
    left: 2rpx;
}
.category .left .scroll .item .img{
    height: 40rpx;
    width: 40rpx;
    vertical-align:middle
}
.category .left .scroll .active {
    background-color: white;
    color: rgb(36, 37, 34);
    font-weight: 600;
}
.category .right {
    flex: 1;
    height: 100%;
}
.category .right .title {
    text-align: center;
    font-weight: 900;
    color: rgb(3, 3, 3);
    margin: 10rpx 0rpx;
}
.category .right .box{
    display: flex;
    flex-wrap: wrap;
}
.category .right .box .item{
    width: 33%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10rpx 0rpx;
}
.category .right .box .item .img {
    width: 70rpx;
    height: 70rpx;
}
.category .right .box .item .title {
    font-size: 30rpx;
    color: rgb(182, 98, 20);
    margin: 10rpx 0rpx;
}

/pages/category/category.json

json
{
  "usingComponents": {}
}

使用案例2

x轴滚动: /pages/category/category.wxml

xml
<!--pages/shopcart/shopcart.wxml-->
<view class="shopcart">
    <!-- 分类横向排列 -->
    <scroll-view class="scroll" enable-flex scroll-x scroll-into-view="a{{activeNum}}" scroll-with-animation>
        <view class="item {{ index == activeNum && 'active'}}" 
            bind:tap="changeActive"
            id="a{{index}}"
            data-index="{{index}}"
            wx:for="{{50}}" wx:key="{{index}}">阿夸
        </view>
    </scroll-view>
</view>

/pages/category/category.js

js
// pages/shopcart/shopcart.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        activeNum:null,
    },
    // 改变激活状态
    changeActive(event){
        this.setData({
            activeNum: event.currentTarget.dataset.index
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

/pages/category/category.wxss

css
/* pages/shopcart/shopcart.wxss */
.shopcart{
    width: 750rpx;
    height: 100%;
}
.shopcart .scroll{
    display: flex;
    height: 80rpx;
    background-color: antiquewhite;
}
.shopcart .scroll .item{
    width: 80rpx;
    /* 伸缩项目不等比缩小 */
    flex-shrink:0;
    line-height: 80rpx;
    text-align: center;
}
.shopcart .scroll .active{
    background-color: white;
    font-weight: 700;
}

picker组件 ​

使用微信小程序组件picker组件：mode="region",绑定单击事件 bind:change="selectCity"
定义 selectCity事件回调(点击确定的时候触发)参数[event] event.detail 是省市区的编码
	this.setData({
        定义省编码:event.detail.code[0]
    })
定义 省市区地址编码 region
	this.setData({
        region:event.detail.value.join('/')
    })

picker组件中使用 vant-field组件填充内容

switch组件 ​

ts
使用微信小程序的 switch组件 绑定bind:change="handle"事件回调
定义 handle 函数 参数[event]

自定义组件 ​

新建 components 文件夹,新建组件文件夹card，新建组件card（不是新建页面）

/components/card/card.wxml

xml
<!--components/card/card.wxml-->
<view class="card">
    <!-- 卡片组件:item 即为展示商品 -->
    <view class="item" wx:for="{{list}}" wx:key="id">
        <image src="{{item.imageUrl}}" class="image" />
        <view class="title">{{item.name}}</view>
        <view class="subtitle">{{item.packing}}</view>
        <view class="bottom">
            <view class="price">{{item.price}}</view>
            <view class="right">
                <view class="money">{{item.marketPrice}}</view>
                <image src="https://img02.hua.com/m/home/img/home_buy_btn.png" class="cart" />
            </view>
        </view>
    </view>
</view>

/components/card/card.js

js
// components/card/card.js
Component({

    /**
     * 组件的属性列表
     */
    //类似于 vue中的 props，接收props
    properties: {
        list:{
            type:Array
        }
    },

    /**
     * 组件的初始数据
     */
    data: {

    },

    /**
     * 组件的方法列表
     */
    methods: {

    }
})

/components/card/card.json

json
{
    "component": true,
    "usingComponents": {}
}

video组件 ​

使用微信小程序中的video组件 weixin-组件-媒体空间-video

ts
使用微信小程序中的video组件 weixin-组件-媒体空间-video

当视频大小与 video 容器大小不一致时，视频的表现形式
属性名说明
object-fit当视频大小与 video 容器大小不一致时，视频的表现形式
contain包含
fill填充
cover覆盖
vue
<video class="video" :src="playUrl"
    poster="" object-fit="fill"
    :controls="false" autoplay page-gesture enable-play-gesture>
</video>

Copyright © 2024 雨落辰潇