婚礼邀请函小程序 (附源码)

本文主要是介绍婚礼邀请函小程序 (附源码)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

image 速览

部分编译后源码：


@-webkit-keyframes musicRotate {
from {-webkit-transformb: rotate(0deg);
}
to {-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes musicStop {
from {-webkit-transform: rotate(20deg);
}
to {-webkit-transform: rotate(0deg);
}
}
@-webkit-keyframes musicStart {
from {-webkit-transform: rotate(0deg);
}
to {-webkit-transform: rotate(20deg);
}
}
@-webkit-keyframes infoAnimation {
0% {-webkit-transform: scale(1) translate(0, 0);
}
50% {-webkit-transform: scale(0.9) translate(10rpx, 10rpx);
}
100% {-webkit-transform: scale(1) translate(0, 0);
}
}
.index.data-v-512cebc5 {height: 100%;position: relative;
}
.index .img.data-v-512cebc5 {width: 100%;height: 100%;
}
.index .bg-swiper.data-v-512cebc5 {width: 100%;height: 100%;
}
.index .inv.data-v-512cebc5 {position: absolute;top: 20rpx;left: 89rpx;width: 572rpx;height: 69rpx;z-index: 9;
}
.index .bg_music.data-v-512cebc5 {position: fixed;right: 0;top: 20rpx;width: 85rpx;z-index: 99;display: flex;justify-content: flex-start;align-items: flex-start;
}
.index .bg_music .musicImg.data-v-512cebc5 {width: 60rpx;height: 60rpx;
}
.index .bg_music .music_icon.data-v-512cebc5 {animation: musicRotate 3s linear infinite;
}
.index .bg_music .music_play.data-v-512cebc5 {width: 28rpx;height: 60rpx;margin-left: -10rpx;transform-origin: top;-webkit-transform: rotate(20deg);
}
.index .bg_music .playImg.data-v-512cebc5 {animation: musicStop 1s linear forwards;
}
.index .bg_music .pauseImg.data-v-512cebc5 {animation: musicStart 1s linear forwards;
}
.index .info.data-v-512cebc5 {width: 630rpx;background: rgba(255,255,255,0.75);z-index: 9;position: fixed;bottom: 40rpx;left: 50rpx;padding: 10rpx;animation: infoAnimation 12s linear infinite;
}
.index .info .content.data-v-512cebc5 {width: 626rpx;border: 1rpx solid #000;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;position: relative;padding-bottom: 30rpx;
}
.index .info .content ._h1.data-v-512cebc5 {font-size: 50rpx;height: 100rpx;line-height: 100rpx;
}
.index .info .content ._p.data-v-512cebc5 {font-size: 24rpx;height: 60rpx;line-height: 60rpx;
}
.index .info .content .img_footer.data-v-512cebc5 {position: absolute;bottom: 0;left: 53rpx;z-index: 99;height: 14rpx;width: 520rpx;
}
.box.data-v-11e16fc6 {position: relative;height: 100%;
}
.box .swiper.data-v-11e16fc6 {height: 100%;width: 100%;
}
.box .swiper .item.data-v-11e16fc6 {width: 100%;height: 100%;
}
.box .swiper .item image.data-v-11e16fc6 {width: 100%;height: 100%;display: block;
}

require("../../common/manifest.js")
require("../../common/vendor.js")
global.webpackJsonpMpvue([3],{/***/ 100:
/***/ (function(module, __webpack_exports__, __webpack_require__) {"use strict";
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div', {staticClass: "index"}, [_c('div', {staticClass: "bg-swiper"}, [_c('index-swiper', {attrs: {"list": _vm.list,"mpcomid": '0'}})], 1), _vm._v(" "), _c('image', {staticClass: "inv",attrs: {"src": "../../static/images/inv.png"}}), _vm._v(" "), (_vm.isPlay) ? _c('div', {staticClass: "bg_music",attrs: {"eventid": '1_1'},on: {"tap": _vm.audioPlay}}, [_c('image', {staticClass: "musicImg music_icon",attrs: {"src": "../../static/images/music_icon.png"}}), _vm._v(" "), _c('image', {staticClass: "music_play pauseImg",attrs: {"src": "../../static/images/music_play.png"}})]) : _c('div', {staticClass: "bg_music",attrs: {"eventid": '1_0'},on: {"tap": _vm.audioPlay}}, [_c('image', {staticClass: "musicImg",attrs: {"src": "../../static/images/music_icon.png"}}), _vm._v(" "), _c('image', {staticClass: "music_play playImg",attrs: {"src": "../../static/images/music_play.png"}})]), _vm._v(" "), _c('div', {staticClass: "info",attrs: {"animation": _vm.animationData}}, [_c('div', {staticClass: "content"}, [_c('h1', [_vm._v(_vm._s(_vm.name))]), _vm._v(" "), _c('p', [_vm._v(_vm._s(_vm.lunar))]), _vm._v(" "), _c('p', [_vm._v(_vm._s(_vm.solar))]), _vm._v(" "), _c('p', [_vm._v(_vm._s(_vm.wineshop))]), _vm._v(" "), _c('p', [_vm._v(_vm._s(_vm.address))]), _vm._v(" "), _c('p', [_vm._v(_vm._s(_vm.made))]), _vm._v(" "), _c('image', {staticClass: "img_footer",attrs: {"src": "../../static/images/we.png"}})], 1)])])
}
var staticRenderFns = []
render._withStripped = true
var esExports = { render: render, staticRenderFns: staticRenderFns }
/* harmony default export */ __webpack_exports__["a"] = (esExports);
if (false) {module.hot.accept()if (module.hot.data) {require("vue-hot-reload-api").rerender("data-v-512cebc5", esExports)}
}/***/ }),/***/ 92:
/***/ (function(module, __webpack_exports__, __webpack_require__) {"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue__ = __webpack_require__(5);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_vue__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__index__ = __webpack_require__(93);var app = new __WEBPACK_IMPORTED_MODULE_0_vue___default.a(__WEBPACK_IMPORTED_MODULE_1__index__["a" /* default */]);
app.$mount();/***/ }),/***/ 93:
/***/ (function(module, __webpack_exports__, __webpack_require__) {"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_mpvue_loader_lib_selector_type_script_index_0_index_vue__ = __webpack_require__(95);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_mpvue_loader_lib_template_compiler_index_id_data_v_512cebc5_hasScoped_true_transformToRequire_video_src_source_src_img_src_image_xlink_href_fileExt_template_wxml_script_js_style_wxss_platform_wx_node_modules_mpvue_loader_lib_selector_type_template_index_0_index_vue__ = __webpack_require__(100);
var disposed = false
function injectStyle (ssrContext) {if (disposed) return__webpack_require__(94)
}
var normalizeComponent = __webpack_require__(1)
/* script *//* template *//* styles */
var __vue_styles__ = injectStyle
/* scopeId */
var __vue_scopeId__ = "data-v-512cebc5"
/* moduleIdentifier (server only) */
var __vue_module_identifier__ = null
var Component = normalizeComponent(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_mpvue_loader_lib_selector_type_script_index_0_index_vue__["a" /* default */],__WEBPACK_IMPORTED_MODULE_1__node_modules_mpvue_loader_lib_template_compiler_index_id_data_v_512cebc5_hasScoped_true_transformToRequire_video_src_source_src_img_src_image_xlink_href_fileExt_template_wxml_script_js_style_wxss_platform_wx_node_modules_mpvue_loader_lib_selector_type_template_index_0_index_vue__["a" /* default */],__vue_styles__,__vue_scopeId__,__vue_module_identifier__
)
Component.options.__file = "src\\pages\\index\\index.vue"
if (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== "default" && key.substr(0, 2) !== "__"})) {console.error("named exports are not supported in *.vue files.")}
if (Component.options.functional) {console.error("[vue-loader] index.vue: functional components are not supported with templates, they should use render functions.")}/* hot reload */
if (false) {(function () {var hotAPI = require("vue-hot-reload-api")hotAPI.install(require("vue"), false)if (!hotAPI.compatible) returnmodule.hot.accept()if (!module.hot.data) {hotAPI.createRecord("data-v-512cebc5", Component.options)} else {hotAPI.reload("data-v-512cebc5", Component.options)}module.hot.dispose(function (data) {disposed = true})
})()}/* harmony default export */ __webpack_exports__["a"] = (Component.exports);/***/ }),/***/ 94:
/***/ (function(module, exports) {// removed by extract-text-webpack-plugin/***/ }),/***/ 95:
/***/ (function(module, __webpack_exports__, __webpack_require__) {"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_components_indexSwiper__ = __webpack_require__(96);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_common_js_h_tools__ = __webpack_require__(17);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__service_cloud__ = __webpack_require__(13);
//var audioCtx = wx.createInnerAudioContext();
/* harmony default export */ __webpack_exports__["a"] = ({name: 'Index',components: {IndexSwiper: __WEBPACK_IMPORTED_MODULE_0_components_indexSwiper__["a" /* default */]},data: function data() {return {isPlay: true,name: '',lunar: '',solar: '',wineshop: '',address: '',made: '',sharelist: [{url: '../../static/images/01.jpg',name: '初次见你的时候，没想到会这样爱你'}, {url: '../../static/images/02.jpg',name: '从爱上你那天起，甜蜜变得很轻易'}, {url: '../../static/images/03.jpg',name: '这个世界一点都不温柔，还好有你'}, {url: '../../static/images/01.jpg',name: '你是年少的欢喜，这句话反过来也是你'}, {url: '../../static/images/02.jpg',name: '我的故事，都是关于你啊'}, {url: '../../static/images/03.jpg',name: '想和你喝酒是假的，想醉你怀里是真的'}],list: []};},onLoad: function onLoad() {var that = this;that.getList();that.getInvitation();},onShow: function onShow() {var that = this;that.isPlay = true;// that.getMusicUrl()},methods: {audioPlay: function audioPlay() {var that = this;if (that.isPlay) {audioCtx.pause();that.isPlay = false;__WEBPACK_IMPORTED_MODULE_1_common_js_h_tools__["a" /* default */].showToast('您已暂停音乐播放~');} else {audioCtx.play();that.isPlay = true;__WEBPACK_IMPORTED_MODULE_1_common_js_h_tools__["a" /* default */].showToast('背景音乐已开启~');}},getList: function getList() {var that = this;wx.showNavigationBarLoading();__WEBPACK_IMPORTED_MODULE_2__service_cloud__["a" /* default */].get('weddingInvite').then(function (res) {if (res.errMsg === 'collection.get:ok') {that.list = res.data[0].banner;var musicUrl = res.data[0].music;audioCtx.src = musicUrl;audioCtx.loop = true;audioCtx.autoplay = true;audioCtx.play();wx.hideNavigationBarLoading();}});},getInvitation: function getInvitation() {var that = this;wx.showNavigationBarLoading();__WEBPACK_IMPORTED_MODULE_2__service_cloud__["a" /* default */].get('invitation').then(function (res) {if (res.errMsg === 'collection.get:ok') {var name = res.data[0].name;var lunar = res.data[0].lunar;var solar = res.data[0].solar;var wineshop = res.data[0].wineshop;var address = res.data[0].address;var made = res.data[0].made;that.name = name;that.lunar = lunar;that.solar = solar;that.wineshop = wineshop;that.address = address;that.made = made;wx.hideNavigationBarLoading();}});}},onShareAppMessage: function onShareAppMessage() {var that = this;var random = Math.floor(Math.random() * 6);return {title: this.sharelist[random].name,imageUrl: this.sharelist[random].url,path: '/pages/index/main',success: function success(res) {wx.showToast({title: '分享成功'});},fail: function fail(res) {// 转发失败wx.showToast({title: '分享取消'});}};}
});/***/ }),/***/ 96:
/***/ (function(module, __webpack_exports__, __webpack_require__) {"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_mpvue_loader_lib_selector_type_script_index_0_indexSwiper_vue__ = __webpack_require__(98);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_mpvue_loader_lib_template_compiler_index_id_data_v_11e16fc6_hasScoped_true_transformToRequire_video_src_source_src_img_src_image_xlink_href_fileExt_template_wxml_script_js_style_wxss_platform_wx_node_modules_mpvue_loader_lib_selector_type_template_index_0_indexSwiper_vue__ = __webpack_require__(99);
var disposed = false
function injectStyle (ssrContext) {if (disposed) return__webpack_require__(97)
}
var normalizeComponent = __webpack_require__(1)
/* script *//* template *//* styles */
var __vue_styles__ = injectStyle
/* scopeId */
var __vue_scopeId__ = "data-v-11e16fc6"
/* moduleIdentifier (server only) */
var __vue_module_identifier__ = null
var Component = normalizeComponent(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_mpvue_loader_lib_selector_type_script_index_0_indexSwiper_vue__["a" /* default */],__WEBPACK_IMPORTED_MODULE_1__node_modules_mpvue_loader_lib_template_compiler_index_id_data_v_11e16fc6_hasScoped_true_transformToRequire_video_src_source_src_img_src_image_xlink_href_fileExt_template_wxml_script_js_style_wxss_platform_wx_node_modules_mpvue_loader_lib_selector_type_template_index_0_indexSwiper_vue__["a" /* default */],__vue_styles__,__vue_scopeId__,__vue_module_identifier__
)
Component.options.__file = "src\\components\\indexSwiper.vue"
if (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== "default" && key.substr(0, 2) !== "__"})) {console.error("named exports are not supported in *.vue files.")}
if (Component.options.functional) {console.error("[vue-loader] indexSwiper.vue: functional components are not supported with templates, they should use render functions.")}/* hot reload */
if (false) {(function () {var hotAPI = require("vue-hot-reload-api")hotAPI.install(require("vue"), false)if (!hotAPI.compatible) returnmodule.hot.accept()if (!module.hot.data) {hotAPI.createRecord("data-v-11e16fc6", Component.options)} else {hotAPI.reload("data-v-11e16fc6", Component.options)}module.hot.dispose(function (data) {disposed = true})
})()}/* harmony default export */ __webpack_exports__["a"] = (Component.exports);/***/ }),/***/ 97:
/***/ (function(module, exports) {// removed by extract-text-webpack-plugin/***/ }),/***/ 98:
/***/ (function(module, __webpack_exports__, __webpack_require__) {"use strict";
//
//
///* harmony default export */ __webpack_exports__["a"] = ({name: 'GoodSwiper',props: ['list']
});/***/ }),/***/ 99:
/***/ (function(module, __webpack_exports__, __webpack_require__) {"use strict";
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div', {staticClass: "box"}, [_c('swiper', {staticClass: "swiper",attrs: {"autoplay": true,"circular": true,"current": "0","indicator-dots": true,"vertical": true}}, _vm._l((_vm.list), function(item, index) {return _c('block', {key: index}, [_c('swiper-item', {staticClass: "item",attrs: {"mpcomid": '0_' + index}}, [_c('image', {staticClass: "slide-image",attrs: {"mode": "aspectFitll","lazy-load": "true","src": item}})])], 1)}))], 1)
}
var staticRenderFns = []
render._withStripped = true
var esExports = { render: render, staticRenderFns: staticRenderFns }
/* harmony default export */ __webpack_exports__["a"] = (esExports);
if (false) {module.hot.accept()if (module.hot.data) {require("vue-hot-reload-api").rerender("data-v-11e16fc6", esExports)}
}/***/ })},[92]);
//# sourceMappingURL=main.js.map

<import src="/components/indexSwiper.vue.wxml" /><template name="fcaff94c"><view class="_div data-v-512cebc5 index"><view class="_div data-v-512cebc5 bg-swiper"><template data="{{...$root[$kk+'0'], $root}}" is="4fa40f2c"></template></view><image class="_image data-v-512cebc5 inv" src="../../static/images/inv.png"></image><view class="_div data-v-512cebc5 bg_music" wx:if="{{isPlay}}" bindtap="handleProxy" data-eventid="{{'1_1'}}" data-comkey="{{$k}}"><image src="../../static/images/music_icon.png" class="_image data-v-512cebc5 musicImg music_icon"></image><image src="../../static/images/music_play.png" class="_image data-v-512cebc5 music_play pauseImg"></image></view><view class="_div data-v-512cebc5 bg_music" wx:else bindtap="handleProxy" data-eventid="{{'1_0'}}" data-comkey="{{$k}}"><image src="../../static/images/music_icon.png" class="_image data-v-512cebc5 musicImg"></image><image src="../../static/images/music_play.png" class="_image data-v-512cebc5 music_play playImg"></image></view><view class="_div data-v-512cebc5 info" animation="{{animationData}}"><view class="_div data-v-512cebc5 content"><view class="_h1 data-v-512cebc5">{{name}}</view><view class="_p data-v-512cebc5">{{lunar}}</view><view class="_p data-v-512cebc5">{{solar}}</view><view class="_p data-v-512cebc5">{{wineshop}}</view><view class="_p data-v-512cebc5">{{address}}</view><view class="_p data-v-512cebc5">{{made}}</view><image src="../../static/images/we.png" class="_image data-v-512cebc5 img_footer"></image></view></view></view>
</template>

部分编辑后源码：

require("../../common/manifest.js")
require("../../common/vendor.js")
global.webpackJsonpMpvue([4],{/***/ 101:
/***/ (function(module, __webpack_exports__, __webpack_require__) {"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue__ = __webpack_require__(5);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_vue__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__index__ = __webpack_require__(102);var app = new __WEBPACK_IMPORTED_MODULE_0_vue___default.a(__WEBPACK_IMPORTED_MODULE_1__index__["a" /* default */]);
app.$mount();/***/ }),/***/ 102:
/***/ (function(module, __webpack_exports__, __webpack_require__) {"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_mpvue_loader_lib_selector_type_script_index_0_index_vue__ = __webpack_require__(104);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_mpvue_loader_lib_template_compiler_index_id_data_v_608b79cf_hasScoped_true_transformToRequire_video_src_source_src_img_src_image_xlink_href_fileExt_template_wxml_script_js_style_wxss_platform_wx_node_modules_mpvue_loader_lib_selector_type_template_index_0_index_vue__ = __webpack_require__(105);
var disposed = false
function injectStyle (ssrContext) {if (disposed) return__webpack_require__(103)
}
var normalizeComponent = __webpack_require__(1)
/* script *//* template *//* styles */
var __vue_styles__ = injectStyle
/* scopeId */
var __vue_scopeId__ = "data-v-608b79cf"
/* moduleIdentifier (server only) */
var __vue_module_identifier__ = null
var Component = normalizeComponent(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_mpvue_loader_lib_selector_type_script_index_0_index_vue__["a" /* default */],__WEBPACK_IMPORTED_MODULE_1__node_modules_mpvue_loader_lib_template_compiler_index_id_data_v_608b79cf_hasScoped_true_transformToRequire_video_src_source_src_img_src_image_xlink_href_fileExt_template_wxml_script_js_style_wxss_platform_wx_node_modules_mpvue_loader_lib_selector_type_template_index_0_index_vue__["a" /* default */],__vue_styles__,__vue_scopeId__,__vue_module_identifier__
)
Component.options.__file = "src\\pages\\map\\index.vue"
if (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== "default" && key.substr(0, 2) !== "__"})) {console.error("named exports are not supported in *.vue files.")}
if (Component.options.functional) {console.error("[vue-loader] index.vue: functional components are not supported with templates, they should use render functions.")}/* hot reload */
if (false) {(function () {var hotAPI = require("vue-hot-reload-api")hotAPI.install(require("vue"), false)if (!hotAPI.compatible) returnmodule.hot.accept()if (!module.hot.data) {hotAPI.createRecord("data-v-608b79cf", Component.options)} else {hotAPI.reload("data-v-608b79cf", Component.options)}module.hot.dispose(function (data) {disposed = true})
})()}/* harmony default export */ __webpack_exports__["a"] = (Component.exports);/***/ }),/***/ 103:
/***/ (function(module, exports) {// removed by extract-text-webpack-plugin/***/ }),/***/ 104:
/***/ (function(module, __webpack_exports__, __webpack_require__) {"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__service_cloud__ = __webpack_require__(13);//// import QQMap from 'common/js/qqmap-wx-jssdk.js'/* harmony default export */ __webpack_exports__["a"] = ({name: 'Map',data: function data() {return {// qqSdk: '',latitude: '',longitude: '',hephoneNumber: '',shephoneNumber: '',scale: 12,markers: [{iconPath: '../../static/images/nav.png',id: 0,latitude: '',longitude: '',width: 50,height: 50,scale: 12}]};},onLoad: function onLoad() {var that = this;that.getMap();},methods: {toNav: function toNav() {var that = this;wx.openLocation({latitude: that.latitude,longitude: that.longitude,scale: that.scale});},linkHe: function linkHe() {wx.makePhoneCall({phoneNumber: this.hephoneNumber});},linkShe: function linkShe() {wx.makePhoneCall({phoneNumber: this.shephoneNumber});},getMap: function getMap() {var that = this;wx.showNavigationBarLoading();__WEBPACK_IMPORTED_MODULE_0__service_cloud__["a" /* default */].get('map').then(function (res) {if (res.errMsg === 'collection.get:ok') {var latitude = res.data[0].latitude;var longitude = res.data[0].longitude;var hephoneNumber = res.data[0].hephoneNumber;var shephoneNumber = res.data[0].shephoneNumber;that.latitude = latitude;that.longitude = longitude;that.markers[0].latitude = latitude;that.markers[0].longitude = longitude;that.hephoneNumber = hephoneNumber;that.shephoneNumber = shephoneNumber;wx.hideNavigationBarLoading();}});}}
});/***/ }),/***/ 105:
/***/ (function(module, __webpack_exports__, __webpack_require__) {"use strict";
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div', {staticClass: "map"}, [_c('image', {staticClass: "head-img",attrs: {"mode": "aspectFit","src": "../../static/images/t1.png"}}), _vm._v(" "), _c('map', {staticClass: "content",attrs: {"id": "map","longitude": _vm.longitude,"latitude": _vm.latitude,"show-location": "true","markers": _vm.markers,"scale": _vm.scale,"eventid": '1_0'},on: {"tap": _vm.toNav}}), _vm._v(" "), _c('div', {staticClass: "call"}, [_c('div', {staticClass: "left",attrs: {"eventid": '2_1'},on: {"tap": _vm.linkHe}}, [_c('image', {attrs: {"src": "../../static/images/he.png"}}), _vm._v(" "), _c('span', [_vm._v("呼叫新郎")])]), _vm._v(" "), _c('div', {staticClass: "right",attrs: {"eventid": '2_2'},on: {"tap": _vm.linkShe}}, [_c('image', {attrs: {"src": "../../static/images/she.png"}}), _vm._v(" "), _c('span', [_vm._v("呼叫新娘")])])]), _vm._v(" "), _c('image', {staticClass: "footer",attrs: {"src": "../../static/images/grren-flower-line.png"}})], 1)
}
var staticRenderFns = []
render._withStripped = true
var esExports = { render: render, staticRenderFns: staticRenderFns }
/* harmony default export */ __webpack_exports__["a"] = (esExports);
if (false) {module.hot.accept()if (module.hot.data) {require("vue-hot-reload-api").rerender("data-v-608b79cf", esExports)}
}/***/ })},[101]);
//# sourceMappingURL=main.js.map


.map.data-v-608b79cf {height: 100%;background: #fff;
}
.map .head-img.data-v-608b79cf {width: 100%;height: 180rpx;margin-bottom: 50rpx;
}
.map .content.data-v-608b79cf {width: 690rpx;margin-left: 30rpx;height: 600rpx;margin-bottom: 30rpx;border-radius: 16rpx;
}
.map .call.data-v-608b79cf {display: flex;justify-content: space-around;align-items: center;width: 100%;margin-bottom: 20rpx;
}
.map .call .left.data-v-608b79cf,
.map .call .right.data-v-608b79cf {flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;
}
.map .call .left image.data-v-608b79cf,
.map .call .right image.data-v-608b79cf {height: 64rpx;width: 64rpx;
}
.map .call .left ._span.data-v-608b79cf,
.map .call .right ._span.data-v-608b79cf {height: 50rpx;line-height: 50rpx;font-size: 24rpx;color: #6b4f4e;
}
.map .footer.data-v-608b79cf {height: 80rpx;width: 716rpx;margin-left: 17rpx;
}

准备工作

mpvue框架 mpvue官方文档
小程序·云开发小程序·云开发文档

注意：使用mpvue前，首先你得先熟悉vue框架的基本使用

Build Setup

# install dependencies
npm install# serve with hot reload at localhost:8080
npm run dev# build for production with minification
npm run build# build for production and view the bundle analyzer report
npm run build --report