一、起步
-
创建微信小程序项目 首先,我们需要在微信开发者工具中创建一个新的小程序项目。点击“新建小程序”,填写项目名称、项目目录、AppID等基本信息。
-
配置项目 进入创建的小程序项目,我们需要对项目进行一些配置。首先,在“app.json”文件中配置小程序的全局配置信息,如窗口标题、默认页面等。
-
创建页面 在项目目录下,创建一个新的页面。在“pages”目录下新建一个文件夹,例如“music”,然后在该文件夹下新建一个“music.js”文件、一个“music.wxml”文件和一个“music.wxss”文件。
-
注册页面 在“app.json”文件中的“pages”数组中,将刚刚创建的页面路径添加进去。例如,“pages/music/music”。
二、设计页面结构
- 设计页面布局 在“music.wxml”文件中,我们可以编写页面的结构和布局。这里我们使用一个简单的布局,包括一个音乐封面图和一个播放按钮。
<view class="music-container">
<image src="{
{ coverUrl }}"></image>
<button bindtap="playMusic">播放</button>
</view>
- 设计页面样式 在“music.wxss”文件中,我们可以编写页面的样式。这里我们简单设置一下音乐封面图和播放按钮的样式。
.music-container