diff --git a/README.md b/README.md index 3aeacda..b5d289d 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,7 @@ # profile3 - +本项目是一个婚礼邀请函 +效果如下: +![screenshot1](./screenshot1.png) +![screenshot2](./screenshot2.png) +![screenshot3](./screenshot3.png) +![screenshot4](./screenshot4.png) \ No newline at end of file diff --git a/app.js b/app.js new file mode 100644 index 0000000..1ed57c4 --- /dev/null +++ b/app.js @@ -0,0 +1,19 @@ +// app.js +App({ + onLaunch() { + // 展示本地存储能力 + const logs = wx.getStorageSync('logs') || [] + logs.unshift(Date.now()) + wx.setStorageSync('logs', logs) + + // 登录 + wx.login({ + success: res => { + // 发送 res.code 到后台换取 openId, sessionKey, unionId + } + }) + }, + globalData: { + userInfo: null + } +}) diff --git a/app.json b/app.json new file mode 100644 index 0000000..14a2a77 --- /dev/null +++ b/app.json @@ -0,0 +1,49 @@ +{ + "pages": [ + "pages/index/index", + "pages/guest/guest", + "pages/video/video", + "pages/picture/picture" + ], + "window": { + "backgroundTextStyle": "light", + "navigationBarBackgroundColor": "#ff4c91", + "navigationBarTextStyle": "white" + }, + "style": "v2", + "componentFramework": "glass-easel", + "sitemapLocation": "sitemap.json", + "lazyCodeLoading": "requiredComponents", + "tabBar": { + "color": "#ccc", + "selectedColor": "#ff4c91", + "borderStyle": "white", + "backgroundColor": "#fff", + "list": [ + { + "pagePath": "pages/index/index", + "iconPath": "images/invite.png", + "selectedIconPath": "images/invite.png", + "text": "邀请函" + }, + { + "pagePath": "pages/picture/picture", + "iconPath": "images/marry.png", + "selectedIconPath": "images/marry.png", + "text": "照片" + }, + { + "pagePath": "pages/video/video", + "iconPath": "images/video.png", + "selectedIconPath": "images/video.png", + "text": "美好时光" + }, + { + "pagePath": "pages/guest/guest", + "iconPath": "images/guest.png", + "selectedIconPath": "images/guest.png", + "text": "宾客信息" + } + ] + } +} diff --git a/app.wxss b/app.wxss new file mode 100644 index 0000000..06c6fc9 --- /dev/null +++ b/app.wxss @@ -0,0 +1,10 @@ +/**app.wxss**/ +.container { + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + padding: 200rpx 0; + box-sizing: border-box; +} diff --git a/images/avatar.png b/images/avatar.png new file mode 100644 index 0000000..20ab9f6 Binary files /dev/null and b/images/avatar.png differ diff --git a/images/bg_1.png b/images/bg_1.png new file mode 100644 index 0000000..667d4f5 Binary files /dev/null and b/images/bg_1.png differ diff --git a/images/bj_2.png b/images/bj_2.png new file mode 100644 index 0000000..60e7fad Binary files /dev/null and b/images/bj_2.png differ diff --git a/images/guest.png b/images/guest.png new file mode 100644 index 0000000..6d296a4 Binary files /dev/null and b/images/guest.png differ diff --git a/images/invite.png b/images/invite.png new file mode 100644 index 0000000..d61de76 Binary files /dev/null and b/images/invite.png differ diff --git a/images/marry.png b/images/marry.png new file mode 100644 index 0000000..dc553fa Binary files /dev/null and b/images/marry.png differ diff --git a/images/save_the_date.gif b/images/save_the_date.gif new file mode 100644 index 0000000..49ed478 Binary files /dev/null and b/images/save_the_date.gif differ diff --git a/images/tel.png b/images/tel.png new file mode 100644 index 0000000..f0aa13a Binary files /dev/null and b/images/tel.png differ diff --git a/images/timg1.jpg b/images/timg1.jpg new file mode 100644 index 0000000..2c6345c Binary files /dev/null and b/images/timg1.jpg differ diff --git a/images/timg2.jpg b/images/timg2.jpg new file mode 100644 index 0000000..a5823a6 Binary files /dev/null and b/images/timg2.jpg differ diff --git a/images/timg3.jpg b/images/timg3.jpg new file mode 100644 index 0000000..f150567 Binary files /dev/null and b/images/timg3.jpg differ diff --git a/images/timg4.jpg b/images/timg4.jpg new file mode 100644 index 0000000..7d76c44 Binary files /dev/null and b/images/timg4.jpg differ diff --git a/images/video.png b/images/video.png new file mode 100644 index 0000000..4daa739 Binary files /dev/null and b/images/video.png differ diff --git a/images/wedding.png b/images/wedding.png new file mode 100644 index 0000000..42635f7 Binary files /dev/null and b/images/wedding.png differ diff --git a/pages/guest/guest.js b/pages/guest/guest.js new file mode 100644 index 0000000..2eef030 --- /dev/null +++ b/pages/guest/guest.js @@ -0,0 +1,66 @@ +// pages/guest/guest.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady() { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow() { + + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide() { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload() { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh() { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom() { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage() { + + } +}) \ No newline at end of file diff --git a/pages/guest/guest.json b/pages/guest/guest.json new file mode 100644 index 0000000..4c288eb --- /dev/null +++ b/pages/guest/guest.json @@ -0,0 +1,3 @@ +{ + "navigationBarTitleText": "邀请函" +} \ No newline at end of file diff --git a/pages/guest/guest.wxml b/pages/guest/guest.wxml new file mode 100644 index 0000000..34ed486 --- /dev/null +++ b/pages/guest/guest.wxml @@ -0,0 +1,31 @@ + +
+ + + + + + + + + + + + 请选择您的性别： + + 男 + 女 + + + + + 请选择您需要的点心： + + 蛋糕 + 甜甜圈 + 巧克力 + + + + +
\ No newline at end of file diff --git a/pages/guest/guest.wxss b/pages/guest/guest.wxss new file mode 100644 index 0000000..ec38d52 --- /dev/null +++ b/pages/guest/guest.wxss @@ -0,0 +1,54 @@ +/* 背景图片 */ +.bg { + width: 100vw; + height: 100vh; +} +/* 内容区域外层容器 */ +.content { + width: 80vw; + position: fixed; + left: 10vw; + bottom: 8vh; +} +/* 姓名和手机号码区域 */ +.content .input { + font-size: large; + border: 1rpx solid #ff4c91; + border-radius: 10rpx; + padding: 1.5vh 40rpx; + margin-bottom: 1.5vh; + color: #ff4c91; +} +/* 性别区域 */ +.content .radio { + font-size: large; + margin-bottom: 1.5vh; + color: #ff4c91; + display: flex; +} +/* 点心区域 */ +.content .check { + font-size: large; + margin-bottom: 1.5vh; + color: #ff4c91; +} +.check checkbox-group { + margin-top: 1.5vh; + color: #ff4c91; +} +.check checkbox-group checkbox { + margin-left: 20rpx; +} +.check checkbox-group checkbox:nth-child(1) { + margin-left: 0; +} +/* 提交按钮 */ +.content button { + font-size: large; + background: #ff4c91; + color: #fff; +} +/* 占位符样式 */ +.content .phcolor { + color: #ff4c91; +} \ No newline at end of file diff --git a/pages/index/index.js b/pages/index/index.js new file mode 100644 index 0000000..a8d6aa5 --- /dev/null +++ b/pages/index/index.js @@ -0,0 +1,49 @@ +// index.js +const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0' + +Page({ + data: { + motto: 'Hello World', + userInfo: { + avatarUrl: defaultAvatarUrl, + nickName: '', + }, + hasUserInfo: false, + canIUseGetUserProfile: wx.canIUse('getUserProfile'), + canIUseNicknameComp: wx.canIUse('input.type.nickname'), + }, + bindViewTap() { + wx.navigateTo({ + url: '../logs/logs' + }) + }, + onChooseAvatar(e) { + const { avatarUrl } = e.detail + const { nickName } = this.data.userInfo + this.setData({ + "userInfo.avatarUrl": avatarUrl, + hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl, + }) + }, + onInputChange(e) { + const nickName = e.detail.value + const { avatarUrl } = this.data.userInfo + this.setData({ + "userInfo.nickName": nickName, + hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl, + }) + }, + getUserProfile(e) { + // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗 + wx.getUserProfile({ + desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 + success: (res) => { + console.log(res) + this.setData({ + userInfo: res.userInfo, + hasUserInfo: true + }) + } + }) + }, +}) diff --git a/pages/index/index.json b/pages/index/index.json new file mode 100644 index 0000000..4c288eb --- /dev/null +++ b/pages/index/index.json @@ -0,0 +1,3 @@ +{ + "navigationBarTitleText": "邀请函" +} \ No newline at end of file diff --git a/pages/index/index.wxml b/pages/index/index.wxml new file mode 100644 index 0000000..7c7860f --- /dev/null +++ b/pages/index/index.wxml @@ -0,0 +1,36 @@ + + + + + + + + + 邀请函 + + + + + + + + + 王辉辉 + 新郎 + + + + + + + 张琳琳 + 新娘 + + + + + 我们诚邀您来参加我们的婚礼 + 时间：2022年1月28日 + 地点：北京市海淀区XX路XX酒店 + + diff --git a/pages/index/index.wxss b/pages/index/index.wxss new file mode 100644 index 0000000..ea0f323 --- /dev/null +++ b/pages/index/index.wxss @@ -0,0 +1,96 @@ +/* 背景图片样式 */ +.bg { + width: 100vw; + height: 100vh; +} + +/* 内容区域外层容器样式 */ +.content { + width: 80vw; + height: 100vh; + position: fixed; + display: flex; + flex-direction: column; + align-items: center; + bottom: 8vh; +} + +/* 顶部图片区域样式 */ +.content-gif { + width: 19vh; + height: 18.6vh; + margin-bottom: 1.5vh; +} + +/* 标题区域样式 */ +.content-title { + font-size: 5vh; + color: #ff4c91; + text-align: center; + margin-bottom: 2.5vh; +} + +/* 合照区域样式 */ +.content-avatar image { + width: 24vh; + height: 24vh; + border: 3px solid #ff4c91; + border-radius: 50%; +} + +/* 新郎新娘姓名区域外层样式 */ +.content-info { + width: 45vw; + text-align: center; + margin-top: 4vh; + display: flex; + align-items: center; +} + +/* 新郎新娘姓名样式 */ +.content-name { + color: #ff4c91; + font-size: 2.7vh; + line-height: 4.5vh; + font-weight: bold; + position: relative; +} + +/* 姓名区域电话图片样式 */ +.content-name > image { + width: 2.6vh; + height: 2.6vh; + border: 1px solid #ff4c91; + border-radius: 50%; + position: absolute; + top: -1vh; + right: -3.6vh; +} + +/* “喜”字图片外层容器样式 */ +.content-wedding { + flex: 1; +} + +/* “喜”字图片样式 */ +.content-wedding > image { + width: 5.5vh; + height: 5.5vh; + margin-left: 20rpx; +} + +/* 婚礼信息区域样式 */ +.content-address { + margin-top: 5vh; + color: #ec5f89; + font-size: 2.5vh; + font-weight: bold; + text-align: center; + line-height: 4.5vh; +} + +/* 婚礼信息区域第一个view样式 */ +.content-address view:first-child { + font-size: 3vh; + padding-bottom: 2vh; +} diff --git a/pages/logs/logs.js b/pages/logs/logs.js new file mode 100644 index 0000000..85f6aac --- /dev/null +++ b/pages/logs/logs.js @@ -0,0 +1,18 @@ +// logs.js +const util = require('../../utils/util.js') + +Page({ + data: { + logs: [] + }, + onLoad() { + this.setData({ + logs: (wx.getStorageSync('logs') || []).map(log => { + return { + date: util.formatTime(new Date(log)), + timeStamp: log + } + }) + }) + } +}) diff --git a/pages/logs/logs.json b/pages/logs/logs.json new file mode 100644 index 0000000..b55b5a2 --- /dev/null +++ b/pages/logs/logs.json @@ -0,0 +1,4 @@ +{ + "usingComponents": { + } +} \ No newline at end of file diff --git a/pages/logs/logs.wxml b/pages/logs/logs.wxml new file mode 100644 index 0000000..85cf1bf --- /dev/null +++ b/pages/logs/logs.wxml @@ -0,0 +1,6 @@ + + + + {{index + 1}}. {{log.date}} + + diff --git a/pages/logs/logs.wxss b/pages/logs/logs.wxss new file mode 100644 index 0000000..33f9d9e --- /dev/null +++ b/pages/logs/logs.wxss @@ -0,0 +1,16 @@ +page { + height: 100vh; + display: flex; + flex-direction: column; +} +.scrollarea { + flex: 1; + overflow-y: hidden; +} +.log-item { + margin-top: 20rpx; + text-align: center; +} +.log-item:last-child { + padding-bottom: env(safe-area-inset-bottom); +} diff --git a/pages/picture/picture.js b/pages/picture/picture.js new file mode 100644 index 0000000..af233d1 --- /dev/null +++ b/pages/picture/picture.js @@ -0,0 +1,66 @@ +// pages/picture/picture.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady() { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow() { + + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide() { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload() { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh() { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom() { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage() { + + } +}) \ No newline at end of file diff --git a/pages/picture/picture.json b/pages/picture/picture.json new file mode 100644 index 0000000..4c288eb --- /dev/null +++ b/pages/picture/picture.json @@ -0,0 +1,3 @@ +{ + "navigationBarTitleText": "邀请函" +} \ No newline at end of file diff --git a/pages/picture/picture.wxml b/pages/picture/picture.wxml new file mode 100644 index 0000000..be14097 --- /dev/null +++ b/pages/picture/picture.wxml @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/pages/picture/picture.wxss b/pages/picture/picture.wxss new file mode 100644 index 0000000..ed1e056 --- /dev/null +++ b/pages/picture/picture.wxss @@ -0,0 +1,7 @@ +swiper { + height: 100vh; +} +image { + width: 100vw; + height: 100vh; +} \ No newline at end of file diff --git a/pages/video/video.js b/pages/video/video.js new file mode 100644 index 0000000..d54f207 --- /dev/null +++ b/pages/video/video.js @@ -0,0 +1,66 @@ +// pages/video/video.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady() { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow() { + + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide() { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload() { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh() { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom() { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage() { + + } +}) \ No newline at end of file diff --git a/pages/video/video.json b/pages/video/video.json new file mode 100644 index 0000000..4c288eb --- /dev/null +++ b/pages/video/video.json @@ -0,0 +1,3 @@ +{ + "navigationBarTitleText": "邀请函" +} \ No newline at end of file diff --git a/pages/video/video.wxml b/pages/video/video.wxml new file mode 100644 index 0000000..cdb43b1 --- /dev/null +++ b/pages/video/video.wxml @@ -0,0 +1,17 @@ + + 标题：海边随拍 + 拍摄日期：2022-01-01 + + + + + 标题：勿忘初心 + 拍摄日期：2022-01-10 + + + + + 标题：十年之约 + 拍摄日期：2022-01-20 + + diff --git a/pages/video/video.wxss b/pages/video/video.wxss new file mode 100644 index 0000000..2742da6 --- /dev/null +++ b/pages/video/video.wxss @@ -0,0 +1,20 @@ +.video { + box-shadow: 0 8rpx 17rpx 0 rgba(7, 17, 27, 0.1); + margin: 10rpx 25rpx; + margin-bottom: 30rpx; + padding: 20rpx; + border-radius: 10rpx; + background: #fff; +} +.video-title { + font-size: 35rpx; + color: #333; +} +.video-time { + font-size: 26rpx; + color: #979797; +} +.video video { + width: 100%; + margin-top: 20rpx; +} \ No newline at end of file diff --git a/project.config.json b/project.config.json new file mode 100644 index 0000000..51183df --- /dev/null +++ b/project.config.json @@ -0,0 +1,41 @@ +{ + "compileType": "miniprogram", + "libVersion": "trial", + "packOptions": { + "ignore": [], + "include": [] + }, + "setting": { + "coverView": true, + "es6": true, + "postcss": true, + "minified": true, + "enhance": true, + "showShadowRootInWxmlPanel": true, + "packNpmRelationList": [], + "babelSetting": { + "ignore": [], + "disablePlugins": [], + "outputPath": "" + }, + "compileWorklet": false, + "uglifyFileName": false, + "uploadWithSourceMap": true, + "packNpmManually": false, + "minifyWXSS": true, + "minifyWXML": true, + "localPlugins": false, + "condition": false, + "swc": false, + "disableSWC": true, + "disableUseStrict": false, + "useCompilerPlugins": false + }, + "condition": {}, + "editorSetting": { + "tabIndent": "auto", + "tabSize": 2 + }, + "appid": "wx43948905fd1ec84c", + "simulatorPluginLibVersion": {} +} \ No newline at end of file diff --git a/project.private.config.json b/project.private.config.json new file mode 100644 index 0000000..48d799c --- /dev/null +++ b/project.private.config.json @@ -0,0 +1,23 @@ +{ + "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", + "projectname": "miniprogram-4", + "setting": { + "compileHotReLoad": true, + "urlCheck": true, + "coverView": true, + "lazyloadPlaceholderEnable": false, + "skylineRenderEnable": false, + "preloadBackgroundData": false, + "autoAudits": false, + "useApiHook": true, + "useApiHostProcess": true, + "showShadowRootInWxmlPanel": true, + "useStaticServer": false, + "useLanDebug": false, + "showES6CompileOption": false, + "bigPackageSizeSupport": false, + "checkInvalidKey": true, + "ignoreDevUnusedFiles": true + }, + "libVersion": "3.11.0" +} \ No newline at end of file diff --git a/screenshot1.png b/screenshot1.png new file mode 100644 index 0000000..70608bf Binary files /dev/null and b/screenshot1.png differ diff --git a/screenshot2.png b/screenshot2.png new file mode 100644 index 0000000..92179c5 Binary files /dev/null and b/screenshot2.png differ diff --git a/screenshot3.png b/screenshot3.png new file mode 100644 index 0000000..a52c65b Binary files /dev/null and b/screenshot3.png differ diff --git a/screenshot4.png b/screenshot4.png new file mode 100644 index 0000000..f70dfe8 Binary files /dev/null and b/screenshot4.png differ diff --git a/sitemap.json b/sitemap.json new file mode 100644 index 0000000..ca02add --- /dev/null +++ b/sitemap.json @@ -0,0 +1,7 @@ +{ + "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", + "rules": [{ + "action": "allow", + "page": "*" + }] +} \ No newline at end of file diff --git a/utils/util.js b/utils/util.js new file mode 100644 index 0000000..764bc2c --- /dev/null +++ b/utils/util.js @@ -0,0 +1,19 @@ +const formatTime = date => { + const year = date.getFullYear() + const month = date.getMonth() + 1 + const day = date.getDate() + const hour = date.getHours() + const minute = date.getMinutes() + const second = date.getSeconds() + + return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}` +} + +const formatNumber = n => { + n = n.toString() + return n[1] ? n : `0${n}` +} + +module.exports = { + formatTime +}