这个婚礼邀请函是之前帮别人做的，现在人家婚礼举办过了也没啥关系了，想着就修改成通用模板进行开源，方便大家尤其是小白们克隆项目之后稍微修改就能够直接使用。

当时自己开始这个项目时候也是查阅了很多教程文章，但无一列外都需要大量的小程序开发知识储备，对于当时需要快速构建一个项目的我来说真的焦急，很希望有一个可以直接使用的模板，项目完成后有深入的想法可以再学习。

扫码体验

​

项目展示（多图警告）

首页

​

照片页

​

地图页

​

祝福页

​

留言页

​

项目下载

https://github.com/Zuowendong/wechat-invitation

项目部署

  1. 项目目录下执行 npm install
  2. 进入项目执行 npm run dev
  3. 在微信开发者工具中预览

代码详解

代码也没啥好解释的，会看的就自己看了。不愿意看的详解了也没啥意义，想要学习的话还是需要前期准备相关知识储备：mpvue，小程序开发，小程序云开发。看官方的开发文档就可以了。

定制开发

  1. AppID(小程序ID)修改成自己的
  2. main.js中初始云开发环境名修改成自己的
  3. service文件中云开发config修改成自己的云开发环境名
  4. 首页的婚宴举办信息、音乐资源的引用地址的修改
  5. 首页和照片页的图片资源引用 ，都在封装的组件 indexSwiper.vue、swiper.vue中
  6. 地图页的导航经纬度和新人电话号码的修改
  7. 消息页的祝福视频资源引用
  8. 首页和祝福页的两个转发按钮自定义信息的修改

关注「前端一起学」公众号 ，看着项目进阶学习，让我们一起学前端，一起进步。

​

基于微信小程序云开发实现的婚礼邀请函模板，可自行定制开发的更多相关文章

  1. 微信小程序云开发如何上手

    简要介绍 微信小程序云开发,是基于 Serverless 的一站式后端云服务,涵盖函数.数据库.存储.CDN等服务,免后端运维.基于云开发可以免鉴权调用微信所有开放能力. 前提准备 微信开发者工具 创 ...

  2. 微信小程序-云开发实战教程

    微信小程序-云开发实战教程 云函数,云存储,云数据库,云调用 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/gettin ...

  3. 技本功丨收藏！斜杠青年与你共探微信小程序云开发（下篇）

    2019年2月26日,人们为了一个杯子疯了一天. 星巴克猫爪杯,一场已经与猫无关了的“圣杯战争“.网上的倒卖价格,已炒至近千元! 求而不得,舍而不能,得而不惜.这是人最大的悲哀... 所以,请珍惜以下 ...

  4. 微信小程序-云开发（手记）

    微信小程序-云开发(手记) 1.创建data.json文件 注意以下几点要求: 入门示例: init方法的env:默认环境配置,传入字符串形式的环境 ID(理解为数据库)可以指定所有服务的默认环境(意 ...

  5. 第六章 “我要点爆”微信小程序云开发实例之爆文详情页制作

    爆文详情页制作 从首页中数据列表打开相应详情页面的方法: 给数据列表中每个数据项加一个点击事件,同时将当前数据项的id暂时记录在本地,然后跳转到详情页面detail goopen: function ...

  6. 第一章 “我要点爆”微信小程序云开发之项目建立与我的页面功能实现

    第一章 “我要点爆”微信小程序云开发之项目建立与我的页面功能实现 开发环境搭建 使用自己的AppID新建小程序项目,后端服务选择小程序·云开发,点击新建,完成项目新建. 新建成功后跳转到开发者工具界面 ...

  7. “我要点爆”微信小程序云开发实例

    使用云开发进行微信小程序“我要点爆”的制作 下一章:“我要点爆”微信小程序云开发之项目建立与我的页面功能实现 接下来我将对“我要点爆”微信小程序进行完整的开源介绍 小程序名称: 我要点爆 查看方式:从 ...

  8. 微信小程序云开发－从0打造云音乐全栈小程序

    第1章 首门小程序“云开发”课程,你值得学习本章主要介绍什么是小程序云开发以及学习云开发的重要性,并介绍项目的整体架构,真机演示项目功能,详细介绍整体课程安排.课程适用人群以及需要掌握的前置知识.通过 ...

  9. 微信小程序云开发不完全指北

    微信小程序云开发不完全指北 首先必须说明云开发的"云"并不是类似云玩家里的云的意思,而是微信小程序真的提供了云开发的接口以及一个简单的提供存储.数据库服务的虚拟后台(对于一些轻量小 ...

随机推荐

  1. CF981B Businessmen Problems map 模拟 二十二

    Businessmen Problems time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  2. 【Leetcode】【简单】【66. 加一】【JavaScript】

    题目描述 66. 加一 给定一个由整数组成的非空数组所表示的非负整数,在该数的基础上加一. 最高位数字存放在数组的首位, 数组中每个元素只存储单个数字. 你可以假设除了整数 0 之外,这个整数不会以零 ...

  3. Flask源码浅析

    前言 学习一样东西,要先知其然,然后知其所以然. 这次,我们看看Flask Web框架的源码.我会以Flask 0.1的源码为例,把重点放在Flask如何处理请求上,看一看从一个请求到来到返回响应都经 ...

  4. 关于Ubunto在VMwark中无法全屏。

    1.右键点击Ubunto桌面,进入终端 输入: 1.sudo apt-get install open-vm*   安装依赖项 2.sudo apt-get install open-vm-tools ...

  5. c++调试在容器释放内存时报Unknown Signal 或 Trace/breakpoint trap异常

    在做一道题时,用到的板子中出现了很多的容器的使用,,一开始都是开MAXN大小的容器,,但是有几率出现程序运行完后不正常退出,, 在多次尝试断点调试后,发现主要的异常是程序在结束时,要进行资源的释放,, ...

  6. NGINX的启停命令、以及动态加载配置文件的命令

    -- 启动(不推荐):在nginx目录下有一个sbin目录,sbin目录下有一个nginx可执行程序../nginx -- 启动(指定配置文件,推荐)/usr/local/nginx/sbin/ngi ...

  7. Storm VS Flink ——性能对比

    1.背景 Apache Flink 和 Apache Storm 是当前业界广泛使用的两个分布式实时计算框架.其中 Apache Storm(以下简称"Storm")在美团点评实时 ...

  8. React Hooks 你不来了解下？

    前言 最近在看 React 的新语法-- React Hooks,只能一句话概括:React 语法真的是越来越强大,越写代码越少. 强烈推荐还没看 React Hooks 的同学去学习下,这会让你写r ...

  9. localStorage详细总结

    一.localStorage简介: 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cooki ...

  10. .NET分布式大规模计算利器-Orleans(一)

      写在前面 Orleans是基于Actor模型思想的.NET领域的框架,它提供了一种直接而简单的方法来构建分布式大规模计算应用程序,而无需学习和应用复杂的并发或其他扩展模式.我在2015年下半年开始 ...