This article mainly implements the music playback function in the applet, using Java as the back-end language for support, with a friendly interface and easy development.
1. Small programs
1.1 Project creation
- Visit [WeChat Public Platform], click account registration.
- Select the applet, and fill in the required information in the form to register.
- Select Development Settings in Development Management, and copy AppID and AppSecret for storage.
- Download and install the WeChat web developer tools and create a new project, fill in the AppId copied in the above picture.
1.2 Home page
Carousel
The carousel uses the swiper component to render the data in JS
<swiper class="screen-swiper {
{DotStyle?'square-dot':'round-dot'}}" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
<swiper-item wx:for="{
{swiperList}}" wx:key>
<image src="{
{item.url}}" mode="aspectFill" wx:if="{
{item.type=='image'}}"></image>
<video src="{
{item.url}}" autoplay loop muted show-play-btn="{
{false}}" controls="{
{false}}" objectFit="cover" wx:if="{
{item.type=='video'}}"></video>
</swiper-item>
</swiper>
Popular song
Rendering with wx-for
<!-- 热门歌曲 -->
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='cuIcon-titles text-red '></text> 热门歌曲
</view>
</view>
<view class="cu-card article no-card solid-bottom margin-top" wx:for="{
{hotMusci}}" wx:key="index" bindtap="musicDetail" data-index="{
{item.id}}">
<view class="cu-item shadow">
<view class="content">
<image src="{
{item.image}}" mode="aspectFill" style="width:150rpx;"></image>
<view class="desc">
<view class="text-cut">{
{item.title}}</view>
<view class="text-content" style="height:100rpx;">{
{item.summary}}</view>
<view>
<view class="cu-tag bg-red light sm round">{
{item.typeName}}</view>
<view class="cu-tag bg-green light sm round">{
{item.songer}}</view>
</view>
</view>
</view>
</view>
</view>
iconfont icon introduction
Quick entry picture configuration can use iconfont to import icon
Alibaba vector icon map click here to jump
Add the picture to the shopping cart, add it to the project, and download the project to decompress it, and add the reference of iconfont.css
1.3 Popular playlist
Song list home page
The first page of the song list displays the name and picture information of the song list
<view class="bg-white">
<view class="bookList">
<view class="margin-top" wx:for="{
{playlist}}" wx:key="index" bindtap="goMusicList" data-index="{
{item.id}}">
<image src="{
{item.image}}" class="bookImg" mode="aspectFill"></image>
<view class="bookName">{
{item.title}}</view>
</view>
</view>
</view>
/* pages/bookcase/index.wxss */
page {
background: white;
}
.bookList {
display: flex;
color: black;
font-size: 28rpx;
width: 750rpx;
flex-wrap: wrap;
}
.bookImg {
height: 210rpx;
width: 210rpx;
margin-left: 30rpx;
border-radius: 25rpx;
}
.bookName {
width:210rpx;
margin-left: 30rpx;
font-size: 24rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
word-break: break-all;
-webkit-box-orient: vertical;
}
Playlist Details
Details display the music in the playlist, the picture, label, name and other information of the song
<!-- 歌单详情 -->
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='cuIcon-titles text-red '></text> 歌单列表
</view>
</view>
<view class="cu-card article no-card solid-bottom margin-top" wx:for="{
{musicList}}" wx:key="index" bindtap="musicDetail" data-index="{
{item.id}}">
<view class="cu-item shadow">
<view class="content">
<image src="{
{item.image}}" mode="aspectFill" style="width:150rpx;"></image>
<view class="desc">
<view class="text-cut">{
{item.name}}</view>
<view class="text-content" style="height:100rpx;">{
{item.summary}}</view>
<view>
<view class="cu-tag bg-red light sm round">{
{item.typeName}}</view>
<view class="cu-tag bg-green light sm round">{
{item.songer}}</view>
</view>
</view>
</view>
</view>
</view>
song details
Song details are an essential part, and you can perform operations such as playing, collecting, commenting, and liking songs.
<!--pages/musicDetail/index.wxml-->
<view class="musicName">
{
{musicInfo.title}}-{
{musicInfo.typeName}}
</view>
<view class="authorName">
{
{musicInfo.songer}}
</view>
<!-- 音乐图片 -->
<view class="musicImgBox">
<view class="musicBlackBox">
<image class="musicImg {
{isPlay?'imgs':''}}" src="{
{musicInfo.image}}"></image>
</view>
</view>
<!-- 评论区 -->
<view wx:for="{
{musicInfo.replyList}}" wx:key="index">
<view class="replyHeadBox">
<image src="{
{item.userHead}}" class="replyHead"></image>
<view class="replyUserBox">
<view class="replyUser">{
{item.replyUser}}</view>
<view class="replyTime">{
{item.replyTime}}</view>
</view>
</view>
<view class="replyContent">
{
{item.replyText}}
</view>
</view>
<view style="height:150rpx;"></view>
<audio src="{
{musicInfo.fileUrl}}" id="myAudio" controls loop style="display: none;"></audio>
<view class="bottomBtnBox">
<view class="btnImgBox">
<image wx:if="{
{musicInfo.isGood==0}}" src="../../images/dz0.png" class="btnImg" bindtap="changeLike"></image>
<image wx:if="{
{musicInfo.isGood>0}}" src="../../images/dz1.png" class="btnImg" bindtap="changeLike"></image>
</view>
<view class="btnImgBox">
<image wx:if="{
{isPlay}}" src="../../images/bf1.png" class="btnImg" bindtap="audioPause"></image>
<image wx:if="{
{!isPlay}}" src="../../images/bf0.png" class="btnImg" bindtap="audioPlay"></image>
</view>
<view class="btnImgBox">
<image wx:if="{
{musicInfo.isStar==0}}" src="../../images/sc0.png" class="btnImg" bindtap="changeCollec"></image>
<image wx:if="{
{musicInfo.isStar>0}}" src="../../images/sc1.png" class="btnImg" bindtap="changeCollec"></image>
</view>
<view class="btnImgBox">
<image src="../../images/reply.png" class="btnImg" bindtap="showModal" data-target="DialogModal1"></image>
</view>
</view>
<view class="cu-modal {
{modalName=='DialogModal1'?'show':''}}">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end">
<view class="content">发布评论</view>
<view class="action" bindtap="hideModal">
<text class="cuIcon-close text-red"></text>
</view>
</view>
<view class="padding-lg">
<textarea bindinput="BindReplyContent" value="{
{replyContent}}" style="text-align: left; width:600rpx;height:200rpx;" placeholder="请输入评论内容"></textarea>
</view>
<view class="cu-bar bg-white justify-end">
<view class="action">
<view class="cu-btn line-green text-green" bindtap="hideModal">取消</view>
<view class="cu-btn bg-green margin-left" bindtap="confirmModel">确定</view>
</view>
</view>
</view>
</view>
1.4 Personal center page
The personal center page obtains WeChat user information through the WeChat component for display, and provides access to modify passwords and log out.
<!-- 头像 -->
<view class="headBox">
<open-data type="userAvatarUrl" class="user-img"></open-data>
</view>
<!-- 昵称 -->
<view class="teamIcon">
<open-data type="userNickName" class="user-nickname"></open-data>
<view class="uIcon">
<image src="../../images/head.png" class="uIconImg">
</image>
<view class="teamTitle">小程序用户</view>
</view>
</view>
2. API
2.1 SpringBoot framework construction
1. Create a maven project, first create a project named SpringBootDemo, select [New Project]
Then in the pop-up window below, select [New Project] on the left menu
Create a module under the project, right-click and select [new]—[Module...]
Select [Spring initializr] on the left, and quickly create a spring boot project through the Spring initializr tool integrated in the idea. On the right side of the window: name can be set according to your preference, group and artifact have the same rules as above, other options can keep the default value, [next]
Check [Spring Boot DevTools] for the Developer Tools module and [Spring Web] for the web module. At this point, a Springboot project has been built and subsequent functions can be developed
2.2 Entity Mapping Create Mapper
Create an entity entity class folder, and create entity classes used in the project under this folder
package com.example.demo.entity;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;
import java.time.LocalDateTime;
import java.util.ArrayList;
import java.util.List;
@Data
public class User {
@TableId(type = IdType.AUTO)
private Long id;
private String account;
private String pwd;
private String userDesc;
private String userHead;
private LocalDateTime createTime;
private Long role;
private String nickname;
private String email;
private String tags;
}
2.3 Interface encapsulation
Since we use mybatis-plus, we don’t need to write simple additions, deletions, modifications, and queries. The framework comes with it. We only need to implement or inherit its Mapper and Service
Create the controller Controller
Database connection, paging plugin of mybatis-plus, and cross-domain configuration
2.4 Integrating Swagger
add dependencies
First import the web package of spring boot
<!--swagger依赖-->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger2</artifactId>
<version>2.9.2</version>
</dependency>
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger-ui</artifactId>
<version>2.9.2</version>
</dependency>
Configure Swagger
Create a swagger configuration class named SwaggerConfig.java
/*
*用于定义API主界面的信息，比如可以声明所有的API的总标题、描述、版本
*/
private ApiInfo apiDemo() {
return new ApiInfoBuilder()
//用来自定义API的标题
.title("SpringBoot项目SwaggerAPIAPI标题测试")
//用来描述整体的API
.description("SpringBoot项目SwaggerAPI描述测试")
//创建人信息
.contact(new Contact("测试员张三","http://localhost:8080/springboot/swagger-ui.html","[email protected]"))
//用于定义服务的域名
//.termsOfServiceUrl("")
.version("1.0") //可以用来定义版本
.build();
}
interface test
Run the Spring Boot project, the default port is 8080, access the url through the address bar
interface group definition
According to different business to distinguish different interface groups, use @API to divide
@Api(tags = "用户管理") // tags：组名称
@RestController
public class RoleController {
}
Interface definition
Use @ApiModel to mark the entity class, and define the input parameter in the interface as the entity class as a parameter.
-
@ApiModel: used to mark classes
-
Commonly used configuration items: value: the abbreviation of the entity class; description: the description of the entity class
-
@ApiModelProperty: used to describe the meaning of the field of the class.
2.5 Common field types
| Field Type | Occupied bytes | storage range | Maximum storage value | scenes to be used |
|---|---|---|---|---|
| TINYINT | 1 | -128~127 | 127 | store small integers |
| INT | 4 | -2147483648~2147483647 | 2147483647 | store large integers |
| BIGINT | 8 | -9223372036854775808~9223372036854775807 | 9223372036854775807 | store extremely large integers |
| DECIMAL | variable length | Store values that require high precision | ||
| CHAR | Fixed length | up to 255 bytes | 255 characters | Storing a string of fixed length |
| VARCHAR | variable length | Up to 65535 bytes | 65535 characters | Storing a string of variable length |
| DATETIME | 8 | ‘1000-01-01 00:00:00’~‘9999-12-31 23:59:59’ | ‘9999-12-31 23:59:59’ | store date and time |
3. Management terminal
3.1 Project creation
Projects can be created through development tools such as vsCode/Hbulider, and the project type can be selected according to personal development habits
3.2 Page Design
The page is mainly divided into the left menu navigation and the right content, and the effect of clicking and displaying is realized through iframe
// 滚动条
const ps = new PerfectScrollbar('.lyear-layout-sidebar-scroll', {
swipeEasing: false,
suppressScrollX: true
});
// 侧边栏
$(document).on('click', '.lyear-aside-toggler', function() {
$('.lyear-layout-sidebar').toggleClass('lyear-aside-open');
$("body").toggleClass('lyear-layout-sidebar-close');
if ($('.lyear-mask-modal').length == 0) {
$('<div class="lyear-mask-modal"></div>').prependTo('body');
} else {
$( '.lyear-mask-modal' ).remove();
}
});
// 遮罩层
$(document).on('click', '.lyear-mask-modal', function() {
$( this ).remove();
$('.lyear-layout-sidebar').toggleClass('lyear-aside-open');
$('body').toggleClass('lyear-layout-sidebar-close');
});
3.3 Interface call
The front-end framework uses layui to render data, and requests the interface defined in the controller through url
