您的位置：首页 > 移动开发 > 微信开发

微信小程序开发学习笔记006--微信小程序组件详解02

2017-02-26 15:37 881 查看

技术交流QQ群:170933152

案例7：开关选择器

案例8：各种图标

案例9：页面跳转

案例10：多媒体音视频

案例11：嵌入地图

案例12：画布:在上面可以画柱状图等等.

今天继续讲组件:

登录注册:

用到表单组件
https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html
然后咱们看开关选择器:

比如,咱们做个声音,震动的开关控制:

case7

case7.js

case7.wxml

case7.wxss

用到switch组件:

switch

开关选择器。

属性名类型
默认值说明

checked Boolean
false 是否选中

type String
switch 样式，有效值：switch, checkbox

bindchange EventHandle
checked 改变时触发 change 事件，event.detail={ value:checked}

color Color
switch 的颜色，同 css 的 color

在设置中,用的比较多

case7.wxml

<view class="page">

<view class="item">

声音:<switch bindchange="change" checked/>

</view>

<view class="item">

震动:<switch bindchange="change1" checked/>

</view>

</view>

case7.wxss

.item{
background:#dfdfdf;
padding:10px;
line-height:30px;
border-bottom:1px solid #fff;

}

switch{
float:right;

}

case7.js

Page({
data:{

},
change:function(e){

console.log(e.detail.value);
},
change1:function(e){

console.log(e.detail.value);
},
onLoad:function(options){

},
onReady:function(){

},
onShow:function(){

},
onHide:function(){

},
onUnload:function(){

},
onPullDownRefresh:function(){

},
onReachBottom:function(){

}

})

--------------------------

好,看看效果

然后咱们看下一个:

系统提供的各种图标.

新建一个case8

case8.js

case8.wxml

case8.wxss

使用的组件:
https://mp.weixin.qq.com/debug/wxadoc/dev/component/icon.html
icon

图标。

属性名类型
默认值说明

type String
icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear

size Number
23 icon的大小，单位px

color Color
icon的颜色，同css的color

case8.js中,根据帮助文档定义数据:

Page({
data:{
//1.定义一个数组,定义数据.
//
icons:[
{
type:'success',size:25
},
{
type:'success_no_circle',size:25
},
{
type:'info',size:45
},
{
type:'warn',size:25
},
{
type:'waiting',size:25
},
{
type:'cancel',size:25
},
{
type:'download',size:25
},
{
type:'search',size:25
},
{
type:'clear',size:25
}
]

},
onLoad:function(options){

},
onReady:function(){

},
onShow:function(){

},
onHide:function(){

},
onUnload:function(){

},
onPullDownRefresh:function(){

},
onReachBottom:function(){

}

})

------------------------

case8.wxml:

//1.这里循环把图标打印出来.

//

<view class="page">

<view wx:for="{{icons}}">

{{item.type}}--> <icon type="{{item.type}}" size="{{item.size}}" />

</view>

//2.做一个下载的案例

//

<button style="width:150px">

<icon style="position:relative;top:4px;" type="download"/>下载

</button>

</view>

在app.json中添加页面:

{

"pages":[

"pages/case8/case8",

"pages/case7/case7",

"pages/case6/case6",

"pages/case5/case5",

"pages/case4/case4",

"pages/case3/case3",

"pages/case2/case2",

"pages/case1/case1",

"pages/index/index",

"pages/logs/logs"

],

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "WeChat",

"navigationBarTextStyle":"black"

}

}

-------------------------

看看效果.

好,然后咱们来看看下一个页面:

页面跳转,从一个页面跳转到另一个页面

case9

case9.js

case9.wxml

case9.wxss

需要用的组件:

navigator

页面链接。

属性名类型
默认值说明

url String
应用内的跳转链接

redirect Boolean
false 打开方式为页面重定向，对应 wx.redirectTo（将被废弃，推荐使用 open-type）

open-type String
navigate 可选值 'navigate:打开新页面'、'redirect:在当前页面打开'、'switchTab'，对应于wx.navigateTo、wx.redirectTo、wx.switchTab的功能

hover-class String
navigator-hover 指定点击时的样式类，当hover-class="none"时，没有点击态效果

hover-start-time Number
50 按住后多久出现点击态，单位毫秒

hover-stay-time Number
600 手指松开后点击态保留时间，单位毫秒

注：navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, <navigator/> 的子节点背景色应为透明色

从case9跳转到case8:

咱们看看:

case9.wxml

<view class="page">

<navigator url="/pages/case8/case8">跳转到case8页面</navigator>

</view>

app.json

{

"pages":[

"pages/case9/case9",

"pages/case8/case8",

"pages/case7/case7",

"pages/case6/case6",

"pages/case5/case5",

"pages/case4/case4",

"pages/case3/case3",

"pages/case2/case2",

"pages/case1/case1",

"pages/index/index",

"pages/logs/logs"

],

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "WeChat",

"navigationBarTextStyle":"black"

}

}

------------

看看效果,这个用的还是很多的.

带参数怎么带?

case9.wxml

<view class="page">

<navigator url="/pages/case8/case8?title=from_case8">跳转到case8页面</navigator>

</view>

这样,/pages/case8/case8?title=from_case8

传参数:

在case8.js中,咱们这样做:

Page({
data:{
//1.首先声明一个参数
//title
title:'',
icons:[
{
type:'success',size:25
},
{
type:'success_no_circle',size:25
},
{
type:'info',size:45
},
{
type:'warn',size:25
},
{
type:'waiting',size:25
},
{
type:'cancel',size:25
},
{
type:'download',size:25
},
{
type:'search',size:25
},
{
type:'clear',size:25
}
]

},
onLoad:function(options){
//2.然后这里设置数据的地方,这样获取一下参数
//
this.setData({
title:options.title
})
},
onReady:function(){

},
onShow:function(){

},
onHide:function(){

},
onUnload:function(){

},
onPullDownRefresh:function(){

},
onReachBottom:function(){

}

})

-----------------

然后在case8.wxml中:

<view class="page">

//1.这里显示

//

<view>{{title}}</view>

<view wx:for="{{icons}}">

{{item.type}}--> <icon type="{{item.type}}" size="{{item.size}}" />

</view>

<button style="width:150px">

<icon style="position:relative;top:4px;" type="download"/>下载

</button>

</view>

好,咱们看看效果,点击:

跳转到case8页面可以看到显示出来了数据了对吧.

然后,咱们看看如何传递多个参数

case9.wxml

<view class="page">

<navigator url="/pages/case8/case8?title=from_case8&a=1&b=2&c=3">跳转到case8页面</navigator>

</view>

这样就可以了.

咱们把所有的参数在控制台打印看看:

在case8.js中:

Page({
data:{
title:'',
icons:[
{
type:'success',size:25
},
{
type:'success_no_circle',size:25
},
{
type:'info',size:45
},
{
type:'warn',size:25
},
{
type:'waiting',size:25
},
{
type:'cancel',size:25
},
{
type:'download',size:25
},
{
type:'search',size:25
},
{
type:'clear',size:25
}
]

},
onLoad:function(options){
//1.这里这样打印就可以了.
//
console.log(options);
this.setData({
title:options.title
})
},
onReady:function(){

},
onShow:function(){

},
onHide:function(){

},
onUnload:function(){

},
onPullDownRefresh:function(){

},
onReachBottom:function(){

}

})

跑跑看看效果,

然后看看,怎么通过事件进行跳转哈
https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html#wxnavigatetoobject
wx.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。

OBJECT 参数说明：

参数类型必填
说明

url String
是需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'

success Function
否接口调用成功的回调函数

fail Function
否接口调用失败的回调函数

complete Function
否接口调用结束的回调函数（调用成功、失败都会执行）

-----------------------------

case9.wxml中:

<view class="page">

<navigator url="/pages/case8/case8?title=from_case8&a=1&b=2&c=3">跳转到case8页面</navigator>

//1.这里通过这样的方式

//bindtap="redirect"绑定事件

//

<view bindtap="redirect">跳转到case8页面</view>

</view>

case9.js

Page({
data:{

},
//1.页面跳转事件
//
redirect:function(e){

wx.navigateTo({
url:'/pages/case8/case8?title=from_case9&a=1&b=2&c=3'

})
},
onLoad:function(options){

},
onReady:function(){

},
onShow:function(){

},
onHide:function(){

},
onUnload:function(){

},
onPullDownRefresh:function(){

},
onReachBottom:function(){

}

})

------------------------------

看看,效果通过事件也可以跳转对吧.

好接下来咱们看看多媒体如何使用:

case10

case10.js

case10.wxml

case10.wxss

看看帮助文档:
https://mp.weixin.qq.com/debug/wxadoc/dev/component/audio.html#audio
audio

音频。

属性名类型
默认值说明

id String
video 组件的唯一标识符

src String
要播放音频的资源地址

loop Boolean
false 是否循环播放

controls Boolean
true 是否显示默认控件

poster String
默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效

name String
未知音频默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效

author String
未知作者默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效

binderror EventHandle
当发生错误时触发 error 事件，detail = {errMsg: MediaError.code}

bindplay EventHandle
当开始/继续播放时触发play事件

bindpause EventHandle
当暂停播放时触发 pause 事件

bindtimeupdate EventHandle
当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}

bindended EventHandle
当播放到末尾时触发 ended 事件

MediaError.code

返回错误码描述

MEDIA_ERR_ABORTED 获取资源被用户禁止

MEDIA_ERR_NETWORD 网络错误

MEDIA_ERR_DECODE 解码错误

MEDIA_ERR_SRC_NOT_SUPPOERTED 不合适资源

来看看:

case10.wxml

<view class="page">

<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" controls>

</audio>

</view>

case10.js

Page({
data:{

//1.这里定义数据

poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',

name: '此时此刻',

author: '许巍',

src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
},
onLoad:function(options){

},
onReady:function(){

},
onShow:function(){

},
onHide:function(){

},
onUnload:function(){

},
onPullDownRefresh:function(){

},
onReachBottom:function(){

}

})

看看效果

-----------------------------

好,然后看看帮助文档,还有其他的用法比如:
https://mp.weixin.qq.com/debug/wxadoc/dev/component/audio.html#audio
示例代码：



<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio>

<button type="primary" bindtap="audioPlay">播放</button>

<button type="primary" bindtap="audioPause">暂停</button>

<button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>

<button type="primary" bindtap="audioStart">回到开头</button>

// audio.js

Page({

onReady: function (e) {

// 使用 wx.createAudioContext 获取 audio 上下文 context

this.audioCtx = wx.createAudioContext('myAudio')

},

data: {

poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',

name: '此时此刻',

author: '许巍',

src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',

},

audioPlay: function () {

this.audioCtx.play()

},

audioPause: function () {

this.audioCtx.pause()

},

audio14: function () {

this.audioCtx.seek(14)

},

audioStart: function () {

this.audioCtx.seek(0)

}

})

-----------------------------------

看看,效果,自己试试

然后看看视频播放:
https://mp.weixin.qq.com/debug/wxadoc/dev/component/video.html
video

视频。

属性名类型
默认值说明

src String
要播放视频的资源地址

controls Boolean
true 是否显示默认播放控件（播放/暂停按钮、播放进度、时间）

danmu-list Object Array
弹幕列表

danmu-btn Boolean
false 是否显示弹幕按钮，只在初始化时有效，不能动态变更

enable-danmu Boolean
false 是否展示弹幕，只在初始化时有效，不能动态变更

autoplay Boolean
false 是否自动播放

bindplay EventHandle
当开始/继续播放时触发play事件

bindpause EventHandle
当暂停播放时触发 pause 事件

bindended EventHandle
当播放到末尾时触发 ended 事件

bindtimeupdate EventHandle
播放进度变化时触发，event.detail = {currentTime: '当前播放时间'} 。触发频率应该在 250ms 一次

objectFit String
contain 当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖

做一个看看:

case11

case11.js

case11.wxml

case11.wxss

case11.wxml:

<view class="page" style="text-align:center">

<video src="{{src}} controls"></video>

</view>

case11.js定义数据:

Page({
data:{
//1.定义数据
//
src:"http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
},
onLoad:function(options){

},
onReady:function(){

},
onShow:function(){

},
onHide:function(){

},
onUnload:function(){

},
onPullDownRefresh:function(){

},
onReachBottom:function(){

}

})

可以看到可以播放了对吧,

咱们再添加一些参数:

加上弹幕:

case11.wxml

<view class="page" style="text-align:center">

<video src="{{src}}" autoplay="true" controls enable-danmu="true" danmu-list="{{danmulist}}"></video>

</view>

添加上:

enable-danmu="true"

然后添加上:

danmu-list="{{danmulist}}"

定义数据:

case11.js

Page({
data:{
//1.定义弹幕数据
danmulist:[
{

text: '第 1s 出现的弹幕',

color: '#ff0000',

time: 1

},

{

text: '第 3s 出现的弹幕',

color: '#ff00ff',

time: 3

}
],
src:"http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
},
onLoad:function(options){

},
onReady:function(){

},
onShow:function(){

},
onHide:function(){

},
onUnload:function(){

},
onPullDownRefresh:function(){

},
onReachBottom:function(){

}

})

-------------------------

看看,效果,咱们来看看地图:

case12

case12.js

case12.wxml

case12.wxss

帮助文档:
https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#map
map

地图。

属性名类型
默认值说明

longitude Number
中心经度

latitude Number
中心纬度

scale Number
16 缩放级别，取值范围为5-18

markers Array
标记点

covers Array
即将移除，请使用 markers

polyline Array
路线

circles Array
圆

controls Array
控件

include-points Array
缩放视野以包含所有给定的坐标点

show-location Boolean
显示带有方向的当前定位点

bindmarkertap EventHandle
点击标记点时触发

bindcontroltap EventHandle
点击控件时触发

bindregionchange EventHandle
视野发生变化时触发

bindtap EventHandle
点击地图时触发

去把帮助文档去看看,每个属性都是什么意思.
https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowtoastobject
case12.wxml

咱们把帮助文档中的代码copy过来看看,效果

<view class="page">

<map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%;
height: 300px;"></map>

</view>

然后,case12.js中提供数据:

Page({
data:{
//1.这里定义数据
//
markers: [{

iconPath: "/imgs/others.png",

id: 0,

latitude: 23.099994,

longitude: 113.324520,

width: 50,

height: 50

}],

polyline: [{

points: [{

longitude: 113.3245211,

latitude: 23.10229

}, {

longitude: 113.324520,

latitude: 23.21229

}],

color:"#FF0000DD",

width: 2,

dottedLine: true

}],

controls: [{

id: 1,

iconPath: '/resources/location.png',

position: {

left: 0,

top: 300 - 50,

width: 50,

height: 50

},

clickable: true

}]
},
//2.这里定义数据,点击的时候
//比如点击以后希望有个提示
//
markertap:function(e){
console.log(e);

//3.添加上这个,点击的时候就会有提示了

//这个在帮助文档中有:

//https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowtoastobject

wx.showToast({

title: '成功',

icon: 'success',

duration: 2000

})
},
onLoad:function(options){

},
onReady:function(){

},
onShow:function(){

},
onHide:function(){

},
onUnload:function(){

},
onPullDownRefresh:function(){

},
onReachBottom:function(){

}

})

------------------------------

好,然后咱们再来看看:

画布,比如画一些柱状图等等需要用到

新建:

case13

case13.js

case13.wxml

case13.wxss

然后在app.json中配置首页:

{

"pages":[

"pages/case13/case13",

"pages/case12/case12",

"pages/case11/case11",

"pages/case10/case10",

"pages/case9/case9",

"pages/case8/case8",

"pages/case7/case7",

"pages/case6/case6",

"pages/case5/case5",

"pages/case4/case4",

"pages/case3/case3",

"pages/case2/case2",

"pages/case1/case1",

"pages/index/index",

"pages/logs/logs"

],

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "WeChat",

"navigationBarTextStyle":"black"

}

}

--------------------

好,然后咱们看看:

如何使用:

case13.wxml

<view class="page">

<canvas style="height:200px;width:300px;" canvas-id="1000"></canvas>

</view>

定义一个画布,然后画图就可以了.

case13.js
https://mp.weixin.qq.com/debug/wxadoc/dev/api/canvas/draw-canvas.html
这里有画图的案例,这里我copy里面的画图的一部分代码:

Page({
data:{

},
onLoad:function(options){
//1. 使用 wx.createContext 获取绘图上下文 context

var context = wx.createContext()

context.setStrokeStyle("#00ff00")

context.setLineWidth(5)

context.rect(0, 0, 200, 200)

context.stroke()

context.setStrokeStyle("#ff0000")

context.setLineWidth(2)

context.moveTo(160, 100)

context.arc(100, 100, 60, 0, 2 * Math.PI, true)

context.moveTo(140, 100)

context.arc(100, 100, 40, 0, Math.PI, false)

context.moveTo(85, 80)

context.arc(80, 80, 5, 0, 2 * Math.PI, true)

context.moveTo(125, 80)

context.arc(120, 80, 5, 0, 2 * Math.PI, true)

context.stroke()

//2.调用 wx.drawCanvas，通过 canvasId 指定在哪张画布上绘制，

//通过 actions 指定绘制行为
wx.drawCanvas({
canvasId:1000,
actions:context.getActions()
})
},
onReady:function(){

},
onShow:function(){

},
onHide:function(){

},
onUnload:function(){

},
onPullDownRefresh:function(){

},
onReachBottom:function(){

}

})

=========================

看看效果,其实有类似这种画图插件,微信小程序提供了

wx-charts这样一个画柱状图饼图等的插件.

github.com
https://github.com/xiaolin3303/wx-charts
这里有个插件的使用方法等.

具体用法去看看就可以.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航