小程序点读第一天uniapp开发

组件

components/test-zj/test-zj.vue

<template><view :style="{'width':movies.width,'height':movies.height,'left':movies.left,'top':movies.top}" class="baofeng" @tap="play(movies.mp3)">我是小强oye{{movies.tz}}</view>
</template><script>var music = null;music = uni.createInnerAudioContext(); //创建播放器对象export default {data() {return {movies:''}},props: {movies:Object},methods: {play(e){music.src = e;music.play(); //执行播放music.onEnded(() => {//播放结束music = null;});    }}}
</script><style>
.baofeng{ border: #000 1px solid; position: absolute;}
</style>

调用组件

<template><view class="content"><view  v-for='(item,index) in option' :key='index'>
<test-zj :movies="item"></test-zj>
</view></view>
</template><script>export default {data() {return {option:[{tz:'你好1',width:'745upx',height:'250upx',left:'0upx;','top':'0upx','mp3':'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3'},{tz:'你好2',width:'345upx',height:'250upx',left:'0upx;','top':'250upx','mp3':'https://sp-sycdn.kuwo.cn/7ffa24ec30aefb8e5b095dbe2b1b7fec/61971679/resource/n1/75/10/307344178.mp3'},{tz:'你好3',width:'745upx',height:'250upx',left:'0upx;','top':'500upx','mp3':'https://sc-sycdn.kuwo.cn/8a71de16c448054b622ae7b44aadbe2f/61971695/resource/n1/66/15/2796814273.mp3'}]}},methods: {}}
</script><style>
.content{ background: #007AFF; width: 100%; height: 400px; position: relative;}
</style>

小程序点读第一天uniapp开发相关推荐

小程序容器化：基于uni-app的iOS小程序开发
前言相信越来越多小伙伴发现不少超级APP的页面都采用小程序开发了.例如支付宝客户端,首页有一个小程序中心的入口,支付宝上很多页面都是小程序了. 图1 支付宝小程序入口第一次打开的一个新功能时,会出 ...
（一）微信小程序从入门到实战之开发工具安装
俗话说工欲善其事,必先利其器,作为一名程序员,开发软件和开发环境是我们进行软件开发的必要条件.但是对于很多新入门的朋友来说,安装开发环境和配置环境变量,通常把大多数人拦在门外,所以这篇博客,咱们先来介 ...
为什么做小程序的时候要做定制开发小程序？
当你想要做小程序的时候,你便面临很多种不同的选择: 其一,选择展示类小程序,自己就可以做,仅有展示用途. 其二,选择模板小程序,有商城等功能. 其三,选择定制一个小程序,找专门做小程序的服务商. 我们 ...
微信小程序支付（1）Uni-app平台API接口
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.Web(响应式).以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝).快 ...
学习成长之路（初章三个月建成微信小程序商城、ArcEngine C# GIS开发入门）
学习成长之路(初章 ) 三个月建成微信小程序商城 .ArcEngine C# GIS开发入门自我简介先简单介绍一下,我是Domen,是一个彻彻底底的新手 . 大一大学大一没好好学习,搞这搞那 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（八）：开发小程序卡片类型呈现功能
文章目录前言一.功能说明二.代码实现 1.创建主界面Page 2.WXML 2.JS 3.WXSS 4.合法域名校验 5.图片缓存刷新问题的解决小结专题文章链接前言本篇文章,将对照专题案 ...
对战微信小程序，探究快应用的开发之路【一】
最近华为牵头国内几大厂商推出了Quikapp快应用,与微信小程序展开了入口之争,作为走在时代最前沿的程序猿,不了解一下,不动手操作一下,都对不起时代赋予我们的责任感了.来,跟我一起来探究探究快应用的开 ...
微信小程序学习笔记（二）-- 开发之框架
一.小程序框架介绍(了解) 小程序框架包含小程序的配置.框架接口.场景值.WXML 和 WXS 等二.小程序的配置(精通) 小程序的配置分为全局配置.页面配置以及sitemap 配置 1.全局配置 ...
小程序源码：(更新)云开发微群人脉
大家好,今天给大家带来的这一款是经过优化更新并有所改动的一个版本旧版本地址:https://airymz.com/3623.html 我们之前也发布过一款,今天这一款是在之前的哪一款的基础下增加优化 ...

小程序点读第一天uniapp开发

小程序点读第一天uniapp开发相关推荐

最新文章

热门文章