微信小程序开发之—

写过公司的微信小程序后，还是很有感觉的。有了第一次学习开发的经历，逐渐接受并喜欢那种快速的开发feel。

写了一个摇一摇demo，看看有多简单吧

开发的快自然就有成就感哈哈，看下代码吧

1.js部分

// pages/testting/shaky/shaky.js
Page({/*** 页面的初始数据*/data: {hasResutl:-1,bar_state:0,winWidth:0,winHeight:0,img_url:"https://www.demomaster.cn/eatbar/public/static/img/yaoyiyao/img_yaoyiyao.png",loading:"https://www.demomaster.cn/eatbar/public/static/img/yaoyiyao/small_loading.gif"},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {var context = wx.createContext()context.rect(5, 5, 25, 15)context.stroke()context.drawImage()wx.drawCanvas({canvasId: 'myCanvas',actions: context.getActions()})},/*** 生命周期函数--监听页面显示*/onShow: function () {var that = this;that.initAnimation();//重力加速度wx.onAccelerometerChange(function (res) {//console.log(res.x)//console.log(res.y)// console.log(res.z)if (res.x > .7 && res.y > .7) {// wx.showToast({//   title: '摇一摇成功',//   icon: 'success',//   duration: 2000// })that.startAnimation();that.vibrateShort();}})var that = this;//获取系统信息 wx.getSystemInfo({success: function (res) {that.setData({winWidth: res.windowWidth,winHeight: res.windowHeight});}});wx.downloadFile({url: that.data.img_url,success: function (sres) {console.log(sres);}, fail: function (fres) {}})},initAnimation: function () {var that = this;//实例化一个动画this.animation1 = wx.createAnimation({// 动画持续时间，单位ms，默认值 400duration: 400,/*** http://cubic-bezier.com/#0,0,.58,1 * linear 动画一直较为均匀* ease 从匀速到加速在到匀速* ease-in 缓慢到匀速* ease-in-out 从缓慢到匀速再到缓慢* * http://www.tuicool.com/articles/neqMVr* step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过* step-end 保持 0% 的样式直到动画持续时间结束 一闪而过*/timingFunction: 'ease',// 延迟多长时间开始// delay: 100,/*** 以什么为基点做动画 效果自己演示* left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%* top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%*/transformOrigin: 'left top 0',success: function (res) {console.log(res)}})//实例化一个动画this.animation2 = wx.createAnimation({// 动画持续时间，单位ms，默认值 400duration: 400,/*** http://cubic-bezier.com/#0,0,.58,1 * linear 动画一直较为均匀* ease 从匀速到加速在到匀速* ease-in 缓慢到匀速* ease-in-out 从缓慢到匀速再到缓慢* * http://www.tuicool.com/articles/neqMVr* step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过* step-end 保持 0% 的样式直到动画持续时间结束 一闪而过*/timingFunction: 'ease',// 延迟多长时间开始// delay: 100,/*** 以什么为基点做动画 效果自己演示* left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%* top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%*/transformOrigin: 'left top 0',success: function (res) {console.log(res)}})},/***位移*/startAnimation: function () {var that = this//x轴位移100pxvar h1 = "35%";var h2 = "65%";if (this.data.bar_state == 1) {h1 = "40%";h2 = "40%";setTimeout(function () {that.setData({//输出动画bar_state: 0,hasResutl:0})setTimeout(function () {that.setData({hasResutl: 1})}, 4000)}, 400)} else {h1 = "25%";h2 = "55%";this.setData({bar_state: 1})setTimeout(function () {that.startAnimation();}, 600)}this.animation1.height(h1).step()this.animation2.top(h2).step()this.setData({//输出动画animation1: that.animation1.export(),animation2: that.animation2.export()})},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

（有些冗余的测试代码，请忽略）

2.wxml部分

<!--pages/testting/shaky/shaky.wxml--><view class='panel_root'><view class='view_top' animation="{{animation1}}"><image class='img_top'  src='{{img_url}}'></image><view class='win_line_top' style="display:{{bar_state==1?'block':'none'}}"></view></view><view class='view_bottom' animation="{{animation2}}"><view class='win_line_bottom' style="display:{{bar_state==1?'block':'none'}}"></view><image class='img_bottom' src='{{img_url}}'></image><view class='panel_bottom'><view class='panel_content' style="display:{{bar_state==0?'block':'none'}}"><view class='panel_loading' style="display:{{hasResutl==0?'block':'none'}}"><image class='img_loading' src='{{loading}}'></image><text class='text_lable'>正在搜索同意时刻摇晃手机的人</text></view><view class='panel_result'  style="display:{{hasResutl==1?'block':'none'}}">哈哈</view></view></view></view><button class='btn_test' bindtap='startAnimation' >测试</button></view>

3.wxss部分

/* pages/testting/shaky/shaky.wxss */
page{background-color: greenyellow;height: 100%;
}
.panel_root{background-color: red;height: 100%;
}
.view_top{position: absolute;display: block;height: 40%;width: 100%;background-color: #2d3132;text-align: center;
}
.view_bottom{position: absolute;top:40%;display: block;height: 60%;width: 100%;background-color: #2d3132;text-align: center;
}
.img_top{position: absolute;bottom: 0;width: 8rem;height: 7rem;margin-bottom: -3.5rem;margin-left: -4rem;clip:rect(0px,8rem,3.5rem,0px);
}
.img_bottom{position: absolute;top:0;width: 8rem;height: 7rem;margin-top: -3.5rem;margin-left: -4rem;clip:rect(3.5rem,8rem,200px,0px);
}
.panel_result{margin: 2rem;padding: 1rem;background-color: white;
}
.btn_test{position: absolute;bottom: 0;margin: 2rem;}
.win_line_top{position: absolute;bottom: 0;height: .3rem;width: 100%;display: block;background-color: gray;border-bottom: 1px solid black;
}
.win_line_bottom{position: absolute;top:0;height: .3rem;width: 100%;display: block;background-color: gray;border-bottom: 1px top black;
}
.panel_bottom{width: 100%;position: absolute;top: 5rem;color: white;
}
.panel_content{width: 100%;position: relative;font-size: .8rem;text-align: center;
}
.img_loading{width: 1rem;height: 1rem;
}
.text_lable{font-size: .8rem;line-height: 2rem;height: 2rem;
}
.panel_result{margin: 1rem 2rem;background: white;border-radius: .3rem;padding: 1rem;color: black;
}

json部分没什么可说的（html和css水平太差，怎个乱子了得）

得了，简单的效果实现了。

微信小程序开发之——摇一摇Demo相关推荐

微信小程序开发一个简单的摇骰子游戏
页面代码 <view class='top'>{{txt}}</view> <view class='point1'><image src='{{one_im ...
【微信小程序宝典】从零开始做微信小程序开发
开发前必读简要基于大量无效开发,无法上线的案例,所以开发前部分知识十分重要:| 链接微信小程序个人注册简单步骤打开mp.weixin.qq.com,点击右上角立即注册,进入小程序注册| 链接微 ...
微信小程序开发的完整流程介绍，新手必读
自从跳一跳小程序游戏出现后,一夜之间,小程序就变得家喻户晓了,功能开发也越来越丰富,在微信搜一搜就会发现许多大品牌早已有自己的小程序了,越来越多的企业和商家都看中了这个风口,想快速开发出一款属于自己的 ...
微信小程序开发（2）_data属性
假设我们的环境都做好了,现在我们开始开发自己的小程序首先我们开发出自己的 Hello World 我们要做的事情是当前点击hello World的时候HelloWorld的颜色发生变化: 这个是我们 ...
微信小程序开发之选项卡
选项卡是web开发中经常使用到的一个模块,在小程序中竟然没有,这里参考别人的文章自己做了一个双选项卡实现思路: 通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是 ...
微信小程序开发优秀教程及文章合集第一期
2019独角兽企业重金招聘Python工程师标准>>> 我会不定期的选取一些优质教程,整理成辑,以便大家集中阅读: 新手向!微信小程序开发手记系列: 微信小程序开发手记<一&g ...
微信小程序开发分销制度济南_花店微信小程序开发教程
如何将自己的鲜花商品快速配送出去,避免鲜花过期浪费,是很多传统花店商家的难题.不过随着微信小程序的出现,这一难题也渐渐得到了解决.花店商家可以通过自己的小程序商城,打通线上渠道,可以加大推广.扩大销量 ...
微信小程序开发简易计算器改进版
微信小程序开发计算器有多种方法,但是大部分代码比较复杂.不容易理解.本案例进行了改进,主要是组件bindtap属性绑定的自定义函数clickBtn(),采用了switch语句,使得代码结构更加清晰,学 ...
微信小程序开发视频教程新鲜出炉
微信小程序开发公测了,可是对于新手来说,不同的框架不同的开发机制,如何快速适应呢?微信小程序开发视频教程新鲜出炉了,从零开始一步一步搭建微信小程序,每个章节都会涉及到不同的知识点,等教程学习完你不但掌 ...
关于微信小程序开发中遇到的缺少game.json问题的解决
关于微信小程序开发中遇到的缺少game.json问题的解决参考文章: (1)关于微信小程序开发中遇到的缺少game.json问题的解决 (2)https://www.cnblogs.com/ygxd ...

微信小程序开发之——摇一摇Demo

1.js部分

2.wxml部分

3.wxss部分

微信小程序开发之——摇一摇Demo相关推荐

最新文章

热门文章