本文共 15550 字，大约阅读时间需要 51 分钟。

技术交流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.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.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}}" bindregiοnchange="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 这里有个插件的使用方法等. 具体用法去看看就可以.

转载地址：https://credream.blog.csdn.net/article/details/57415602 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！