微信小程序全方位深度解析课程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;
}
1164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
