微信小程序笔记整理
前段时间刚接触小程序，写了一个小程序项目，总结一些写项目用到的一些基础知识点吧。
一，在app.json里面写入新建页面的名称，直接可以新建一个页面。
二，应用常用的生命周期。
1，Page({ }) // 创建一个页面实例对象。
2，onLoad //监听页面加载，
3，onReady //监听页面初次渲染，
4，onShow //监听页面显示，
5，onHide //监听页面隐藏
三，条件渲染
1，for循环。
<view wx:for="{{list}}" wx:for-item="list"> <tetx>{{list.Text}}</tetx> </view> list:[ { Text:"我是第一个", }, { Text:"我是第二个", }, { Text:"我是第三个", }, ]
2，条件渲染。
<view wx:if="{{false}}">我是第一个</view> <view wx:elif="{{true}}">我是第二个</view> <view wx:else>我是第三个</view>
3，隐藏：
//类似于wx:if <view hidden="{{true}}">True</view>
四：常用的事件绑定方法
1，bindtap：点击事件；
2，longtap：长按事件； 3，touchstart：触摸开始； 4，touchend：触摸结束； 5，touchcansce：取消触摸；
五：推拽事件，
小程序有写好的组件，关键字是movable-view，movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。
<movable-area class="move-content" style="pointer-events: none;height: 100%;width: 100%;left:0px;top:0px;position:fixed;"> <movable-view direction="all" x="30" y="30" animation="{{false}}" style="pointer-events: auto; width: 40px;height:56px;z-index: 999;"> <image style="width: 30px;height: 30px;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600161316594&di=8152bc5995173630efc94f12a8371b63&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20180801%2F23%2F1533138097-nkmjLKYXra.jpg"></image> </movable-view> </movable-area>
direction：是可移动的方向。属性值有all、vertical、horizontal、none。
六，微信小程序倒计时dome。
<view class="container"> <view class='progress_box'> <canvas class="progress_bg" canvas-id="canvasProgressbg"> </canvas> <canvas class="progress_canvas" canvas-id="secondCanvas"></canvas> </view> </view>
//css样式
.progress_box{ position: relative; width:84px; height: 84px; display: flex; align-items: center; justify-content: center; background-color: #03abfd; border-radius: 84px; } .progress_bg{ position: absolute; width:84px; height: 84px; } .progress_canvas{ width:84px; height: 84px; }
/js页面 Page({ /** * 页面的初始数据 */ data: { }, drawProgressbg: function () { // 使用 wx.createContext 获取绘图上下文 context var ctx = wx.createCanvasContext('canvasProgressbg') ctx.setLineWidth(15);// 设置圆环的宽度 ctx.setStrokeStyle('#F18136'); // 设置圆环的颜色 ctx.setLineCap('round') // 设置圆环端点的形状 ctx.beginPath();//开始一个新的路径 ctx.arc(42, 42, 30, 0, 2 * Math.PI, false); //设置一个原点(100,100)，半径为90的圆的路径到当前路径 ctx.stroke();//对当前路径进行描边 ctx.draw(); }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var step = 1,//计数动画次数 num = 0,//计数倒计时秒数（n - num） start = 1.5 * Math.PI,// 开始的弧度 end = -0.5 * Math.PI,// 结束的弧度 time = null;// 计时器容器 var animation_interval = 1000,// 每1秒运行一次计时器 n = 10; // 当前倒计时为10秒 // 动画函数 function animation() { if (step <= n) { end = end + 2 * Math.PI / n; ringMove(start, end); step++; } else { clearInterval(time); } }; // 画布绘画函数 function ringMove(s, e) { var context = wx.createCanvasContext('secondCanvas') var gradient = context.createLinearGradient(200, 100, 100, 200); gradient.addColorStop("0", "#2661DD"); gradient.addColorStop("0.5", "#40ED94"); gradient.addColorStop("1.0", "#5956CC"); // 绘制圆环 context.setStrokeStyle('#f6cbf4') context.beginPath() context.setLineWidth(10) context.arc(42, 42, 30, s, e, true) context.stroke() context.closePath() // 绘制倒计时文本 context.beginPath() context.setLineWidth(1) context.setFontSize(30) context.setFillStyle('#ffffff') context.setTextAlign('center') context.setTextBaseline('middle') context.fillText(n - num + '', 42, 42, 30) context.fill() context.closePath() context.draw() // 每完成一次全程绘制就+1 num++; } // 倒计时前先绘制整圆的圆环 ringMove(start, end); // 创建倒计时 time = setInterval(animation, animation_interval); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { this.drawProgressbg(); }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
效果图：
七：视频播放组件video：
1，获取视频播放时间方法：bindtimeupdate
bindtimeupdate(res) { //console.log('bindtimeupdate', parseInt(res.detail.currentTime), '时间总时长-->', parseInt(res.detail.duration)); let nowTime = parseInt(res.detail.currentTime); let endTime = parseInt(res.detail.duration); },
2，bindplay：当开始/继续播放时触发play事件
3，bindpause：当暂停播放时触发 pause 事件
4，bindended：当播放到末尾时触发 ended 事件
5，bindtimeupdate：播放进度变化时触发
八：提示框：
1，加载框
wx.showLoading({ title: '加载中', }) setTimeout(function () { wx.hideLoading() }, 2000)
2，弹出提示框：
wx.showToast({ title: '我是提示框!', icon: 'none', duration: 2000 });
3，页面跳转
//本页面跳转 wx.redirectTo({ url: "../Introduction/Introduction", }) //不同页面跳转 wx.navigateTo({ url: "../Introduction/Introduction", })
