微信小程序基础之媒体(图片,音频,视频)和地图的使用
来源:互联网 发布:28岁未成年网络剧 编辑:程序博客网 时间:2024/06/03 21:01
好久没有写过关于微信小程序的Demo了,今天向大家展示的关于媒体(图片,音频,视频)和地图的使用方法,希望对大家有所帮助,不喜勿喷,谢谢~代码中都有必要的文字注释,部分代码如下:
图片:
<!--pages/index/Component/Image/Image.wxml-->
<view class="viewTitle">
<text class="view-Name">Image图片</text>
<view class="lineView"></view>
</view>
<!--这里要注意,加载本地图片地址不要写错,“../”:表示当前文件所在的位置,
然后添加图片所在的文件或文件夹地址-->
<view class="section section_gap">
<view class="section__title">本地图片</view>
<view class="section__ctn">
<image class="image" src="../Resource(资源)/1.jpg" />
</view>
</view>
<!--如果加载网络图片,直接网络地址就可以-->
<view class="section section_gap">
<view class="section__title">网络图片</view>
<view class="section__ctn">
<image class="image" src="https://image.healthmanage.cn/qImage/201608171634363931139.jpg" />
</view>
</view>
音频:
<!--pages/index/Component/Audio/Audio.wxml-->
<view class="viewTitle">
<text class="view-Name">Audio音频</text>
<view class="lineView"></view>
</view>
<!--设计音频展示样式-->
<view class="section section_gap" style="text-align: center;">
<audio src="{{current.src}}" poster="{{current.poster}}" name="{{current.name}}" author="{{current.author}}" action="{{audioAction}}" controls></audio>
</view>
视频:
<!--pages/index/Component/Video/Video.wxml-->
<view class="viewTitle">
<text class="view-Name">Video视频</text>
<view class="lineView"></view>
</view>
<!--src="{{src}}":视频地址参数,前面是参数名名,后面是参数具体值-->
<view class="section section_gap">
<view class="body-view" style="text-align: center;">
<video src="{{src}}"></video>
</view>
</view>
地图:
<!--pages/index/Component/Map/Map.wxml-->
<view class="viewTitle">
<text class="view-Name">Map地图</text>
<view class="lineView"></view>
</view>
<!--latitude:维度,longitude:经度-->
<view class="section section_gap">
<map
style="width: 100%; height: 500px;"
latitude="{{latitude}}"
longitude="{{longitude}}"
markers="{{markers}}"
covers="{{covers}}"
>
</map>
</view>
效果图:(源码下载:https://github.com/hbblzjy/WX-Demo6)
- 微信小程序基础之媒体(图片,音频,视频)和地图的使用
- 微信小程序------媒体组件(视频,音乐,图片)
- 说说如何使用 HTML5 嵌入音频和视频(媒体标签)
- Android四大组件之ContentProvider(二)读取设备上的图片、音频和视频
- Processing 教程(5) - 媒体(图片,音频,视频) 文本再次学习
- 关于kindeditor富文本编辑的上传图片、音频、和视频的使用
- 微信小程序开发-图片(媒体)
- android开发笔记之多媒体—音频和视频的录制
- 用安卓程序录制音频和视频程序
- OpenCV之highgui 模块. 高层GUI和媒体I/O: 为程序界面添加滑动条 OpenCV的视频输入和相似度测量 用OpenCV创建视频
- webRTC的音频和视频引擎的使用
- HTML:5的新特性之音频和视频播放
- ffmpeg之将avi格式的视频和音频分离
- html5的音频和视频
- html5的音频和视频
- 音频和视频的引入
- Android 程序开发——百度地图的使用(二) 基础地图
- Android中使用又拍云存储来上传文件(包括图片、音频和视频等)
- linux用户管理命令
- Hibernate cascade 级联操作
- 内网映射公网利器ngrok Windows下配置及使用教程
- 错误整理:No plugin found for prefix 'jetty' in the current project and in the plugin groups
- 对HI3531的GPIO使用的再分析
- 微信小程序基础之媒体(图片,音频,视频)和地图的使用
- 自定义Indicator轮播图--binbinyang
- Android API等级及目录详解
- 窗口的按钮和文本域/区
- 最新解决:Discuz! X3.2对不起,您安装的不是正版应用,安装程序
- 自建Ngrok服务与使用方法
- Codeforces Round #392 (Div. 2)D Ability To Convert
- 使用PHP访问RabbitMQ消息队列
- LeetCode 6. ZigZag Conversion