2022年夏季《移动软件开发》实验报告

一、实验目标

1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。

二、实验步骤

（1)创建项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eoUSU1NU-1661166277755)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820081346258.png)]

（2）页面配置

1、创建页面文件

(1)将app. json文件内pages属性中的“pages/logs/logs”删除,并删除上一行末尾的逗号。
(2)按快捷键Ctrl+S保存当前修改。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KdLhlDON-1661166277759)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820081548452.png)]

2、删除和修改文件

删除utils、logs文件夹及其内部所有内容，删除index. wxml和index. wxss中的全部代码，删除index. js中的全部代码,补全代码，删除app. wxss中的全部代码，删除app. js中的全部代码,并自动补全。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c3d6KsIM-1661166277763)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820081710050.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vl2LXEFg-1661166277765)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820081821151.png)]

3、创建其他文件

创建images文件并把图片复制到其目录下。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i4TlQlC5-1661166277768)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820082019453.png)]

(3)视图设计

1、在app. json中自定义导航栏标题和背景颜色。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NZG9Cl8s-1661166277769)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820082128840.png)]

2、区域1需要使用组件来实现-一个视频播放器。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YjFT9ZU0-1661166277771)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820082416393.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5JRQMaeo-1661166277772)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820082510599.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pGR3x8Nb-1661166277774)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820082531696.png)]

3、区域2需要使用组件实现-一个单行区域,包括文本输入框和发送按钮。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Nt78OFaQ-1661166277775)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820082747005.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kXlyu7Ou-1661166277776)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820082902725.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bg8doUtO-1661166277778)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820083059082.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-55CpkGrw-1661166277779)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820083122020.png)]

4、区域3需要使用组件实现一个可扩展的多行区域,每行包含一个播放图标和一个视频标题文本。当前先设计第–行效果,后续使用wx:for属性循环添加全部内容。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dFOW7rT1-1661166277780)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820083347571.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XBfCjZ7z-1661166277782)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820083626548.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3ETzCamv-1661166277783)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820083809980.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C7RZ67mX-1661166277785)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820084046366.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z9t8j1JR-1661166277786)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820084156741.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bx6EtcSQ-1661166277788)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820084227942.png)]

（4）逻辑实现

1、在区域3对< view class= ‘videoBar’>组件添加wx:for属性,改写为循环展示列表。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OTI0654A-1661166277789)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820084423234.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-emDs0SE0-1661166277790)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820084637746.png)]

2、在JS文件的data属性中追加list数组,用于存放视频信息。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hHuJpWnS-1661166277792)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820090225149.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3BS7IVuj-1661166277794)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820090510853.png)]

3、在区域3对<viewclass=‘videoBar’>组件添加data-url属性和bindtap属性。其中data-url用于记录每行视频对应的播放地址,bindtap用于触发点击事件。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g6r8nPrX-1661166277795)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820090810865.png)]

4、然后在JS文件的onLoad函数中创建视频上下文,用于控制视频的播放和停止。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KuUnPDih-1661166277797)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820090931717.png)]

5、接着添加自定义函数playVideo。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wt90Q11z-1661166277799)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820091248563.png)]

6、在区域1对< video >组件添加enable danmu和danmu-btn属性,用于允许发送弹幕和显示“发送弹幕”按钮。

![image-20220820091323530](C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820091323530.png

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hXgvKfhb-1661166277803)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820091607003.png)]

7、在区域2为文本输人框追加bindinput属性,用于获取弹幕文本内容;为按钮追加bindtap属性,用于触发点击事件。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gMoxAeZX-1661166277805)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820091747183.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bQZLup7z-1661166277807)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820091949973.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JBCuKFSP-1661166277809)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820092124546.png)]

8、如果希望发出随机颜色的弹幕内容,可以在JS文件中追加自定义函数getRandomColor.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f4E5QSpL-1661166277810)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820094509714.png)]

9、上述代码可以随机生成一个十六进制的颜色,将其在原先需要录人color属性的地方调用即可实现彩色弹幕效果。JS( pages/ index/index. js)代码片段修改如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ho9O37bo-1661166277813)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820094219738.png)]

![image-20220820094748189](C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820094748189.png

三、程序运行结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LjapnYiz-1661166277815)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820094911130.png)]

四、问题总结与体会

1、在定义随机生成函数的时候出现了下列的报错。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vtFRupf8-1661166277818)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820094103402.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T1ZBTQj2-1661166277820)(C:Users华为AppDataRoamingTyporatypora-user-imagesimage-20220820094436630.png)]

一开始以为随机生成的函数应该写在page里，后来仔细思考后发现，随机生成函数应该写在page外面。

2、因为代码编写量比较大，所以在编写的时候一定要及时检查，否则打错了一个字母后续就可能出现报错，排查问题也很麻烦。

3、建立文件的时候要注意文件路径的问题，弄清楚需要用绝对路径还是相对路径。

7820)]

一开始以为随机生成的函数应该写在page里，后来仔细思考后发现，随机生成函数应该写在page外面。

2、因为代码编写量比较大，所以在编写的时候一定要及时检查，否则打错了一个字母后续就可能出现报错，排查问题也很麻烦。

3、建立文件的时候要注意文件路径的问题，弄清楚需要用绝对路径还是相对路径。

4、当我进行到发送弹幕那一步的时候，编译没有报错，但是弹幕却发送不出来，我又去检查了一边代码并没有发现问题，后续又多试了几遍成功了。

来源：zxcvb882