微信小程序口红项目新手练习Day1

项目day1 主页的授权与音乐播放功能

如图：

1.我们需要完成的功能有:
①首先是页面的背景图片
②在左上角设置一个带有音频的播放图片当点击它时，有旋转的效果。
③主要核心功能在右下角的授权功能，只有点击并授权了之后才可以进入页面使用功能。反之重新授权！

项目的实现思路

①主页背景
首先在pages下创建如下图的目录。
放好我们需要设置的背景图片
如需要图标可以去→阿里巴巴矢量图网站←去找（免费）
1.index.wxml

<view ><image src="../img/01_base.png"></image>
</view>
<image  bindtap="stopMusic"  class="{{img}}" src="../img/music.png"></image>
<button style="width: 200rpx;" class="box" bindtap="emPower">授权</button>

在index.json中设置disableScroll使页面不可以滚动
（可以根据自己的需求进行设置）

2.index.js

// pages/index/index.js
const music = wx.getBackgroundAudioManager()
Page({/*** 页面的初始数据*/data: {isopen : false,img : 'img1'},emPower: function () {wx.getSetting({success(res) {console.log('++++++++++++')var writePhotosAlbum = res.authSetting["scope.writePhotosAlbum"]if (writePhotosAlbum==undefined) {console.log('//')wx.authorize({scope: 'scope.writePhotosAlbum',success() {wx.navigateTo({url: '../../packageA/index1/index1',})}})}else if(writePhotosAlbum==false) {console.log('-----------')wx.showModal({title: '提示',content: '您未开启保存图片到相册的权限，请点击确定去开启权限！',success(res) {if (res.confirm) {wx.openSetting()}}})}else{wx.navigateTo({url: '../../packageA/index1/index1',})}// if (!res.authSetting['scope.camera']) {//   wx.authorize({//     scope: 'scope.camera',//     success() {//       // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问//     },//     fail: function () {//       console.log('获取相机权限失败')//     }//   })// }// var camera = res.authSetting["scope.camera"]}})},stopMusic:function(){var isopen = this.data.isopenvar img = this.data.imgif(isopen){music.play()this.setData({isopen : false,img : 'img1'})}else{music.pause()this.setData({isopen : true,img : 'img2'})}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {if(!this.data.isPlay){music.title = '途中'music.src = 'http://antiserver.kuwo.cn/anti.s?useless=/resource/&format=mp3&rid=MUSIC_144541061&response=res&type=convert_url&'music.play()}wx.setStorage({data: '545454',key: 'key2',})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

3.index.wxss
页面的css修饰，可以根据自己的喜好进行设置。
左上角的图标旋转加入了动画的效果，@keyframes进行设置。
@keyframes turn{
0%{-webkit-transform:rotate(0deg);}
25%{-webkit-transform:rotate(90deg);}
50%{-webkit-transform:rotate(180deg);}
75%{-webkit-transform:rotate(270deg);}
100%{-webkit-transform:rotate(360deg);}
}
代码如下：

/* pages/index/index.wxss */
page{margin: 0;padding: 0;
}.box{position: absolute;bottom: 20rpx;right: 20rpx;border-radius: 35rpx;border: 1rpx solid #000;display: flex;width: 100rpx;height: 100rpx;justify-content: center;align-items: center;
}
.img1{width: 80rpx;height: 80rpx;z-index: 999;position: absolute;top: 20rpx;left: 20rpx;animation: turn 2s linear infinite;
}
.img2{width: 80rpx;height: 80rpx;z-index: 999;position: absolute;top: 20rpx;left: 20rpx;
}
@keyframes turn{0%{-webkit-transform:rotate(0deg);}25%{-webkit-transform:rotate(90deg);}50%{-webkit-transform:rotate(180deg);}75%{-webkit-transform:rotate(270deg);}100%{-webkit-transform:rotate(360deg);}
}

微信小程序口红项目新手练习Day1相关推荐

微信小程序口红项目新手练习Day2
1.功能页面进行上传自拍和分析的实现我们这次的主要需求是: ①当进入了页面的时候要求获得相机的权限. ②页面中间有个照片的相框,当添加照片或照相时显示照片. ③点击分析时候携带文本进行跳转,并且根据 ...
微信小程序口红项目新手练习Day3
跳转页面的动画实现 1.小白云设置了时间显示和隐藏效果,当动画进行了2周完毕进入到分析页面. pages外再新建一个文件夹 index1为跳转时等待页面(今天要实现的页面(等待动画-)) index2 ...
微信小程序口红项目制作
首先首页我们要完成的功能有: 左上角图片,点击图片播放指定音乐,图片并跟着一起360旋转右下角,授权登陆,授权登陆成功后才会挑选下一页面,否则重新授权登陆 //index.js const app ...
html倒计时代码+微信可用,微信小程序动态显示项目倒计时效果
本文实例为大家分享了微信小程序动态显示项目倒计时的具体代码,供大家参考,具体内容如下 1.一般我们说的显示秒杀都是指的单条数据,循环我没做. 效果: 2.wxml代码: 剩余时间:已经截止剩余时间: ...
微信小程序商城项目实战(完结篇:意见反馈)
微信小程序商城项目完结意见反馈代码实现首先修改标题并且使用之前写好的tab组件编写界面编写样式逻辑处理js 效果图意见反馈做假的意见反馈,主要练习一下微信小程序文件上传api以及样式界 ...
微信小程序开源项目、UI框架、Demo整合
微信小程序开源项目清单有位大哥在github上放了个整合了很多优质的微信小程序开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给他个star. 另外,我参照祈 ...
我的微信小程序完整项目
我的微信小程序完整项目注册企业账号开始的第一步失败啦,明天继续. 搭建测试项目开始!!!! pages:存放页面目录 (注意在pages里的文件结构必须要在app.json里的pages中配置相对应 ...
12 个 yyds 的微信小程序开源项目，速速收藏！
全文概览: wechat-app-mall:微信小程序商城: Vant Weapp:小程序 UI 组件库: iView Weapp:小程序 UI 组件库: echarts-for-weixin:Apa ...
推荐一个微信小程序商城项目
推荐一款实用的微信小程序商城项目,这个项目不仅有商城基本的功能,比如:商品管理.订单管理.用户管理,还有分销功能,具备广告.优惠券等功能. 技术选型后端采用 Spring 技术栈,使用到的框架主要包 ...

微信小程序口红项目新手练习Day1

项目day1 主页的授权与音乐播放功能

微信小程序口红项目新手练习Day1相关推荐

最新文章

热门文章