微信小程序框架(二)-全面详解(学习总结---从入门到深化)(下)

简介: 小程序的 button 按钮与 html 的非常类似,但是小程序的功能要更强大一些

组件_button

2345_image_file_copy_649.jpg

小程序的 button 按钮与 html 的非常类似,但是小程序的功能要更强大一些

<button>按钮</button>

按钮属性

2345_image_file_copy_650.jpg

type 属性说明

2345_image_file_copy_651.jpg

size 属性说明

2345_image_file_copy_652.jpg

<button>按钮</button>
<button type="default">按钮</button>
<button type="primary">按钮</button>
<button type="warn">按钮</button>
<button type="primary" size="default">按钮</button>
<button type="primary" size="mini">按钮</button>
<button type="primary" plain>按钮</button>
<button type="primary" disabled>按钮</button>
<button type="primary" loading>按钮</button>
<button type="primary" form-type="submit">按钮</button>

1. 在微信小程序中,下列那个属性是按钮组件设置镂空属性:plain

组件_输入框

2345_image_file_copy_653.jpg

输入框是 input , 与 html 的输入框类似,但是增加了很多新的功能

实现基本输入框

<input />

为了展示效果,需要配合样式

input{
    border: 2px solid red;
}

输入框属性

2345_image_file_copy_654.jpg

type 属性详解

2345_image_file_copy_655.jpg

confirm-type 属性详解

2345_image_file_copy_656.jpg

<input />
<input value="测试信息"/>
<input placeholder="请输入用户名"/>
<input placeholder="请输入密码" password/>
<input placeholder="请输入密码" disabled/>
<input placeholder="文本" maxlength="10"/>
<input placeholder="文本" focus/>
<input placeholder="文本" type="text"/>
<input placeholder="文本" type="number"/>
<input placeholder="文本" type="idcard"/>
<input placeholder="文本" type="digit"/>
<input placeholder="文本" type="nickname"/>
<input placeholder="文本" type="text" confirm-type="send"/>
<input placeholder="文本" type="text" confirm-type="search"/>
<input placeholder="文本" type="text" confirm-type="next"/>
<input placeholder="文本" type="text" confirm-type="go"/>
<input placeholder="文本" type="text" confirm-type="done"/>

配合样式更美观

input{
    border: 1px solid #999;
    height: 80rpx;
    margin: 10px;
    padding-left: 10px;
}

1. 在微信小程序中,下列那个属性是输入框组件设置键盘右下角按钮的文字:confirm-type

组件_picker

2345_image_file_copy_657.jpg

从底部弹起的滚动选择器

选择器有很多种类,分别是

2345_image_file_copy_658.jpg

普通选择器

指定 mode 属性为 selector ,或者默认不指定 mode

<view>普通选择器</view>
<picker bindchange="bindPickerChange" value="
{{index}}" range="{{array}}">
    <view class="picker">
       当前选择:{{array[index]}}
    </view>
</picker>

选择器展示效果需要配合逻辑

Page({
    data: {
        array: ['美国', '中国', '巴西', '日本'],
        index: 0
   },
    bindPickerChange(e) {
        this.setData({
            index: e.detail.value
       })
   }
})

多列选择器

指定 mode 属性为 multiSelector

<view>多列选择器</view>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" value="
{{multiIndex}}" range="{{multiArray}}">
    <view class="picker">
       当前选择:{{ multiArray[0] [multiIndex[0]] }},{{ multiArray[1] [multiIndex[1]] }}, 
                {{multiArray[2] [multiIndex[2]]}}
    </view>
</picker>
Page({
    data: {
        multiArray: [['无脊柱动物', '脊柱动物'],
           ['扁性动物', '线形动物', '环节动物','软体动物', '节肢动物'],
           ['猪肉绦虫', '吸血虫']
       ],
        multiIndex: [0, 0, 0],
   },
    bindMultiPickerChange: function (e) {
        this.setData({
            multiIndex: e.detail.value
       })
   }
})

时间选择器

指定 mode 属性为 time

<view>时间选择器</view>
<picker mode="time" value="{{time}}" start="09:01" end="21:01"
bindchange="bindTimeChange">
    <view class="picker">
       当前选择: {{time}}
    </view>
</picker>
Page({
    data: {
        time: '12:01'
   },
    bindTimeChange: function (e) {
        console.log('picker发送选择改变,携带值为', e.detail.value)
        this.setData({
            time: e.detail.value
       })
   }
})

日期选择器

指定 mode 属性为 date

<view>日期选择器</view>
<picker mode="date" value="{{date}}" start="2000-09-01" end="2030-09-01" bindchange="bindDateChange">
    <view class="picker">
       当前选择: {{date}}
    </view>
</picker>
Page({
    data: {
        date: '2030-09-01'
   },
    bindDateChange: function (e) {
        console.log('picker发送选择改变,携带值为', e.detail.value)
        this.setData({
            date: e.detail.value
       })
   }
})

省市区选择器

指定 mode 属性为 region

<view>省市区选择器</view>
<picker mode="region" bindchange="bindRegionChange" value="{{region}}">
    <view class="picker">
       当前选择:{{region[0]}},{{region[1]}},{{region[2]}}
    </view>
</picker>
Page({
    data: {
        region: ['广东省', '广州市', '海珠区']
   },
    bindRegionChange: function (e) {
        console.log('picker发送选择改变,携带值为', e.detail.value)
        this.setData({
            region: e.detail.value
       })
   }
})

1. 在微信小程序中,实现底部弹起的省市滚动选择器,需要指定 mode 的值为:region

组件_slider

2345_image_file_copy_659.jpg

滑动选择器

基本实现

<slider />

常用属性

2345_image_file_copy_660.jpg

<slider />
<slider step="20"/>
<slider show-value/>
<slider min="50" max="200" show-value/>
<slider min="50" max="200" show-value disabled/>
<slider show-value value="30"/>
<slider show-value value="30" backgroundColor="red"/>
<slider show-value value="30" backgroundColor="red" activeColor="blue"/>
<slider block-color="red"/>

1. 在微信小程序中,滑动选择器中修改滑块颜色的属性是:block-color

组件_表单其他常用组件

2345_image_file_copy_661.jpg

2345_image_file_copy_662.jpg

复选框 checkbox

多选项目,与html复选框基本一致

<checkbox checked="true"/>选中

checked 表示初始状态为选中(true) 或 未选中(false)

配合 checkbox-group 形成一组

<checkbox-group>
    <checkbox checked="true" />读书
    <checkbox checked="true" />打游戏
    <checkbox />听音乐
</checkbox-group>

radio

单选项目,与 html单选框基本一致

<radio checked="true"/>选中

checked 表示初始状态为选中(true) 或 未选中(false)

配合 radio-group 形成一组

<radio-group>
    <radio checked="true"/>选项1
    <radio checked="false"/>选项2
    <radio checked="false"/>选项3
    <radio checked="false"/>选项4
</radio-group>

label

用来改进表单组件的可用性,与 htmllabel 基本一致

<label for="menu">
    <checkbox id="menu" checked="true"/>选中
</label>

switch

开关选择器,有着比较美观的展示效果

<switch />

属性列表

2345_image_file_copy_663.jpg

<switch />
<switch checked="true"/>
<switch checked="true" disabled/>
<switch checked="true" type="checkbox"/>
<switch checked="true" color="red"/>

textarea

多行输入框,与 html 多行输入框基本一致

<textarea />

为了可见性,我们需要增加样式

textarea{
    border: 1px solid red;
}

2345_image_file_copy_664.jpg

<textarea value="文本内容" />
<textarea placeholder="占位符" />
<textarea maxlength="10" />
<textarea disabled />
<textarea focus />
<textarea auto-height/>

1. 在微信小程序中, textarea 如何实现自动增高:auto-height

组件_navigator

2345_image_file_copy_665.jpg

navigator 实现页面之间的跳转

<navigator url="/pages/other/other" >跳转其他页面</navigator>

常用属性说明

2345_image_file_copy_666.jpg

<navigator url="/pages/other/other" >跳转其他页面</navigator>
<navigator url="/pages/slider/slider" open-type="redirect">在当前页打开</navigator>

扩展:生命周期函数

onUnload 在之前的讲解中无法测试,现在有了 navigator ,我们可以进行测试了

navigator 的属性 open-type 设置为 redirect 时,我们可以观察输入结果

Page({
    onUnload() {
        console.log("卸载");
   }
})

1. 在微信小程序中, navigator 的属性 open-type="redirect" 时,作用是:在当前页打开

组件_audio

2345_image_file_copy_667.jpg

音频

<audio src="https://music.163.com/song/media/outer/url?id=1961763339" controls></audio>" controls></audio>

属性说明

2345_image_file_copy_668.jpg

<audio
    id="myaudio"
    poster="https://p2.music.126.net/6yUleORITEDbvrOLV0Q8A==/5639395138885805.jpg"
    name="妈妈的话"
    author="zyboy忠宇"
    src="https://music.163.com/song/media/outer/url?id=1961763339"
    controls
    loop>
</audio>

切换音乐

通过修改 audio 的属性,切换音乐

<audio
    id="{{ audioOptions.id }}"
    poster="{{ audioOptions.poster }}"
    name="{{ audioOptions.name }}"
    author="{{ audioOptions.author }}"
    src="{{ audioOptions.src }}"
    controls="{{ audioOptions.controls }}"
    loop="{{ audioOptions.loop }}">
</audio>
<button type="primary" bindtap="changeMusicHandle">切换</button>
Page({
    data: {
        audioOptions:{
            id:"myAudio",
            name:"妈妈的话",
            author:"zby忠宇",
            poster:"https://p2.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
           src:"https://music.163.com/song/media/outer/url?id=1961763339",
            controls:true,
            loop:true
       }
   },
    changeMusicHandle(){
        this.setData({
            audioOptions:{
                id:"myAudio",
                Page({
    data: {
        audioOptions:{
            id:"myAudio",
            name:"妈妈的话",
            author:"zby忠宇",
            poster:"https://p2.music.126.net/6y-
UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
            src:"https://music.163.com/song/media/outer
/url?id=1961763339",
            controls:true,
            loop:true
       }
   },
    changeMusicHandle(){
        this.setData({
            audioOptions:{
                id:"myAudio",
                 name:"时光洪流",
                 author:"程响",
                 poster:"https://p2.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
                 src:"https://music.163.com/song/media/outer
/url?id=1868943615",
                controls:true,
                loop:true
           }
       })
   }
})

1. 在微信小程序中, audio 的属性 controls 作用是:是否显示默认控件

组件_video

视频

<video src="http://iwenwiki.com/api/livable/livable.mp4"></video>

为了美观,我们将视频宽度充满全屏

video{
    width: 100%;
}

属性说明

2345_image_file_copy_669.jpg

<video
    id="myVideo" src="http://iwenwiki.com/api/livable/livable.mp4"
    duration="100"
    controls
    autoplay
    loop
    muted
    initial-time="10"
    show-mute-btn
    title="制作歌曲"
    danmu-list="{{ danmuList }}"
    danmu-btn
    enable-danmu></video>
    <button type="primary" bindtap="sendDanmuHandle">发送弹幕</button>
// pages/audio/audio.js
Page({
    data: {
        danmuList: [{
            text: '第 1s 出现的弹幕',
            color: '#ff0000',
            time: 11
       }]
   },
    onReady() {
        this.videoContext = wx.createVideoContext('myVideo')
   },
    sendDanmuHandle() {
        this.videoContext.sendDanmu({
            text: "真好看",
            color: "#00ff00"
       })
   }
})

1. 在微信小程序中, video 的属性 initial-time 作用是:指定视频初始播放位置

组件_camera

2345_image_file_copy_670.jpg

系统相机。扫码二维码功能

<camera style="width: 100%; height: 300px;"></camera>

属性说明

2345_image_file_copy_671.jpg

<camera mode="normal" device-position="back" flash="on" style="width: 100%; height:
300px;"></camera>
<button type="primary" bindtap="takePhotoHandle">拍照</button>
<view>预览</view>
<image mode="widthFix" src="{{src}}"></image>

属性说明

Page({
    data:{
        src:""
   },
    takePhotoHandle() {
        const ctx = wx.createCameraContext()
        ctx.takePhoto({
            quality: 'high',
            success: (res) => {
                this.setData({
                   src: res.tempImagePath
               })
           }
       })
   }
})

1. 在微信小程序中, camera 的属性 mode 作用是:模式调整,扫码或相机

组件_map

2345_image_file_copy_672.jpg

地图,小程序地图实现功能相对比基础一些,如果要实现完整的地 图能力,请参考腾讯地图

温馨提示

腾讯地图:https://lbs.qq.com/product/miniapp/home/

<map latitude="23.099994" longitude="113.324520"></map>

属性说明

2345_image_file_copy_673.jpg

<map
  latitude="{{latitude}}"
  longitude="{{longitude}}"
  scale="12"
  min-scale="10"
  max-scale="18"
></map>
// pages/map/map.js
Page({
    data: {
        latitude: 23.099994,
        longitude: 113.324520,
   }
})

1. 在微信小程序中, map 的属性 scale 作用是:缩放级别,取值范围为3-20

目录
相关文章
|
5天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的学习自律养成小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的学习自律养成小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
5天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的高校学习助手小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的高校学习助手小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
11天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的线上学习资源智能推荐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的线上学习资源智能推荐系统附带文章源码部署视频讲解等
20 5
|
10天前
|
小程序 前端开发 JavaScript
微信小程序|英语学习交流平台小程序
微信小程序|英语学习交流平台小程序
|
10天前
|
小程序 前端开发 安全
微信小程序|大学生党务学习平台的设计与实现
微信小程序|大学生党务学习平台的设计与实现
|
10天前
|
小程序 前端开发 JavaScript
微信小程序|小程序公考学习平台的设计与实现
微信小程序|小程序公考学习平台的设计与实现
|
10天前
|
小程序 前端开发 安全
大学生党务学习平台|基于微信小程序实现大学生党务学习平台
大学生党务学习平台|基于微信小程序实现大学生党务学习平台
|
10天前
|
小程序 前端开发 JavaScript
微信小程序|语言课学习系统的设计与实现
微信小程序|语言课学习系统的设计与实现
|
10天前
|
小程序
微信小程序快速入门 - 10分钟入门
微信小程序快速入门 - 10分钟入门
6 0
|
11天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的驾校预约学习系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的驾校预约学习系统附带文章源码部署视频讲解等
9 0

热门文章

最新文章