微信小程序学习_第三天

微信小程序学习_第三天

常用组件

swiper

1轮播图外层容器swiper
    2 每一个轮播项 swiper-item
    3 swiper标签 存在默认样式
        (1)width 100%
        (2)height 150px   image存在默认宽度和高度 320*240
        (3)swiper高度无法实现由内容撑开
    4 先找出原图的宽度和高度,等比例给swiper定宽度和高度
        原图高度为1057*358px
        swiper宽度/swiper高度=原图宽度/原图高度
        swiper高度=swiper宽度*原图高度/原图宽度
        height:100vw(750rpx/100%) * 358 / 1057
    5 autoplay 自动轮播(5秒左右)
    6 interval 修改轮播时间
    7 circular 衔接轮播
    8 indicator-dots 显示指示器(分页器、索引器)
    9 indicator-color 指示器的未选择的颜色
    10 indictor-active-color 选中的时候的指示器的颜色
 //wxml
<swiper calss="banner" autoplay interval="1000" circular indicator-dots="true" indicator-color="#ccc" indictor-active-color="ff0094" class="banner">
<swiper-item><image mode="widthFix" src="https://img.alicdn.com/imgextra/i4/6000000007955/O1CN01orfDoO28dRPXkTapy_!!6000000007955-0-octopus.jpg" /></swiper-item>
<swiper-item><image mode="widthFix" src="https://gtms03.alicdn.com/tps/i3/TB1gXd1JXXXXXapXpXXvKyzTVXX-520-280.jpg" /></swiper-item>
<swiper-item><image mode="widthFix" src="https://gtms01.alicdn.com/tps/i1/TB1r4h8JXXXXXXoXXXXvKyzTVXX-520-280.jpg" /></swiper-item>
</swiper>
//wxss
swiper .banner{
width: 100%;
height: calc(100vw*520/280);
}
image{
width: 100%;
}

%title插图%num

navigator

导航组件 navigator
    0 块级元素 默认会换行,可以直接加宽度和高度
    属性:
    1 url:要跳转的页面路径,可以是绝对路径也可以是相对路径(不要加.wxml)
    2 target:要跳转到当前的小程序,还是其它的小程序
        self:默认值,自己的小程序
        miniProgram:其它的小程序页面
    3 open-type:跳转的方式
        (1)navigate:默认值,保留当前的页面,跳转到应用内的某个界面,但是不能跳到tabbar页面
        (2)redirect:关闭当前页面,跳转到应用内的某个界面,但是不允许跳转到tabbar页面
        (3)switchTab:跳转到tabbar页面,并且关闭其他所有非tabbar页面
        (4)reLaunch:关闭所有页面,打开到应用内的某个页面
 //wxml
<navigator url="/pages/demo7/demo7">轮播图页面</navigator>
<navigator url="/pages/index/index">直接跳转到tabbar页面</navigator>
<navigator open-type="redirect" url="/pages/demo7/demo7">轮播图页面 redirect</navigator>
<navigator open-type="switchTab" url="/pages/index/index">直接跳转到tabbar页面</navigator>
<navigator open-type="reLaunch" url="/pages/demo7/demo7">轮播图页面 reLaunch</navigator>

%title插图%num

rich-text

在学习学习

button

1 外观属性
        (1)size:控制按钮的大小
            default:默认大小;mini:小尺寸
        (2)type:用来控制按钮的颜色
            default:灰色;primary:绿色;warn:红色
        (3)plain:按钮是否镂空,背景色透明
        (4)loading:名称前是否带 loading 图标
 <button>默认按钮</button>
<button size="mini">mini按钮</button>
<button type="primary">primary按钮</button>
<button type="warn">warn按钮</button>
<button type="primary" plain>plain按钮</button>
<button loading>默认按钮</button>

%title插图%num

2  button 的开放能力
    open-typy
        (1)contact:直接打开客服对话功能,需要在小程序后台配置,只能通过真机调试来打开
        (2)share:转发当前小程序到微信朋友中,但不能转发到朋友圈
        (3)getPhoneNumber:获取当前用户的手机号码信息,需要结合一个事件来使用,不是企业的小程序账号,没有权限来获取用户的手机号码
            ①绑定一个事件:bindgetphonenumber
            ②在事件的回调函数中,通过参数来获取信息
            ③获取到的信息,已经被加密了,需要在小程序后台服务器中进行解析,然后返回到小程序中,才可以看到
        (4)getUserInfo:获取当前用户的个人信息
            与上一功能一样,需要添加一个事件,但这个功能可以获取一个不加密的字段
        (5)launchApp:在小程序中直接打开app,但这个功能并没有想象中的这么强大
            ①需要先在app中,通过app中的某个链接打开小程序
            ②在小程序中再通过这个功能重新打开app
        (6)openSetting:打开小程序内置的授权页面
            授权页面中只会出现用户曾经点击过的权限
        (7)feedback:打开小程序内置的意见反馈页面,也只能通过真机调试来打开
%title插图%num

icon

icon 小城中的字体图标
    1  type:图标类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear
    2  size:大小
    3  color:颜色
//wxml
 <icon type="success" size="60px" color="#ff0094"></icon>

%title插图%num

radio

单选框,多个radio需要通过radio-group包起来

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

%title插图%num

通过事件来获取点击某个radio时的值,也就是上面的“你选择的是:male”,当第二个radio被选中时,下面的male变成female

 //js文件
Page({
data:{
gender:""
},
getValue(e){
//获取单选框的值
let gender=e.detail.value;
//把值赋值给data中的数据
this.setData({
gender
})
}
})

%title插图%num

checkbox

 //wxml
<checkbox-group bindchange="getValue">
<checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id" >
{{item.name}}
</checkbox>
</checkbox-group>
<view>你选中的是{{checklist}}</view>
//js
Page({
/**
* 页面的初始数据
*/
data: {
list:[
{
id:0,
name:"苹果",
value:"apple"
},
{
id:1,
name:"葡萄",
value:"grape"
},
{
id:2,
name:"香蕉",
value:"banner"
}
],
checklist:[]
},
getValue(e){
//获取被选中的复选框的值
const checklist=e.detail.value;
//进行赋值
this.setData({
checklist
}
)

%title插图%num

自定义组件

自定义组件是为了实现组件的复用。

首先在根目录下创建一个文件夹,比如命名为“component”,然后在其下级创建一个文件夹,比如“NavHeader”,右击文件夹,选择“新建Component”。就会自动创建箭头所指的四个文件。

%title插图%num

我们可以在“NavHeader.wxml”中写上我们想要的组件,比如下面的代码

<view class="header">
    <text class="title">推荐歌曲</text>
    <view>
        <text>为你精心推荐</text>
        <text class="more">查看更多</text>
    </view>
</view>

样式文件就先不写了。 

在我们想要呈现这个页面的page中,打开它的json文件,里面有如下内容
{
    "usingComponents": {}
}

usingComponents:使用组件。我们在里面添加上我们要使用的自定义的组件的路径即可。

{
    "usingComponents": {
        "NavHeader":"/component/NavHeader/NavHeader"
    }
}

这时候在wxml页面,加上标签

 <NavHeader></NavHeader>

即可使用

%title插图%num
但是我们既然想复用这个组件,就想要通过这个组件来实现不同的展示效果。
在自定义组件的js文件中,也就是本例中的NavHeader.js,有一个组建的属性列表“properties”,官方文档介绍:
定义段 类型 是否必填 描述
properties Object Map 组件的对外属性,是属性名到属性设置的映射表

properties 定义

定义段 类型 是否必填 描述 最低版本
type 属性的类型
optionalTypes Array 属性的类型(可以指定多个) 2.6.5
value 属性的初始值
observer Function 属性值变化时的回调函数

我们可以在这个属性下写:

Component({
/**
* 组件的属性列表
*/
    properties: {
        title:{
            type:String,
            value:"我是title默认值"
        },
        nav:{
            type:String,
            value:"我是nav默认值"
        }
})

将NavHeader.wxml改为:

<view class="header">
    <text class="title">{{title}}</text>
    <view>
        <text>{{nav}}</text>
        <text class="more">查看更多</text>
    </view>
</view>

同时在demo15.wxml(要呈现的页面)中为title和nav赋值

<view>========</view>
<NavHeader title="推荐歌曲" nav="为你精心推荐"></NavHeader>
<view>========</view>
<NavHeader title="排行榜" nav="热歌风向"></NavHeader>

展示效果如下

%title插图%num

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇