技术交流QQ群:170933152
案例7：开关选择器
案例8：各种图标案例9：页面跳转案例10：多媒体音视频案例11：嵌入地图案例12：画布:在上面可以画柱状图等等.今天继续讲组件:登录注册:用到表单组件https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html然后咱们看开关选择器:比如,咱们做个声音,震动的开关控制:case7case7.jscase7.wxmlcase7.wxss用到switch组件:switch开关选择器。属性名 类型 默认值 说明checked Booleanfalse 是否选中type String switch 样式，有效值：switch, checkboxbindchange EventHandlechecked 改变时触发 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.jsPage({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(){}}) --------------------------好,看看效果然后咱们看下一个:系统提供的各种图标.新建一个case8case8.jscase8.wxmlcase8.wxss使用的组件:https://mp.weixin.qq.com/debug/wxadoc/dev/component/icon.htmlicon图标。属性名 类型 默认值 说明type String icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clearsize Number 23 icon的大小，单位pxcolor Color icon的颜色，同css的colorcase8.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" }}-------------------------看看效果.好,然后咱们来看看下一个页面:页面跳转,从一个页面跳转到另一个页面case9case9.jscase9.wxmlcase9.wxss需要用的组件:navigator页面链接。属性名 类型 默认值 说明url String 应用内的跳转链接redirect Booleanfalse 打开方式为页面重定向，对应 wx.redirectTo（将被废弃，推荐使用 open-type）open-type Stringnavigate 可选值 'navigate:打开新页面'、'redirect:在当前页面打开'、'switchTab'，对应于wx.navigateTo、wx.redirectTo、wx.switchTab的功能hover-class Stringnavigator-hover 指定点击时的样式类，当hover-class="none"时，没有点击态效果hover-start-time Number50 按住后多久出现点击态，单位毫秒hover-stay-time Number600 手指松开后点击态保留时间，单位毫秒注：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.首先声明一个参数//titletitle:'',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#wxnavigatetoobjectwx.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.jsPage({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(){}}) ------------------------------看看,效果通过事件也可以跳转对吧.好接下来咱们看看多媒体如何使用:case10case10.jscase10.wxmlcase10.wxss看看帮助文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/audio.html#audioaudio音频。属性名 类型 默认值 说明id String video 组件的唯一标识符src String 要播放音频的资源地址loop Boolean false 是否循环播放controls Booleantrue 是否显示默认控件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.jsPage({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.wxml --><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.jsPage({ 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.htmlvideo视频。属性名 类型 默认值 说明src String 要播放视频的资源地址controls Booleantrue 是否显示默认播放控件（播放/暂停按钮、播放进度、时间）danmu-list Object Array弹幕列表danmu-btn Booleanfalse 是否显示弹幕按钮，只在初始化时有效，不能动态变更enable-danmu Booleanfalse 是否展示弹幕，只在初始化时有效，不能动态变更autoplay Booleanfalse 是否自动播放bindplay EventHandle当开始/继续播放时触发play事件bindpause EventHandle当暂停播放时触发 pause 事件bindended EventHandle当播放到末尾时触发 ended 事件bindtimeupdate EventHandle播放进度变化时触发，event.detail = {currentTime: '当前播放时间'} 。触发频率应该在 250ms 一次objectFit Stringcontain 当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖做一个看看:case11case11.jscase11.wxmlcase11.wxsscase11.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.jsPage({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(){}})-------------------------看看,效果,咱们来看看地图:case12case12.jscase12.wxmlcase12.wxss帮助文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#mapmap地图。属性名 类型 默认值 说明longitude Number中心经度latitude Number中心纬度scale Number 16 缩放级别，取值范围为5-18markers Array 标记点covers Array 即将移除，请使用 markerspolyline 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#wxshowtoastobjectcase12.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(){}}) ------------------------------好,然后咱们再来看看:画布,比如画一些柱状图等等需要用到新建:case13case13.jscase13.wxmlcase13.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.jshttps://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.comhttps://github.com/xiaolin3303/wx-charts这里有个插件的使用方法等.具体用法去看看就可以.新闻热点
疑难解答
