微信小程序实用案例代码片段大全《三》


TITF 出品:微信小程序实用案例代码片段大全《三》 一:使用 image 组件显示图片 关键代码 1、index.wxml 1 来自 CODE 的代码片 snippet_file_0.txt 2、index.js 1 2 3 4 5 6 Page({ data:{ // text:“这是一个页面“ imageSrc:'../../pages/image/img.png' } }) 来自 CODE 的代码片 二:使用 video 组件播放视频 index.wxml 1 来自 CODE 的代码片 snippet_file_0.txt 2、index.js 1 2 3 4 5 6 7 8 Page({ data:{ // text:“这是一个页面“ }, videoErrorCallback: function (e) { console.log('视频错误信息:'+e.detail.errMsg); } }) 来自 CODE 的代码片 三:使用 audio 组件播放音乐 关键代码 1、index.wxml 1 来自 CODE 的代码片 snippet_file_0.txt 2、index.js 1 2 3 Page({ data: { audioPoster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000', audioName: '此时此刻', audioAuthor: '许巍', audioSrc: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292 4 5 6 7 8 F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160C AF3E6A&fromtag=46', } }) 来自 CODE 的代码片 四:使用 loading 组件显示载入动画 关键代码 1、index.wxml 1 2 来自 CODE 的代码片 snippet_file_0.txt 2、index.js 1 2 3 4 5 6 7 8 9 10 11 Page({ data: { loadingHidden: true }, loadingTap: function(){ this.setData({ loadingHidden: false }); var that = this; setTimeout(function(){ that.setData({ 12 13 14 15 16 17 loadingHidden: true }); that.update(); }, 3000); } }) 来自 CODE 的代码片 五:使用 toast 消息对话框提示用户忘记输入用户名或密码 关键代码 1、index.wxml 1 2 3 4 5 6
7 8 9 10 11 12 13 14 15 16 17
{{userName}} {{psw}} 来自 CODE 的代码片 snippet_file_0.txt 2、index.js 1 2 Page({ data:{ 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 // text:“这是一个页面“ toastHidden:true, userName:'', psw:'' }, formBindsubmit:function(e){ if(e.detail.value.userName.length==0||e.detail.value.psw.length==0){ this.setData({ toastHidden:!this.data.toastHidden }) }else{ this.setData({ tip:'', userName:'用户名:'+e.detail.value.userName, psw:'密码:'+e.detail.value.psw }) 19 20 21 22 23 24 25 26 27 28 29 30 31 32 } }, formReset:function(){ this.setData({ userName:'', psw:'' }) }, toastBindChange:function(){ this.setData({ toastHidden:!this.data.toastHidden }) } }) 来自 CODE 的代码片 六:点击文字实现页面跳转 关键代码 index.js 文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Page({ data:{ // text:“这是一个页面“ }, onLoad:function(options){ // 页面初始化 options 为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ 15 16 17 18 19 20 // 页面隐藏 }, onUnload:function(){ // 页面关闭 } }) 来自 CODE 的代码片 snippet_file_0.txt index.wxml 文件 1 2 3 点击我跳转到下一个页面 来自 CODE 的代码片 七:下拉列表 关键代码 .js 文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Page({ data:{ // text:“这是一个页面“ open:false }, showitem:function(){ this.setData({ open:!this.data.open }) }, onLoad:function(options){ // 页面初始化 options 为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 16 17 18 19 20 21 22 23 24 25 26 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 } }) 来自 CODE 的代码片 snippet_file_0.txt .wxml 文件 1 2 3 4 5 6 7 8 点击我显示下拉列表 列 表 1 列 表 2 列 表 3 来自 CODE 的代码片 snippet_file_0.txt .wxss 文件 1 2 3 4 .page_bd{ padding: 10px; background-color: snow; } 5 6 7 8 9 10 11 12 13 14 15 16 17 18 .body_head{ border: 1px solid; border-color: beige; padding: 10px; } .display_show{ display: block; border: 1px solid; border-color: beige; padding: 10px; } .display_none{ display: none; } 来自 CODE 的代码片
还剩14页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

rukezhang

贡献于2017-03-01

下载需要 10 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf