微信小程序：解决url的报错，flex，盒子模型，音乐播放，复用common.wxss【诗书画唱】

2021-06-17 18:34 作者:诗书画唱 0人读过 | 我要投稿

目录：

例子1：根据期刊的类型调用movie，essay，music组件。实现movie，essay，music组件都复用common.wxss的样式

essay

为了避免我们认为Boolean类型的变量hidden的hidden是不可重命名的变量，我下面把Boolean类型的变量hidden重命名为hn（常常通过true或false来控制多个组件的显示和隐藏等等）

根据type来判断（常常组件中使用属性的值，三元表达式等等进行判断）

例子2：实现music组件的样式:

弹性盒子的个人理解和对应的教程视频等等

display

flex:1等的使用，flex:0，flex:2，flex:0.5的效果

例子3：实现music组件的音乐播放

一开始，点击事件等绑定的函数方法的内容，可以先用打印语句代替，先测试下方法是否可以被触发

一开始可以写死数据，后面可以通过变量的添加和控制等等来把数据写活，变成动态数据

不得不承认，serData挺好用的，挺常用的，可以控制变量，进行变量的值的刷新（也就是组件的刷新）

properties或data，setData，父组件传值给子组件（在父组件中，给子组件的属性赋值等等）等等都可以把数据写活

个人理解：很多时候用了解构后，变量自动被赋予对应的值，就可以直接用解构出来的变量，但是下面因导入的config.js文件中一些关键字（default等等），而解构不出来，所以下面不可以用解构

例子4：按照例子1到例子3实现的代码

具体代码如下

components/classic/essay/index.wxml

components/classic/essay/index.wxss

components/classic/music/index.js

components/classic/music/index.wxml

components/classic/music/index.wxss

components/classic/classic_beh.js

common.wxss

pages/classic/index.wxml

"requiredBackgroundModes": ["audio"],

config.js

运行效果

讲义

例子1：根据期刊的类型调用movie，essay，music组件。实现movie，essay，music组件都复用common.wxss的样式

essay

下面就开始实现“根据期刊的类型调用movie，essay，music组件”的功能

根据数据库的type的值来判断当前期刊要显示的那种类型的组件

根据type来判断（常常组件中使用属性的值，三元表达式等等进行判断）

例子2：实现music组件的样式:

组件中，常常用上三元表达式，组件文件夹中的js文件等中的properties或data中的等等

弹性盒子的个人理解和对应的教程视频等等

如果想要整个设置为弹性盒子的块状，就用display：flex

flex:1等的使用，flex:0，flex:2，flex:0.5的效果

display

例子3：实现music组件的音乐播放

升级后台

下面的内容也可以参考官网的开发者文档

一开始，点击事件等绑定的函数方法的内容，可以先用打印语句代替，先测试下方法是否可以被触发

一开始可以写死数据，后面可以通过变量的添加和控制等等来把数据写活，变成动态数据

不得不承认，serData挺好用的，挺常用的，可以控制变量，进行变量的值的刷新（也就是组件的刷新）

下面还要进行修改

properties或data，setData，父组件传值给子组件（在父组件中，给子组件的属性赋值等等）等等都可以把数据写活

例子4：按照例子1到例子3实现的代码

个人修复的bug

Q：为什么音乐播放不了，会路径报错？GET http://127.0.0.1:9001/public/music/http://music.163.com/song/media/outer/url?id=393926.mp3 net::ERR_EMPTY_RESPONSE(env: Windows,mp,1.05.2105170; lib: 2.17.0)

A：

首先我排除错误的方法就是写console.log的打印语句，同时发现

http://m10.music.126.net/20210617171232/200b492b79e7938a13133a005d07bb6d/ymusic/67d4/380d/3414/2d73b6bc1059ac4276887d82806bbaff.mp3访问得了，那么可能是路径错了，那么我猜想是不是数据库的url的问题？是不是后台中项目的src根目录下的index.js的内容错了？

我打印了以下内容

结果：

后来查看数据库

就明白了：

改下后台和数据库即可（记得清空缓存后运行项目）

关键是if(req.url.search('/public/') === -1) {}部分

具体代码如下

<text class="content">{{content}}</text>

</view>

/* components/classic/essay/index.wxss */

@import '../common.wxss'

// components/classic/music/index.js

import classicBeh from '../classic_beh.js'

import config from '../../../config.js'

//获取音频管理器对象 START

const mMgr = wx.getBackgroundAudioManager()

//获取音频管理器对象 END

Component({

behaviors: [classicBeh],

/**

* 组件的属性列表

properties: {

src: String,

title: String,

/**

* 组件的初始数据

data: {

pauseSrc: 'images/player@pause.png',

playSrc: 'images/player@play.png',

playing: false,//是否播放音乐

/**

* 组件的方法列表

methods: {

onPlay () {

//如果需要播放音乐，只需要设置mMgr的src和title属性

// mMgr.src ='http://m10.music.126.net/20210617171232/200b492b79e7938a13133a005d07bb6d/ymusic/67d4/380d/3414/2d73b6bc1059ac4276887d82806bbaff.mp3'

/*如果你的MySQL数据库中的classic表的url例对应的内容是

http://music.163.com/song/media/outer/url?id=393926.mp3，

那么就用mMgr.src =this.properties.src。

如果你的MySQL数据库中的classic表的url例对应的内容是fhg.mp3之类的

后台的public\music之类目录下有的文件的文件名，那么就用

mMgr.src = config.music_url + this.properties.src

（这里目前我还是用自己后台的内容！）*/

mMgr.src = config.music_url + this.properties.src

// mMgr.src =this.properties.src

console.log(mMgr.src)

console.log(config.music_url)

console.log(this.properties.src)

mMgr.title = this.properties.title

//更新播放状态

this.setData({

playing: true

})

}

})

<text class="content">{{content}}</text>

</view>

/* components/classic/music/index.wxss */

/* @import '../common.wxss' */

/* components/classic/music/index.wxss */

.container {

display: flex;

flex-direction: column;

align-items: center;

}

.img {

width: 422rpx;

height: 422rpx;

margin-top: 60rpx;

border-radius: 50%;

}

.player {

width: 120rpx;

height: 120rpx;

position: relative;

bottom: 270rpx;

}

.tag {

width: 44rpx;

height: 128rpx;

position: relative;

bottom: 160rpx;

right: 310rpx;

}

//components/classic/classic_beh.js

import config from '../../config'

export default Behavior({

properties: {

img: String,

content: String,

//控制子组件是否显示的部分 START

hn: Boolean

//控制子组件是否显示的部分 END

}

//music等子组件要共用的base_img部分 START

data: {

base_img: config.img_url

}

//music等子组件要共用的base_img部分 END

})

/*公共的样式文件：essay和movie样用的样式*/

.container {

display: flex;

flex-direction: column;

align-items: center;

}

.tag{

width: 46rpx;

height: 142rpx;

position: relative;

right: 310rpx;

bottom: 58rpx;

}

.img {

width: 750rpx;

height: 500rpx;

}

.content {

font-size: 36rpx;

max-width: 550rpx;

}

<cmp-epsoide class="epsoide" index="{{classicData.index}}"></cmp-epsoide>

<!-- <cmp-like count="{{classicData.fav_nums}}" like="{{classicData.like_status}}"

bind:myLike="onLike"></cmp-like> -->

<cmp-like class="like" count="{{fav_nums}}"

like="{{like_status}}" bind:myLike="onLike"></cmp-like>

</view>

<!-- <cmp-movie wx:if="{{classicData.image}}" content="{{classicData.content}}"

img="{{classicData.image}}"></cmp-movie> -->

<cmp-movie wx:if="{{classicData.image}}" content="{{classicData.content}}"

img="{{classicData.image}}" hn="{{classicData.type != 100}}"></cmp-movie>

<cmp-essay wx:if="{{classicData.image}}" content="{{classicData.content}}"

img="{{classicData.image}}" hn="{{classicData.type != 300}}"></cmp-essay>

<cmp-music wx:if="{{classicData.image}}" content="{{classicData.content}}"

img="{{classicData.image}}" hn="{{classicData.type != 200}}"

src="{{classicData.url}}" title="{{classicData.title}}"></cmp-music>

<cmp-navi class="navi" title="{{classicData.title}}" isFirst="{{isFirst}}"

isLatest="{{isLatest}}" bind:myLeft="onNext"

bind:myRight="onPrev"></cmp-navi>

</view>

{

"entryPagePath": "pages/classic/index",

"pages": [

"pages/classic/index"

"requiredBackgroundModes": ["audio"],

"window": {

"navigationBarBackgroundColor": "#fff",

"navigationBarTextStyle": "black",

"navigationBarTitleText": "听雨轩",

"backgroundColor": "#eeeeee",

"backgroundTextStyle": "light",

"enablePullDownRefresh": false

"sitemapLocation": "sitemap.json"

}

//config.js

//用来存放常量的文件

export default {

base_url: 'http://127.0.0.1:9001/',

img_url: 'http://127.0.0.1:9001/public/images/',

music_url: 'http://127.0.0.1:9001/public/music/'

}

运行效果

讲义

准备：后台代码处理

一、创建新项目和页面

二、app.json配置导航栏

三、定义和使用点赞组件

"四、classic在生命周期函数中请求后台数据

设置-项目设置-勾选不校验..."

五、封装Http工具类。

六、将classic页面的数据传递到like组件中（父组件传数据到子组件）

七、实现movie组件

八、like组件传递数据到classic页面（子传父实现自定义事件）

"九、epsoide组件（组件的生命周期函数以及data和properties定义数据的区别）

data和properties会被合并成同一个对象，如果有同名属性，会使用properties中定义的属性

期刊号补零（observer函数）"

"十、初步完成导航组件

获取数据：title，isFirst和isLatest

自定义导航事件onLeft,onRight

禁用左翻页和右翻页"

十一、初步实现music组件和essay组件

十二、提取组件的公共部分（组件的行为Behavior实现多继承）

"十三、初步实现期刊切换前一期效果（后台getClassic实现）

classic页面的onPrev"

"十四、根据index判断是第一期还是最后一期

classicModel中的isFirst和isLatest方法，缓存（Storage）最新期刊号_setLatest方法"

"十五、实现期刊切换后一期效果

classic页面的onNext

classicModel中的getNext和getPrev代码重构

classic页面的onPrev和onNext代码重构"

十六、期刊数据数据缓存实现，（model中的回调函数处理bug和大图片显示bug）

十七、缓存数据以后无法显示更新后的点赞次数和状态（后台代码getClassic扩展）

"十八、根据期刊类型使用组件movie,essay和music组件

组件的自定义属性控制组件是否显示"

"十九、movie,essay和music组件样式代码的复用

@import复用样式文件common.wxss"

二十、music组件样式

"二十一、实现播放音乐

后台提供音频服务功能（修改中间件代码乱码处理逻辑）

wx.getBackgroundAudioManager()

app.json中添加配置项目：""requiredBackgroundModes"": [""audio""],"

标签：

微信小程序：解决url的报错，flex，盒子模型，音乐播放，复用common.wxss【诗书画唱】

微信小程序：解决url的报错，flex，盒子模型，音乐播放，复用common.wxss【诗书画唱】的评论 (共条)

你可能也喜欢这些文章

最新发布的文章

微信小程序：解决url的报错，flex，盒子模型，音乐播放，复用common.wxss【诗书画唱】

本文作者的其他文章

微信小程序：解决url的报错，flex，盒子模型，音乐播放，复用common.wxss【诗书画唱】的评论 (共 条)

你可能也喜欢这些文章

最新发布的文章

微信小程序：解决url的报错，flex，盒子模型，音乐播放，复用common.wxss【诗书画唱】的评论 (共条)