书接上回。
一、开关选择器---switch
06.jpg
开关选择器小案例
text.wxml
<view class="page">
<view class="item">
声音<switch type="switch" checked bindchange="change" />
</view>
<view class="item">
震动<switch type="switch" bindchange="change" />
</view>
</view>
text.js
Page({
change:function(e){
console.log(e.detail.value)
//被选上的时候值为true
//没有被选上的时候值为false
//通过这个我们可以对其进行操作
}
})
text.wxss
.item{
background-color: #dfdfdf;
padding: 10px;
line-height: 30px;
border: 1px solid white;
}
switch{
float: right
}
运行效果
GIF.gif
二、图标---组件：icon
微信提供了很多默认的图标，可以自行选择，那么列举一下、
07.jpg
图标案例
text.wxml
<view class="page">
<view>{{title}}</view>
<view wx:for="{{icons}}" class="center">
{{item.type}} <icon type="{{item.type}}" size="{{item.size}}"></icon>
</view>
<button>
<icon type="download"></icon>下载
</button>
</view>
text,js
Page({
data:{
title:"",
icons:[
{
type:"success" ,size:"25"
},
{
type:"success_no_circle" ,size:"25"
},
{
type:"info" ,size:"25"
},
{
type:"warn" ,size:"25"
},
{
type:"waiting" ,size:"25"
},
{
type:"cancel" ,size:"25"
},
{
type:"download" ,size:"25"
},
{
type:"search" ,size:"25"
},
{
type:"clear" ,size:"25"
},
]
},
text.css
button{
width: 150px;
margin-top: 10px;
}
icon{
position: relative;
top: 4px;
}
各种图标效果
08.jpg
三、页面 链接---组件：navigator
09.jpg
页面链接小案例
这里介绍两种链接的样式，一个是通过点击事件，一个是通过navigator组件
text.wxml
<view class="page">
<navigator url="/pages/demo7/demo7?title=form_demo8">跳转到demo7</navigator>
//通过点击的方式跳转
<view bindtap="redirect">跳转到demo6</view>
</view>
text.js
Page({
redirect:function(){
wx.navigateTo({
url: '/pages/demo6/demo6?title=from-demo8&a=1&b=2',
success: function(res){
// success
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
}
})
可以看到，我们在链接的后面传递了参数，所以在对应的页面需要接收参数，在上栗中我们要设置接收
那我们现在，通过传递的title来改变上栗中的title
Page({
data:{
title:"",
icons:[
{
type:"success" ,size:"25"
},
{
type:"success_no_circle" ,size:"25"
},
{
type:"info" ,size:"25"
},
{
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){
this.setData({
//options以数组的形式拿到从上一个页面传递过来的所有参数
title:options.title
})
}
})
运行结果
GIF.gif
四、音乐---组件：audio
09.jpg
音频小栗子
text.wxml
<view class="page">
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}"controls></audio>
text.js
Page({
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',
}
})
运行结果
10.jpg
五、视频---组件：video
11.jpg
视频小案例
text.wxml
<view class="page" style="text-align:center">
<video src="{{src}}" autoplay controls danmu-btn enable-danmu danmu-list="{{danmuList}}">
</video>
</view>
text.js
Page({
data:{
danmuList:[
{
text: '第 2s 出现的弹幕',
color: 'red',
time: 2
},
{
text: '第 5s 出现的弹幕',
color: 'red',
time: 6
}
],
src:"http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
}
})
text.wxss
view{
text-align: center;
}
video{
width: 720rpx;
}
运行效果
GIF.gif
六、地图---组件：map
11.jpg
12.jpg
13.jpg
14.jpg
15.jpg
地图小栗子
text.wxml
<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>
text.js
// map.js
Page({
data: {
markers: [{
iconPath: "/img/green_tri.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: '/img/green_tri.png',
position: {
left: 0,
top: 300 - 50,
width: 50,
height: 50
},
clickable: true
}]
},
regionchange(e) {
console.log(e.type)
},
markertap(e) {
console.log(e.markerId)
wx.showToast({
title: '这是哪里？',
icon: 'success',
duration: 2000
})
},
controltap(e) {
console.log(e.controlId)
}
})
运行效果
GIF.gif
七、canvas---组件canvas
00.jpg
canvas小案例
<view class="page">
<canvas style="height:200px;width:300px" canvas-id="1000"></canvas>
</view>
text.js
Page({
data:{
},
onLoad:function(options){
var context = wx.createContext()
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();
wx.drawCanvas({
canvasId:1000,
actions:context.getActions()
})
}
})
效果
01.jpg
网友评论