微信小程序全方位深度解析课程Dome-First项目module

微信小程序全方位深度解析课程Dome-First项目module

课程观看地址：http://edu.csdn.NET/course/detail/3081

var order = ["a","b","c"];var index = 0;var progressNum = 0;var rectX = 0;//用于返回豆瓣前250名的电影var api = "https://api.douban.com/v2/movie/top250";Page({data:{toView:"a",imgUrls:['http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'],inter:2000,autopaly:true,iconType:['success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn',      'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download',      'info_circle', 'cancel', 'search', 'clear'],progress:0,disabledBol:false,country: [      {name: 'USA', value: '美国'},      {name: 'CHN', value: '中国', checked: 'true'},      {name: 'BRA', value: '巴西'},      {name: 'JPN', value: '日本'},      {name: 'ENG', value: '英国'},      {name: 'TUR', value: '法国'},    ],    citys:["北京","上海","广州","深圳"],    index:0,    time:"09:01",    date:"2016",    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',  imageSrc:"../../images/cat.jpg",  imageArray:[{      mode: 'scaleToFill',      text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'    }, {       mode: 'aspectFit',      text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'    }, {       mode: 'aspectFill',      text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'    }, {       mode: 'top',      text: 'top：不缩放图片，只显示图片的顶部区域'     }, {            mode: 'bottom',      text: 'bottom：不缩放图片，只显示图片的底部区域'    }, {       mode: 'center',      text: 'center：不缩放图片，只显示图片的中间区域'    }, {       mode: 'left',      text: 'left：不缩放图片，只显示图片的左边区域'    }, {       mode: 'right',      text: 'right：不缩放图片，只显示图片的右边边区域'    }, {       mode: 'top left',      text: 'top left：不缩放图片，只显示图片的左上边区域'     }, {       mode: 'top right',      text: 'top right：不缩放图片，只显示图片的右上边区域'    }, {       mode: 'bottom left',      text: 'bottom left：不缩放图片，只显示图片的左下边区域'    }, {       mode: 'bottom right',      text: 'bottom right：不缩放图片，只显示图片的右下边区域'    }],    danmuList:[      {        text: '第 1s 出现的弹幕',        color: '#ff0000',        time: 1      },      {        text: '第 3s 出现的弹幕',        color: '#ff00ff',        time: 3      }    ],    markers: [{      latitude: 23.175200,      longitude: 113.346410,      name: '蓝鸥科技',      desc: '我现在的位置'    }],    rectX:0},getPos:function (){wx.getLocation({  type: 'gcj02',  success: function(res) {  // console.log(res);    var latitude = res.latitude    var longitude = res.longitude    wx.openLocation({      latitude: latitude,      longitude: longitude,      scale: 28    })  }})},touchstartFn:function (e){console.log(e);},touchmoveFn:function (e){console.log(e);},touchendFn:function (){console.log("松开了");},onReady:function (){// this.audioCtx = wx.createAudioContext('myAudio');//使用wx.createContext获取绘图的上下文var context = wx.createContext("firstCanvas");var frameNum = 0;/*context.setStrokeStyle("#00ff00");context.rect(0,20,50,50);context.stroke();context.fill();wx.drawCanvas({canvasId:"firstCanvas",actions: context.getActions() // 获取绘图动作数组});*/function draw(){context.setStrokeStyle("#00ff00");context.rect(rectX,20,50,50);context.stroke();context.fill();wx.drawCanvas({canvasId:"firstCanvas",actions: context.getActions() // 获取绘图动作数组});}function animation(){frameNum++;if (frameNum%4==0){rectX++;if (rectX > 200){return;}draw();}if (frameNum>=10000){frameNum = 0;}requestAnimationFrame(animation);}animation();},audioPlay:function (){this.audioCtx.play();},audioPause:function (){this.audioCtx.pause();},audio50:function (){this.audioCtx.seek(50);},navigateTo:function (){wx.navigateTo({  url: '../logs/logs?id=54321&user=tangcaiye'})/*wx.redirectTo({  url: '../logs/logs?id=54321&user=tangcaiye'})*/},showToast:function (){wx.showToast({title:"删除成功",icon:"loading",duration:10000,success:function (){console.log("显示消息框成功");}});wx.request({  url: api,   data: {},  header: {      'Content-Type': 'application/json'  },  success: function(res) {    console.log(res.data);    wx.hideToast();  }})},showModal:function (){wx.showModal({title:"提示",content:"我是一个模态弹窗",showCancel:false,cancelText:"点我点我",confirmText:"我是缺点",success:function (res){console.log(res);}});},showAction:function (){wx.showActionSheet({  itemList: ['A', 'B', 'C'],  itemColor:"red",  success: function(res) {    if (!res.cancel) {      console.log(res.tapIndex)    }  }})},bindLineChange:function (e){console.log(e.detail);},bindSwitchChange:function (e){console.log(e.detail.value);},bindSliderChange:function (e){console.log(e.detail.value);},bindRadioChange:function (e){console.log(e.detail.value);},bindDateChange:function (e){// console.log(e.detail.value);this.setData({date:e.detail.value});},bindTimeChange:function (e){// console.log(e.detail.value);this.setData({time:e.detail.value});},bindPickerChange:function (e){// console.log(e.detail.value);this.setData({index: e.detail.value});},blurFn:function (){console.log("光标失焦了");},focusFn:function (e){console.log("聚焦了");},inputFn:function (e){var val = "数:"+e.detail.value;// console.log(e.detail.value);return val;},checkChange:function (e){console.log(e.detail.value);},resetFn:function (){console.log("点击重置了");},subFn:function (e){console.log("提交表单:",e.detail.value);},changeDisabled:function (){this.setData({disabledBol:false});},scrolltoupper:function (e){console.log(e);},scrolltolower:function (e){console.log(e);},scroll:function (e){console.log(e);},tapChange:function (){index++;if (index > order.length-1){index = 0;}this.setData({toView:order[index]});},swiperChange:function (e){// console.log(e);},intervalChange:function (e){// console.log(e);var sliderValue = e.detail.value;this.setData({inter:sliderValue});},changeAntoplay:function (){this.setData({autopaly:!this.data.autopaly});},onLoad :function (){var that = this;var timer = setInterval(function (){progressNum++;if (progressNum >= 100){clearInterval(timer);}that.setData({progress:progressNum});},30);}});

<!-- <view class="flex-wrap"><view class="a">a</view><view class="b">b</view><view class="c">c</view></view> --><!-- <view class="wrap"><view class="a">a</view><view class="b">b</view><view class="c">c</view></view> --><!-- scroll-view --><!-- <scroll-view class="wrap" bindscrolltoupper="scrolltoupper" bindscrolltolower="scrolltolower" upper-threshold="100" lower-threshold="100" scroll-x="true" scroll-into-view="{{toView}}" bindscroll="scroll" scroll-y="true"><view id="a" class="a">a</view><view id="b" class="b">b</view><view id="c" class="c">c</view></scroll-view><button bindtap="tapChange">切换</button> --><!-- swipter --><!-- <swiper indicator-dots="true" autoplay="{{autopaly}}" interval="{{inter}}" duration="500" current="2" bindchange="swiperChange"><block wx:for="{{imgUrls}}"><swiper-item><image src="{{item}}" width="355" height="150" />我是文字</swiper-item></block></swiper><slider bindchange="intervalChange" show-value min="2000" max="5000" /><button bindtap="changeAntoplay">切换autoplay</button> --><!-- icon --><!-- <icon type="success" size="100" color="red" /> --><!-- <view><block wx:for="{{iconType}}"><icon type="{{item}}" size="40" /></block></view> --><!-- text --><!-- <view>我是一段文字啊哈哈哈哈哈</view><text>我是text里的一段文字哈哈哈哈哈</text> --><!-- progress --><!-- <progress percent="{{progress}}" show-info stroke-width="20" color="red" /> --><!-- 表单 --><!-- <button bindtap="changeDisabled">启用按钮</button> --><!-- <form bindsubmit="subFn" bindreset="resetFn"><input type="text" name="txtName" placeholder="请输入您的用户名" placeholder-class="outher-placeholder" auto-focus="true" bindinput="inputFn" bindfocus="focusFn" bindblur="blurFn" /><checkbox-group bindchange="checkChange"><label wx:for="{{country}}"><checkbox value="{{item.name}}" checked="{{item.checked}}" />{{item.value}}</label></checkbox-group><input type="number" password="true" /><view class="section_title">选择城市：</view><picker bindchange="bindPickerChange" value="{{index}}" range="{{citys}}"><view>当前选择：{{citys[index]}}</view></picker><view class="section_title">选择时间：</view><picker value="{{time}}" start="09:01" end="21:01" mode="time" bindchange="bindTimeChange"><view>当前选择：{{time}}</view></picker><view class="section_title">选择日期：</view><picker mode="date" value="{{date}}" start="2015" end="2017" fields="month" bindchange="bindDateChange"><view>当前选择：{{date}}</view></picker><radio-group bindchange="bindRadioChange"><label wx:for="{{country}}"><checkbox value="{{item.name}}" checked="{{item.checked}}" />{{item.value}}</label></radio-group><slider show-value min="0" max="50" step="5" value="10" bindchange="bindSliderChange" /><switch checked="true" type="checkbox" bindchange="bindSwitchChange" /><textarea class="text" placeholder="请输入留言" auto-height placeholder-class="textarea_placeholder" bindlinechange="bindLineChange" /><button size="mini" type="warn" plain="true" disabled="{{disabledBol}}" loading="true" hover-class="other-button-hover" formType="submit">按钮</button><button size="mini" formType="reset">重置</button></form>  --> <!-- <button bindtap="showAction">显示操作菜单</button><button bindtap="showModal">显示模态弹窗</button><button bindtap="showToast">显示消息提示框</button>  --><!-- <navigator url="http://www.baidu.com">跳转到百度首页</navigator> --><!--<navigator url="../logs/logs?id=12345&user=tangcaiye" hover-class="nav_hover">跳转到logs页面</navigator><button bindtap="navigateTo">跳转到logs页面</button>--><!-- <audio src="{{src}}" poster="{{poster}}" name="{{name}}" author="{{author}}" id="myAudio" controls></audio><button bindtap="audioPlay">播放</button><button bindtap="audioPause">暂停</button><button bindtap="audio50">设置当前的播放时间为50秒</button> --><!-- <view class="section_title">原图</view><image src="{{imageSrc}}"></image><view wx:for="{{imageArray}}"><view>{{item.text}}</view><image style="width:400rpx; height:400rpx; background-color:green" mode="{{item.mode}}" src="{{imageSrc}}"></image></view> --><!-- <view class="section_title">scaleToFill：不保持纵横比缩放图片，使图片完全适应</view><image style="width:400rpx; height:400rpx; background-color:#333" mode="aspectFit" src="{{imageSrc}}"></image> --><!-- <video src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" danmu-list="{{danmuList}}" danmu-btn enable-danmu controls></video> --><!-- 地图 --><!-- <map longitude="113.346410" latitude="23.175200" markers="{{markers}}" style="width: 375px; height: 200px;"></map><button bindtap="getPos">获取我的位置</button> --><!-- canvas --><canvas style="width:100%;height:100%; background-color:#ccc;" canvas-id="firstCanvas" bindtouchstart="touchstartFn" bindtouchmove="touchmoveFn" bindtouchend="touchendFn"></canvas>

module.wxss

page{width: 100%;height: 100%;}.wrap{width: 400rpx;height: 400rpx;border: 1px solid red;}.wrap view{width: 600rpx;height: 250rpx;}.a{background-color: red;}.b{background-color: green;}.c{background-color: blue;}.other-button-hover{opacity:0.2;}.outher-placeholder{color: green;font-size: 24rpx;}.section_title{background-color: #ccc;}.text{border:2rpx solid red;color: green;height: 100rpx;}.textarea_placeholder{color: skyblue;}.nav_hover{color: red;}