萌新，随便做做，只是了解一下微信小程序，希望可以给看到的胖友一点参考。
之前在网上看到这个人入门四天做完一个，我五天做完了，比他好看，突然有一点自信
然后发现自己特别不乐意重新看自己的代码，总觉得写的很乱。
应该更认真的推敲思路和注意规范，嗯，加油。
运行截图
先放个图看看吧=。=分别是index页、list页和play页。虽然不是特别的好看，但是也OK。
不要问我MUMU是啥，就是music取俩字母随便起个名字。
然后歌词滚动特别差，从别人那里直接copy又改了的，还是不满意，但是也没什么头绪了。
素材全部源自网络，也没有商用，仅自己学习用，如果还是需要删除请联系我。
一、微信小程序入门
1.起步
从零开始，直接按官方文档里走就没问题了，非常简单，包括申请账号/安装/编译/代码构成/宿主环境/协同工作和发布/开发指南等等。
微信开发者工具下载地址：点击跳转
2.微信开发者工具简介
萌新看了直接就上手的简介。（我也只用到这些……）
（1）开发工具界面
①项目目录
②编码区
③控制台
Console查看报错和打印等信息
AppData查看app内各个变量的值
④模拟器
保存项目/编译项目都可刷新模拟器，不卡，与真机略有区别（所以一定要真机试，很方便，不能全信模拟器，说不定就遇到什么模拟器正常但是真机却不行的坑）
（2）主要目录文件
看看一打开就自带的目录：
- app.js 可以存放全局变量、方法
- app.json app的配置文件 页面路径一定要写进去
- page 页面文件夹
- index 启动页文件夹
- index.wxml 启动页的页面 类似html div->view
- index.js 启动页的js 类似JavaScript 实现对页面的控制 变量可以被页面引用 没有dom操作
- Index.wxss 类似css
以下为萌新理解，很浅，也不一定对，若有其他理解，请大佬赐教：
微信前端开发的特点就是，开发一个页面需要四个文件，包括js、json、wxml、wxss，大家都在一个文件夹里，还和文件夹同名。json没太用，感觉是跟微信本身的界面相关的配置文件（写个"navigationBarTitleText": "List"，小程序上面标题栏就叫这个了），wxml跟html类似，wxss相当于css，js里面可以写方法（还是应该叫函数）什么的，和普通JavaScript一样，但是里面的数据可以被wxml直接拿来用（就是js里有个数据叫name，它的值是1，那么你在wxml里写一个{{name}}，这个地方就显示1，相似的用法我用过的有在jsp的页面里面获取session中的内容，还有Vue.js也是双花括号里面放名字）。
3.引入weUI
weUI就是微信自己的一套按钮什么的，萌新必备，方便还比较美观。
下载：https://github.com/Tencent/weui-wxss
引用：
①将weui-wxss-master\dist\style\weui.wxss文件导入到小程序项目的某个目录下
②在app.wxss中加入weui.wxss的引用 @import \'style/weui.wxss\';（这里导入到了style目录）
注：weui-wxss-master中src里面是一个example项目，可以打开该项目预览各个控件的效果
二、开发音乐播放器
1.构思
数据：只做前端，不搞数据库，那么就在js里用ajax那种请求从网上获取数据。（或者用微信小程序的云开发，我还没了具体了解）
页面：做一个简单的播放器，需要至少两个页，音乐列表页和正在播放页。
2.准备数据
这里用腾讯云的对象存储来存储数据。存里的每个文件都生成一个地址，访问这个地址就直接获取文件。
（这腾讯云，你可以免费存一阵数据，但是获取数据是要花钱的，咱自己玩，访问次数不多，花了一块多……）
按自己喜好存里点mp3和图片和lrc什么的。
然后存一个json作为音乐库，里面包括之前存的mp3、图片的地址。
这样我们做的播放器就先获取这个json文件，然后从里面读放哪首歌，然后拿着那个歌的mp3地址再获取一下真正的mp3文件，就能用了。
【本来是想公有云大家都可以打开链接感受一下，但发现有的人每次感受的太多了，于是我直接删库跑路关掉不用了。然后再免费给腾讯打个广告，这个活动还是非常划算的，就花一块钱用着玩呗->点我<-】
{ "appname": "MUMU Music", "version": "1.0", "music": [ { "name": "光年之外", "singer": "G.E.M", "time": 235, "downloadURL": "https://不告诉你省得你访问花我钱.cos.ap-beijing.myqcloud.com/musics/不告诉你省得你访问花我钱", "lrc": "https://不告诉你省得你访问花我钱.cos.ap-beijing.myqcloud.com/不告诉你省得你访问花我钱", "pic": "https://不告诉你省得你访问花我钱.cos.ap-beijing.myqcloud.com/不告诉你省得你访问花我钱" }, { "name": "Life is like a Boat", "singer": "Rie fu", "time": 300, "downloadURL": "https://不告诉你省得你访问花我钱.cos.ap-beijing.myqcloud.com/不告诉你省得你访问花我钱", "lrc": "null", "pic": "https://不告诉你省得你访问花我钱.cos.ap-beijing.myqcloud.com/不告诉你省得你访问花我钱" }, { "name": "I Will Return", "singer": "Skylar Grey", "time": 236, "downloadURL": "https://不告诉你省得你访问花我钱.cos.ap-beijing.myqcloud.com/不告诉你省得你访问花我钱", "lrc": "null", "pic": "https://不告诉你省得你访问花我钱.cos.ap-beijing.myqcloud.com/不告诉你省得你访问花我钱" }, { "name": "青鸟", "singer": "生物股长", "time": 216, "downloadURL": "https://不告诉你省得你访问花我钱.cos.ap-beijing.myqcloud.com/不告诉你省得你访问花我钱", "lrc": "null", "pic": "https://不告诉你省得你访问花我钱.cos.ap-beijing.myqcloud.com/不告诉你省得你访问花我钱" }, { "name": "大鱼", "singer": "周深", "time": 313, "downloadURL": "https://不告诉你省得你访问花我钱.cos.ap-beijing.myqcloud.com/不告诉你省得你访问花我钱", "lrc": "null", "pic": "https://不告诉你省得你访问花我钱.cos.ap-beijing.myqcloud.com/不告诉你省得你访问花我钱" }, { "name": "小小恋歌", "singer": "新垣结衣", "downloadURL": "https://不告诉你省得你访问花我钱.cos.ap-beijing.myqcloud.com/不告诉你省得你访问花我钱", "lrc": "null", "pic": "https://不告诉你省得你访问花我钱.cos.ap-beijing.myqcloud.com/不告诉你省得你访问花我钱" } ] } musics.json
3.开发
（1）新建项目
在微信开发者工具里面点左上角“项目”-“新建项目”，弹窗里填写信息，AppID可以用测试号（这里仅仅自己开发着玩所以无所谓，想要让别人你的小程序也用就去注册一个），点击新建就好了。
（2）写代码
首先项目给了一个获取用户信息的页（index），咱也懒得改，直接留着作为启动页（？），下面加个按钮跳转到列表页。
先不着急写别的页面，我想app打开之后就先把我那大json获取到，反正之后会经常用，直接作为全局变量留着了。全局变量是app.js里的globalData，在里面声明一个名字叫musicLib，在下面写个微信小程序写法的请求数据的一段代码（wx.request，详情参考官方文档），然后把获取到的结果给musicLib存住（this.globalData.musicLib = res.data，萌新翻译：这页的globalData里的musicLib的值是请求结果中的数据）。
//app.js App({ globalData: { userInfo: null, //用户信息 musicLib: [], //音乐库 bgm: 0, //是否有背景音乐 playing: 0, //背景音乐是否正在播放 index: null, //当前背景音乐标号 height: 0 //屏幕高度 }, onLaunch: function() { // 展示本地存储能力 var logs = wx.getStorageSync(\'logs\') || [] logs.unshift(Date.now()) wx.setStorageSync(\'logs\', logs) // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId } }) // 获取用户信息 wx.getSetting({ success: res => { if (res.authSetting[\'scope.userInfo\']) { // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 wx.getUserInfo({ success: res => { // 可以将 res 发送给后台解码出 unionId this.globalData.userInfo = res.userInfo // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 if (this.userInfoReadyCallback) { this.userInfoReadyCallback(res) } } }) } } }) //获取音乐库 wx.request({ url: \'https://music-1300015560.cos.ap-beijing.myqcloud.com/musics.json\', success: res => { this.globalData.musicLib = res.data } }) let that = this; //获取屏高 wx.getSystemInfo({ success: function(res) { that.globalData.height = res.windowHeight; } }) } })
然后在目录里新建个list页的文件夹，建好4个同名文件（似乎文件自动就给建了，时间太久记得不太清）。一定要在app,json里加上新页面的路径。
接下来在index页写个跳转到list页，在index的wxml中写个钮，绑定点击事件，然后在js里写事件。事件各种各样可以参考文档，这里我绑了俩事件，一个是点击按钮时的事件，一个是结束点击后的事件（<image class="golistBtn" bindtouchstart="logo" bindtouchend="golist" src="{{logo}}">，按钮是个图片，logo方法是为了做个点击的效果换图片，golist方法是点完松手了把图片换回去，然后跳转到list页，{{logo}}是js里的一个值，我用logo方法改了地址，图片就变了），然鹅这个切换图片来的慢，长按能看见，点一下基本是看不清变化了orz后面的钮我都做了这种效果，都不明显，嘤嘤嘤。
普通->按住
<!--index.wxml--> <view class="container"> <view class="userinfo"> <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> <block wx:else> <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image> <text class="userinfo-nickname" style="color:green">Hello，{{userInfo.nickName}}</text> <text class="userinfo-nickname" style="color:green">欢迎来听MUMU的歌单</text> </block> </view> <view class="appmotto"> <image class="golistBtn" bindtouchstart="logo" bindtouchend="golist" src="{{logo}}"></image> </view> <view class="ft"> <view>歌单内容来自网络，侵权请联系删除</view> <view>Email：[email protected]</view> <view>APP from Hanana</view> </view> </view>
//index.js //获取应用实例 const app = getApp() Page({ data: { logo: "/images/play2.png", //... }, //... //点击跳转至list golist: function () { this.setData({ logo: "/images/play2.png" }) wx.navigateTo({ url: \'../list/list\' }) }, //logo logo: function (){ this.setData({ logo: "/images/play3.png" }) }, //... })
接下来写list页。页面wxml跟html基本一样，略有区别。其中把音乐列表展示出来的关键代码是wx:for，具体参考文档。
<!--list.wxml--> <view class="page list"> <!--歌曲列表--> <view class="page__bd"> <view class="weui-panel weui-panel__access"> <view class="weui-panel__bd"> <navigator wx:for="{{musics.music}}" wx:for-item="music" url="../play/play?index={{index}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active" style="background-image:url({{index%2==0?bkimg0:bkimg1}})"> <view class="weui-media-box__hd weui-media-box__hd_in-appmsg"> <image class="weui-media-box__thumb" src="{{music.pic}}" mode="aspectFill" /> </view> <view class="weui-media-box__bd weui-media-box__bd_in-appmsg"> <view class="weui-media-box__title" style="color:green">{{music.name}}</view> <view class="weui-media-box__desc">{{music.singer}}</view> </view> </navigator> </view> </view> </view> </view>
在js中首先获取到全局变量，然后把值给当musis，然后在页面使用{{musics.music}}，通过wx:for遍历出来。可以看到它自动生成的js中有很多空的方法，都可以写东西，只是这里没用到。
// pages/list/list.js var app = getApp() //获取全局 Page({ /** * 页面的初始数据 */ data: { musics: [], bkimg1:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565934170123&di=c7538649f607d13353451b3cec56a846&imgtype=0&src=http%3A%2F%2Fs6.sinaimg.cn%2Forignal%2F4122e7c9878630b2891e5", // bkimg0: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565935519496&di=43b37e1b73c573fd0d089fec582462d7&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201302%2F16%2F20130216161327_rZtkz.thumb.700_0.jpeg" bkimg0:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565935334857&di=386b8eb76388b0a6eef03003512e6f60&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F-Po3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F55e736d12f2eb938f0e05797d5628535e4dd6fc1.jpg" }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.setData({ musics: app.globalData.musicLib //全局变量给musics }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
接下来就是点击某一列，跳转到播放页。播放页需要知道该播放哪首歌，因此需要传一个歌曲的编号的参数。所以在list.wxml中，使用navigator作为列表的一行，直接设置url就可点击跳转，url是../play/play，后面加上?index={{index}}，就把编号传到play页啦。
接下来就是重要的play页，新建play文件夹、play的4个文件、在app.json里面加上路径，然后写页面。
<!--play.wxml--> <view class="page"> <view class="page__hd" > <text></text> <text style="color:#0e9630;font-size:20px">{{playdata.name}}</text> <text style="color:grey;font-size:12px">{{playdata.singer}}</text> </view> <view class="page__bd" animation="{{ani}}"> <view class="box" bindtap="down"> <view class="cd" style="transform: rotate({{angle}}deg);"> <image class="pic" src="{{playdata.pic}}" mode="aspectFill"></image> </view> </view> <view class="lrc" bindtap="up"> <view class="paper"> <scroll-view scroll-y="true" scroll-with-animation=\'true\' scroll-top=\'{{marginTop}}\' style="height:{{lrcH}}px"> <view class=\'contentText\'> <block wx:for=\'{{lrc}}\'> <text class="{{lrcRow == index ? \'currentTime\' : \'\'}}">{{item[1]}}</text> </block> </view> </scroll-view>> </view> </view> </view> <view class="page__ft"> <view class="playBtns"> <view class="slider"> <text class="time">{{timeNow/60 | Int}}:{{timeNow%60<10 ? "0" + (timeNow%60 | Int) : timeNow%60 | Int}}</text> <slider min="0" max="{{timeAll}}" value="{{timeNow | Int}}" class="sli" bindchanging="touchSli" bindchange="playHere" block-color="{{blockColor}}" activeColor="#f4ea2a" /> <text class="time">{{timeAll/60 | Int}}:{{timeAll%60<=9? "0"+timeAll%60 : timeAll%60}}</text> </view> <view class="btns"> <image class="preBtn" bindtouchstart="touchPreBtn" bindtouchend="pre" src="/images/pre{{btnE}}.png" mode="aspectFit">⋘</image> <image class="playBtn" bindtouchstart="touchPlayBtn" bindtouchend="playOrpause" src="/images/play{{btnP}}.png" mode="aspectFit"></image> <image class="nextBtn" bindtouchstart="touchNextBtn" bindtouchend="next" src="/images/next{{btnT}}.png" mode="aspectFit">⋙</image> </view> </view> <view class="ft"> <text>APP From Hanana</
全部评论
请发表评论