微信小程序全方位深度解析课程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.latitudevar longitude = res.longitudewx.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;
}

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

视频教程-uniapp开发仿阿里飞猪旅游微信小程序，vue中高级课程-Vue
uniapp开发仿阿里飞猪旅游微信小程序,vue中高级课程五年互联网实战开发经验,全栈工程师,熟悉主流前端开发技术,js,vue等,后端技术方向在python,node,曾先后就职于阿里云,阿里影业 ...
视频教程-微信小程序快速入门视频课程-微信开发
微信小程序快速入门视频课程北京八维研修学院技术工程师,5年大型项目实战开发经验,3年授课经验. 孟宪杰 ¥168.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 AP ...
4.1【微信小程序全栈开发课程】个人中心（一）--页面样式、用户信息展示
第四章,我们来完善个人中心,主要操作是src/pages/me文件夹中的me.vue文件,先看看个人中心页面的效果: 1.将个人中心页面放在首页在讲解app.json文件时,提到过在pages数组中 ...
微信小程序富文本解析点击图片放大_微信小程序解析富文本过程详解
前言最近公司在开发OTA微信小程序,一些页面的详情内容是HTML富文本格式的的,但是微信小程序不能直接解析HTML,需要将内容中的HTML标签转换成微信小程序所支持的标签. 开始的时候想过自己写方法 ...
angularjs全栈开发知乎_1-4【微信小程序全栈开发课程】原生小程序框架介绍
1.打开小程序目录打开微信开发者工具,我们上一节新建的项目,我圈出来的这个地方就是小程序的目录结构(如果你那里没有显示,可以点击左上方的编辑器来显示) 2.原生小程序框架介绍给大家画了一张图,重要 ...
为啥我的页面模板的from提交不了数据_4-9【微信小程序全栈开发课程】意见反馈（四）--提交反馈信息
1.创建后端操作文件先在后端server/controllers文件夹中创建操作文件createopinion.js,用来将从前端页面提交的数据,插入到opinions表中,创建完之后,页面目录如下 ...
上拉加载更多后台数据_6-7【微信小程序全栈开发课程】记录页面（七）--分页加载记录数据...
现在是一次性加载所有的记录数据,数据多的时候,会加载比较慢,所以我们改成分页加载,一次最多加载15条数据每次拉倒底部都会自动加载下一页的数据,知道所有的数据加载完成 1.添加data变量编辑rec ...
eslint不报错 vue_2-2【微信小程序全栈开发课程】index页面搭建--ESlint格式错误
1.修改入口文件也就是src/pages/index/main.js文件 main.js是入口文件,通过main.js来加载index.vue文件.每个页面文件夹中都要有main.js文件 //加载 ...
3.2【微信小程序全栈开发课程】登录功能（一）--实现登录功能
在本地搭建好后端环境之后,我们来实现登录功能 1.安装SDK插件 SDK插件用来获取用户的openId SDK是server端(也就是后端)的插件,帮助我们很容易的获取openId.openId是微信 ...
通过调试微信小程序示例代码解析flex布局参数功能(一)
通过调试微信小程序示例代码解析flex布局参数功能官方示例小程序源代码下载地址:https://github.com/wechat-miniprogram/miniprogram-demo 通过调试 ...

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

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

最新文章

热门文章