微信小程序 开发 “婚礼邀请函” 微信小程序入门可看
成品展示:
5个页面 我们来讲解哈(上面地图位置随便定的点)
1.首页开发
一开始进来显示首页 然后默认开始播放背景音乐,这个背景音乐点击右上角图标可以暂停(有动画),然后点击新郎和新娘文字可以调到拨号页面拨打电话给新娘 或 新郎。
背景音乐开发: 背景音乐的开发主要用到 背景音乐API : wx.getBackgroundAudioManager(),然后他一旦获取到连接src 就会自动播放 ,你且后台后他也在播放,具体自己测试。背景音乐需要在APP .json中添加配置:
"requiredBackgroundModes": ["audio"]
API 文档: https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.html
如图 背景音乐就是这样实现的。
拨打电话功能实现 : 主要是这句: wx.makePhoneCall() 里面传值包含电话号码即可【还有很多 具体自己去官网看】
API 文档:https://developers.weixin.qq.com/miniprogram/dev/api/device/phone/wx.makePhoneCall.html
2.“醉美一刻”轮播开发
这个没什么技术含量 一个轮播图 swiper 然后设置竖着即可,这里设置了显示标点 衔接轮播 自动切换等 ,,这个不多说。
3.视频API[这里使用] or 腾讯视频 和 “发送弹幕” 和 “选择视频播放” 功能的实现
视频的话可以选择腾讯视频 但是要申请 所以这里不说。
原生视频实现: 首先是个 <video> 标签 ,一定要带个ID属性 因为后面需要获取它才能操作:
可以看到这里的内置弹幕 弹出时间必须必须得秒的整数
发送弹幕实现,首先弹幕框失去焦点的时候 把值给了 inputValue , 然后通过实现 “ videoContext.sendDanmu ” 弹幕功能:
所以为什么 video 标签为什么要设置 ID 的原因了。
选择视频播放实现:
这个大概的意思是 我可以拍摄 或 选择本地视频 去替换掉我原生视频框中的内容,但是注意 弹幕列表是不变的【如果已设置】,主要通过: wx.chooseVideo :
主要API : https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html
4. 地图的实现 map 标签
map 标签是内置的一个地图(腾讯地图),然后里面最基本的参数就是 经纬度:
获取经纬度的方法: 因为这里是腾讯地图 所以用 “腾讯地图经纬度获取器” URL: https://lbs.qq.com/getPoint/
关于markers 这个是哪个红标点 ,你也可以设置哪个标点为其他图标 默认就是红色的指针嘛,即:
里面定义了id 经度 纬度 ,其实还有 iconPath 图标 、 和 层级 zIndex 可定义的 这里没用到所以详见API
所以这里的功能就是那么简单 ,主要还是获取经纬度。
打开地图的操作: 主要通过 wx.openLocation 来设置 ,打开后会显示自己的位置 和 目标地址(目标地址在里面定义的 经度 和 纬度)
即:
4.1获取用户现在的位置实现:(这里没用到 但是要讲)
通过用 wx.getLocation API 可以获取,成功获取后会返回用户的位置给后台(用户位置看 “type ”类型 ):
但是获取用户要授权 授权要在APP.json 中定义,即(下面):
获取用户位置 API :https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html
map 标签的 api :https://developers.weixin.qq.com/miniprogram/dev/component/map.html
API里面很多参数和功能 很强大 慢慢学习。
5.宾客信息开发(表单和通知)
这里用到了表单发送服务器 然后服务器通知用户,一次表单请求 只能 返回给微信用户一次信息,而且信息是要用到模板
这里的内容要去后台配置什么什么的,所以这里有空会写一篇专门通知的博客记录一下。
记录学习 谢谢各位观看!
本案例来自 “微信小程序 开发实战” 的书。
微信小程序 开发 “婚礼邀请函” 微信小程序入门可看相关推荐
- 微信小程序开发 | 婚礼邀请函项目
婚礼邀请函项目 4.1 开发前准备 4.1.1 项目展示 4.1.2 项目分析 4.1.3 项目初始化 4.2 邀请函页面 4.2.1 任务分析 4.2.2 背景音乐播放 4.2.3 页面结构和样式 ...
- 婚礼邀请函 - 微信小程序+服务端
婚礼邀请函 - 请柬 - 小程序端+服务端+安卓端 项目介绍 婚礼邀请函 效果图 项目说明 服务端架构:SpringMvc 服务器:阿里云服务 域名:pengmaster.com 数据库:在服务器上装 ...
- 基于微信小程序开发的仿微信demo
(本文参考自github/liujians,地址:https://github.com/liujians/weApp) 作者声明: 基于微信小程序开发的仿微信demo 整合了ionic的样式库和we ...
- 【微信小程序开发(云壁纸小程序教程)】
微信小程序开发(云壁纸小程序教程) 1. 准备 HBuilder X 和 微信开发者工具 2. 进入网站注册小程序 3. 点击发行,这时候就用到微信开发者工具 1. 准备 HBuilder X 和 微 ...
- 微信小程序开发初试实例结算小助手
微信小程序开发初试实例结算小助手 小程序码 创作背景 小程序功能 小程序实现 小程序开发方案(想看源代码,直接看这一项) 本着自己参加过学校组织的微信小程序云开发培训,就抱着尝试的心理去参加今年的高校 ...
- 微信小程序开发详细步骤(企业小程序开发流程)
今天珍奶bb给大家简单唠唠微信小程序开发详细步骤(企业小程序开发流程)? 微信小程序制作流程是什么?微信小程序制作模板套用怎么操作?今天珍奶bb给大家简单唠唠微信小程序制作流程是什么? 在唠微信小程序 ...
- 视频教程-微信小程序开发培训教程-微信开发
微信小程序开发培训教程 本人计算机专业,毕业工作已经10多年,从事过的行业有,安防,通讯,Gps定位,信息统计分析,互联网电商等,从事过的职位. 代码工程师(使用过的语言C#,PHP,Java),Ap ...
- 微信小程序开发学习1(小程序的入门知识)
微信小程序开发学习1(小程序的入门知识) 1.制定学习目标: 能够知道如何创建小程序项目 能够清楚小程序项目的基本组成结构 能够知道小程序页面的几个组成部分 能够知道小程序中常见的组件如何使用 能够知 ...
- 微信公众平台开发教程(四) 实例入门:机器人(附源码)
微信公众平台开发教程(四) 实例入门:机器人(附源码) 上一篇文章,写了基本框架,可能很多人会觉得晕头转向,这里提供一个简单的例子来予以说明,希望能帮你解开谜团. 一.功能介绍 通过微信公众平台实现在 ...
最新文章
- android 打卡动画,android音视频打卡(-)3种方法绘制图片
- Reactor学习笔记
- IDEA突然自动关闭然后无法启动
- 【转载】可复用的FS
- [HDU 6157]The Karting(DP)
- java开启新线程的三种方法
- 高级软件测试技术17秋第1次课堂作业小结
- Mac下IDEA安装Protobuf插件
- BZOJ.2555.SubString(后缀自动机 LCT)
- 405 - 不允许用于访问此页的 HTTP 谓词的处理办法
- 2017-2018-1 20155213 20155303 实验二 固件程序设计
- csv数据去重 python_数据去重_Python数据分析实战应用_数据挖掘与分析视频-51CTO学院...
- 想要做好SEO优化,你必须懂得SEO的核心因素
- 推荐!12个经典开源人脸识别数据库
- keil5安装教程简单易上手
- Java8新特性DateTime使用
- IP地址和mac地址的区别
- 解决U8库龄分析报表数量与实际结存数量不一致问题
- 程序员常用官网和工具站
- mac电脑用计算机名共享打印机,MAC与Windows7共享打印机的设置方法
热门文章
- 【报错】Cannot uninstall ‘certifi‘. It is a distutils installed project and thus we cannot accurately
- 初学计算机网络(三):使用Cisco Packet Tracer仿真
- 自学php多久可以工作_php自学要多久,学php难吗,多久能学会?
- [debug][RDP开源项目]rdpwrapper中出现not listening的解决方案
- Netty 实现百万连接的难点和优化点
- SimpleFOC之ESP32(二)—— 开环控制
- MSP与PGMP的关联性与区别
- 创造一个计算机语言,世界上第一个文言文编程语言诞生,创造它的是一个大学生...
- VS2017 LINK : fatal error LNK1104: cannot open file ‘atls.lib‘错误解决方案
- DNS无法解析IP_DNS之基本原理