【java小程式】背景頁面到小程式的展示
阿新 • • 發佈:2018-12-21
文章目錄
上傳短視訊時,我們會選擇一些對應的背景音樂,背景音樂是後臺系統上傳的,在這裡我們直接通過查詢,顯示在小程式中就可以了。
背景音樂查詢後端程式碼
1、BgmService的程式碼
public interface BgmService {
/**
* 查詢背景音樂列表
* @return
*/
public List<Bgm> queryBgmList();
}
2、背景音樂service介面的實現類BgmServiceImpl
@Service public class BgmServiceImpl implements BgmService { @Autowired private BgmMapper bgmMapper; @Transactional(propagation = Propagation.SUPPORTS) @Override public List<Bgm> queryBgmList() { List<Bgm> bgms = bgmMapper.selectAll(); List<Bgm> bgmList = new ArrayList<>(); Bgm b = null; for(Bgm bgm : bgms){ b = new Bgm(); String bgmPath = bgm.getPath().replace("\\","/"); BeanUtils.copyProperties(bgm,b); b.setPath(bgmPath); bgmList.add(b); } return bgmList; } }
3、背景音樂的Controller類BgmController
@RestController @RequestMapping("/bgm") @Api(value = "背景音樂業務的介面" ,tags = "背景音樂業務的controller") public class BgmController { @Autowired private BgmService bgmService; @ApiOperation(value ="獲取背景音樂列表",notes = "獲取背景音樂列表的介面") @PostMapping("/list") public IMoocJSONResult list() { return IMoocJSONResult.ok(bgmService.queryBgmList()); } }
背景音樂小程式端程式碼
1、小程式呢端的choosebgm.wxml的程式碼
- wx:for 對返回的背景音樂進行遍歷,在js的data中定義bgmList,然後將後端返回的資料賦值給bgmList。
通過item獲取物件中的屬性值。 - audio是微信小程式中的音訊元件
3)src屬性表示音訊的地址,後端獲取的地址是儲存檔案的相對路徑,我們需要進行地址拼接。
<view>
<form bindsubmit='upload'>
<radio-group name="bgmId">
<block wx:for="{{bgmList}}">
<view class='container'>
<audio name="{{item.name}}" author="{{item.author}}" src="{{serverUrl}}{{item.path}}" style='width:300px' id="myAudio" controls loop></audio>
<radio style='margin-top:20px;' value='{{item.id}}'></radio>
</view>
</block>
</radio-group>
<view class="inputView">
<label class="loginLabel">視訊描述:</label>
<input name="desc" class="inputText" placeholder='說點什麼吧'></input>
</view>
<button class="submitBtn" type='primary' form-type='submit'>上傳視訊</button>
<button class='gobackBtn' type='warn' form-type='reset'>重置</button>
</form>
</view>
2、小程式wxss渲染choosebgm.wxss
page {
height: 100%;
}
.container {
display: flex;
margin-top: 20rpx;
justify-content: space-around;
}
.submitBtn {
width: 80%;
margin-top: 15px;
}
.gobackBtn {
width: 80%;
margin-top: 15px;
}
.loginLabel {
color: gray;
font-size:15px;
}
.inputText {
float: right;
text-align: right;
margin-right: 22px;
margin-top: 11px;
font-size: 15px;
}
.inputView {
padding: 5px;
background-color: white;
line-height: 45px;
border: solid 1px whitesmoke;
}
3、小程式js檔案,choosebgm.js
const app = getApp();
Page({
data: {
bgmList:[],
serverUrl:"",
},
onLoad: function() {
var me = this;
wx.showLoading({
title: '請等待...',
});
var serverUrl = app.serverUrl;
//發起請求
wx.request({
url: serverUrl + '/bgm/list',
method: "POST",
header:{
'content-type':'application/json'
},
success: function(res) {
console.log(res.data);
wx.hideLoading();
if (res.data.status == 200){
var bgmList = res.data.data;
console.log(bgmList);
me.setData({
bgmList: bgmList,
serverUrl: serverUrl
})
}
}
})
}
})