徒手来一个娶亲邀请函小轨范

首先是我们api.js

const host = 'https://alterem.top/merry/app/'//-----通用图片地址const imageError = 'https://i.loli.net/2018/11/15/5bed72ab15f55.png'//-----splashconst splashWave = 'https://i.loli.net/2018/11/15/5bed73aa3b5a4.png'const indexHead = 'http://thirdwx.qlogo.cn/mmopen/ppcKM4gvHZIeXrlWyUMScWPcuicpODTkhh9kV5ic8c99UsAoxXsOGyibPq6OGCDibRtbBGPh42Aicc5sQ40F9jEK1EiaAxpG1h3Fjb/132'const splashLoading = 'https://i.loli.net/2018/11/15/5bed7455aeac8.gif'//---- 背景音乐const musicLinkTitle = 'merryMe'const musicLink = ''//---- 经纬度const lng = 111.315370const lat = 29.744200const locName = 'xx & xx'const locAddress = '湖南省xxxxxxxxx村落'const shareTitle = '诚意约请您参加我们的婚礼'const sharePath = 'pages/splash/splash'//-----home//-----my//-----module.exports = { // image, host, //mobileIn, imageError, splashWave, indexHead, splashLoading, musicLinkTitle, musicLink, lng, lat, locName, locAddress, shareTitle, sharePath}

个中定义了我们后台做事器的地址（由于要用到留言等功能）还有一些乱七八糟的常量，包括经纬度，背景音乐等信息

然后是我们的splash页面：

徒手来一个娶亲邀请函小轨范

wxml

<view class="container"> <view class="remind-box" wx:if="{{remind}}"> <image class="remind-img" src="{{loading}}"></image> </view> <block wx:else> <text class="title">We are getting married!</text> <view class="content"> <view class="hd" style="transform:rotateZ({{angle}}deg);"> <image class="logo" src="{{index_head}}"></image> <image class="wave" src="{{wave}}" mode="aspectFill"></image> <image class="wave wave-bg" src="{{wave}}" mode="aspectFill"></image> </view>  <button class="confirm-btn" open-type='getUserInfo' bindgetuserinfo='getUserInfo' bindtap="btnEnter">进入</button> </view> </block></view>

然后进入到我们的home页面

var api = require('../../api/api.js')const app = getApp()var imgPlus = [ 'https://res.fc.fjqyx.com/f9ef8dcc94a040a3a5d5c4b400618fe5', 'https://res.fc.fjqyx.com/8490e7295b5841478faf5ae021c516b4', 'https://res.fc.fjqyx.com/f3297e4bb2b0484a8bb2c8659b3ed97f', 'https://res.fc.fjqyx.com/044e13ca379a433a909f8593865bfe7d', 'https://res.fc.fjqyx.com/e2dd808030914463bf422d40dc9800b3', 'https://res.fc.fjqyx.com/b44c98e34971497b94ae3212cf5bb019', 'https://res.fc.fjqyx.com/3493c7bf430d48099ecf87026c33344b', 'https://res.fc.fjqyx.com/3c0e448fda6848d6b40ae4072263d96e', 'https://res.fc.fjqyx.com/20b9227ce4d641f79a2fbdc7529c7d2c', 'https://res.fc.fjqyx.com/c68f4f7e50f0466b904e1d32f3153581', 'https://res.fc.fjqyx.com/c92224ac2ad5415781a12930345fc51e', 'https://res.fc.fjqyx.com/5f314291f70e4453b5f2d221d9242fed', 'https://res.fc.fjqyx.com/3fd5ce7faeb14741a9a51b0cca4f412d', 'https://res.fc.fjqyx.com/ec06d58eaa9a4242a21e352727b9bb92', 'https://res.fc.fjqyx.com/62f50284ffd849bc8163dda975564c93', 'https://res.fc.fjqyx.com/904334756e704b689e85151133133e98', 'https://res.fc.fjqyx.com/bb89ed7d8bfa4f48a068a4e7c07aa4e1', 'https://res.fc.fjqyx.com/692592ba583742559526c7315774de25', 'https://res.fc.fjqyx.com/cbf199e107854eec93d78b80324a1212', 'https://res.fc.fjqyx.com/5b4aa0b786374474ada9665a307eaabd', 'https://res.fc.fjqyx.com/6a03e1e4eff74d1faac6496acd51e9dd', 'https://res.fc.fjqyx.com/60a78fd463e540dba2e05ac5a8c86edf', 'https://res.fc.fjqyx.com/de9c0b6239f648b4aa98247ea774bec1', 'https://res.fc.fjqyx.com/381b87ba5a6f4321a4cfda24fe8b1a38', 'https://res.fc.fjqyx.com/31f6b825a7174d1383c165c33f789b1a', 'https://res.fc.fjqyx.com/d1e3d6fd2c2243faa8e47a91278add1a', 'https://res.fc.fjqyx.com/c9d3b2ad821741568b5f2ea073f32207', 'https://res.fc.fjqyx.com/1d8f52b1bb1440d78ec5bfa97ce78978', 'https://res.fc.fjqyx.com/008a945e747b43cbac08337b212296f2', 'https://res.fc.fjqyx.com/3fe58341a86643d7b79411b9248321e2', 'https://res.fc.fjqyx.com/9ad8559912a0494fb6b45dabf2f531e1', 'https://res.fc.fjqyx.com/0f7d2442184b4fa1bb66846a6e205061', 'https://res.fc.fjqyx.com/c460fc394ce14a8ebf93417f44577005', 'https://res.fc.fjqyx.com/ff84aadaf2904e319bc6dc0f53d7d15f', 'https://res.fc.fjqyx.com/bf77d2c2c5a94bf4a5570c23d2095aa8', 'https://res.fc.fjqyx.com/ede34987ccd847fe8f0cb3406664041e', 'https://res.fc.fjqyx.com/bf687f43256442b2bcd046102663e9e7', 'https://res.fc.fjqyx.com/b843d5e37d8c4c07b9b431043a0b9422', 'https://res.fc.fjqyx.com/140d702826fe443282c43287804861a7', 'https://res.fc.fjqyx.com/d1aeb0949e6b4f96a8b4d6c4a5f6a8a9', 'https://res.fc.fjqyx.com/04470b502dfa48e39119b9dea5ca334c', 'https://res.fc.fjqyx.com/7d92b71316e64eb0a34d475e15a3281f', 'https://res.fc.fjqyx.com/e28f44f53e224556846b037579e0d1a3', 'https://res.fc.fjqyx.com/52c8eec539a644daad5c5d0bd54d4c5f', 'https://res.fc.fjqyx.com/335647c20be64c39814bffa4a340e693', 'https://res.fc.fjqyx.com/aff6a867f9904272a3f7dbb9bffacbb0', 'https://res.fc.fjqyx.com/243b18ff952547beae5962256167ba61']//数据可用接口返回 - 在此展示只是为了方便查看数据体Page({ data: { imgUrls: [ { imgUrl: 'https://res.fc.fjqyx.com/f9ef8dcc94a040a3a5d5c4b400618fe5', desc: '我能达到最大的造诣，便是每天早上睁开眼瞥见的人是你' }, { imgUrl: 'https://res.fc.fjqyx.com/8490e7295b5841478faf5ae021c516b4', desc: '听悲哀的歌,看幸福的戏' }, { imgUrl: 'https://res.fc.fjqyx.com/f3297e4bb2b0484a8bb2c8659b3ed97f', desc: '若不相见，则不相欠' }, { imgUrl: 'https://res.fc.fjqyx.com/044e13ca379a433a909f8593865bfe7d', desc: '就算天下荒漠，也有一个人会是你的信徒' }, { imgUrl: 'https://res.fc.fjqyx.com/e2dd808030914463bf422d40dc9800b3', desc: '自有佳人予良辰，陪你笑辞别往生' }, { imgUrl: 'https://res.fc.fjqyx.com/b44c98e34971497b94ae3212cf5bb019', desc: '正是人间少年风范，何妨挑灯奋于夜半' }, { imgUrl: 'https://res.fc.fjqyx.com/3493c7bf430d48099ecf87026c33344b', desc: '飞蛾扑火时，一定是极快乐幸福的' }, { imgUrl: 'https://res.fc.fjqyx.com/3c0e448fda6848d6b40ae4072263d96e', desc: '无论是短短的几日，长长的生平，哭、笑、爱、恨，梦里梦外，倒置置倒，竟都有它消逝的一日' }, { imgUrl: 'https://res.fc.fjqyx.com/20b9227ce4d641f79a2fbdc7529c7d2c', desc: '人生便是如此，你以为已经从一个漩涡逃离，实在其余一个漩涡就在你的脚下。用力蹬一脚，就进去了。以是，不须要对生活太用力，心会带着我们去该去的地方...' }, { imgUrl: 'https://res.fc.fjqyx.com/c68f4f7e50f0466b904e1d32f3153581', desc: '我乐意深深地扎入生活，吮尽生活的骨髓，过得踏实，大略，把统统不属于生活的内容剔除得干净利落，把生活逼到绝处，用最基本的形式，大略，大略，再大略' }, { imgUrl: 'https://res.fc.fjqyx.com/c92224ac2ad5415781a12930345fc51e', desc: '太阳未出时，全天下都像一个梦，唯有玉轮是真实的；太阳出来后，全天下都真实了，唯有玉轮像一个梦' }, { imgUrl: 'https://res.fc.fjqyx.com/5f314291f70e4453b5f2d221d9242fed', desc: '人生苦短，不如不管，连续任性' }, { imgUrl: 'https://res.fc.fjqyx.com/3fd5ce7faeb14741a9a51b0cca4f412d', desc: '若然幸福要付出代价只要舍得也就值了我只知道他人的蜂蜜有时是自己的砒霜仿照他人的幸福才折了自己的福 ' }, { imgUrl: 'https://res.fc.fjqyx.com/ec06d58eaa9a4242a21e352727b9bb92', desc: '你的影子，覆盖了我的天空我那么想你，想到险些忘却了是为什么想你。在我努力克制的悲哀深处，在我不可抑止的思念深处，你总会云淡风轻...' }, { imgUrl: 'https://res.fc.fjqyx.com/62f50284ffd849bc8163dda975564c93', desc: '许多年之后你再看，骑快马飞奔的人和坐在牛背上慢悠悠赶路的人，一样老态龙钟回到村落落里，他们朽迈的速率是一样的。韶光才不管谁跑得多快多慢呢' }, { imgUrl: 'https://res.fc.fjqyx.com/904334756e704b689e85151133133e98', desc: '年轻人不依赖批驳和负面的东西而生活他们靠感情和空想' }, { imgUrl: 'https://res.fc.fjqyx.com/bb89ed7d8bfa4f48a068a4e7c07aa4e1', desc: '虔诚者将天下神话化，又常常不将它当一回事。他总是那么方向于偶一为之' }, { imgUrl: 'https://res.fc.fjqyx.com/692592ba583742559526c7315774de25', desc: '如果能忘掉韶光、不自我定位、不假思虑、把许多定义和观点抛开的话，该当会幸福很多' }, { imgUrl: 'https://res.fc.fjqyx.com/cbf199e107854eec93d78b80324a1212', desc: '我的生活全部沉浸在“韶光”的急流中，跟了它流下去，没有抬开始来望望这急流的前后的光景的能力' }, { imgUrl: 'https://res.fc.fjqyx.com/5b4aa0b786374474ada9665a307eaabd', desc: '巴黎的雨下个一直，你终于懂了那是你们回不去的从前，雨停了，你要往前走，就像塞纳河一样' }, { imgUrl: 'https://res.fc.fjqyx.com/6a03e1e4eff74d1faac6496acd51e9dd', desc: '拥抱的觉得真好，那是肉体的安慰，尘世的奖赏' }, { imgUrl: 'https://res.fc.fjqyx.com/60a78fd463e540dba2e05ac5a8c86edf', desc: '女人敢走，是看准了男人会转头。男人头也不回，是看准了女人不敢走' }, { imgUrl: 'https://res.fc.fjqyx.com/de9c0b6239f648b4aa98247ea774bec1', desc: '不谦而狂的人，狂不到哪里去；不狂而谦的人，真不知其在谦什么' }, { imgUrl: 'https://res.fc.fjqyx.com/381b87ba5a6f4321a4cfda24fe8b1a38', desc: '谁的眼角触得了谁的眉；谁的笑颜抵得了谁的泪；谁的心脏载得住谁的循环；谁的掌纹赎得回谁的罪' }, { imgUrl: 'https://res.fc.fjqyx.com/31f6b825a7174d1383c165c33f789b1a', desc: '许多地方没有功德水，那是由于当地的人没有功德了。一个地方的水开始污染，表示民气已先污染了' }, { imgUrl: 'https://res.fc.fjqyx.com/d1e3d6fd2c2243faa8e47a91278add1a', desc: '纵然含着泪，低着眉，伤心地笑着，也总要与一些久别的故人，相见欢' }, { imgUrl: 'https://res.fc.fjqyx.com/c9d3b2ad821741568b5f2ea073f32207', desc: '如果统统生命都不屑于去石缝间寻求立足的天地，那么，天下年夜将会有一大片地方成为永久的去世寂' }, { imgUrl: 'https://res.fc.fjqyx.com/1d8f52b1bb1440d78ec5bfa97ce78978', desc: '那时脑筋太灵光了，犹如上了油的齿轮，一秒钟不知要转多少圈，聪慧弥漫在四周的空气里，伸手一抓便是一大把' }, { imgUrl: 'https://res.fc.fjqyx.com/008a945e747b43cbac08337b212296f2', desc: '可自从我意识到我自己，我就感知到，我的自我中存在着天生渴望神秘的方向，渴望艺术化地说谎' }, { imgUrl: 'https://res.fc.fjqyx.com/3fe58341a86643d7b79411b9248321e2', desc: '来吧！让狂风雨来得更剧烈一些吧' }, { imgUrl: 'https://res.fc.fjqyx.com/9ad8559912a0494fb6b45dabf2f531e1', desc: '拜别，让事情变得大略，人们变得善良，像个孩子一样，我们重新开始' }, { imgUrl: 'https://res.fc.fjqyx.com/0f7d2442184b4fa1bb66846a6e205061', desc: '你有情有义，我必不负你羞辱至心' }, { imgUrl: 'https://res.fc.fjqyx.com/c460fc394ce14a8ebf93417f44577005', desc: '我们曾如此渴望命运的波澜，到末了才创造：人生最曼妙的风景，竟是内心的淡定与从容' }, { imgUrl: 'https://res.fc.fjqyx.com/ff84aadaf2904e319bc6dc0f53d7d15f', desc: '一个人在家看电视并不算寂寞，苍白地坐在话不投机人群之中，才真正凄清' } ], indicatorDots: true, interval: 2600, duration: 1200, userInfo: {} }, // 预览图片 previewImage: function (e) { wx.previewImage({ current: e.target.dataset.src, urls: imgPlus }) }, //生命周期函数--监听页面加载 onLoad: function() { var that = this wx.playBackgroundAudio({ dataUrl: api.musicLink, title: api.musicLinkTitle, coverImgUrl: '' }), that.getWxUserInfo() }, getWxUserInfo: function(){ var that = this wx.getUserInfo({ success: function (res) { } }) }, / 生命周期函数--监听页面显示 / onShow: function() { var that = this //that.getImageList() }, / 生命周期函数--监听页面初次渲染完成 / onReady: function() { }, / 生命周期函数--监听页面隐蔽 / onHide: function() { }, / 生命周期函数--监听页面卸载 / onUnload: function() { wx.navigateBack({ delta: -1 }) }, / 页面干系事宜处理函数--监听用户下拉动作 / onPullDownRefresh: function() { }, / 页面上拉触底事宜的处理函数 / onReachBottom: function() { }, / 用户点击右上角分享 / onShareAppMessage: function () { var that = this; return { title: api.shareTitle, path: api.sharePath, success: function (res) { wx.showToast({ title: '分享成功', }) }, fail: function (res) { // 转发失落败 wx.showToast({ title: '分享取消', }) } } }})

js中定义了当前页面须要用到的图片数组以及一些文案描述等

wxml

渲染js中的图片数组到页面，然后供应图片preview功能

然后map（导航）页面

var api = require('../../api/api.js')const app = getApp()Page({ data: { }, regionchange(e) { }, markertap(e) { wx.openLocation({ latitude: api.lat, longitude: api.lng, scale: 18, name: api.locName, address: api.locAddress }) }, controltap(e) { }, / 用户点击右上角分享 / onShareAppMessage: function () { var that = this; return { title: api.shareTitle, path: api.sharePath, success: function (res) { wx.showToast({ title: '分享成功', }) }, fail: function (res) { // 转发失落败 wx.showToast({ title: '分享取消', }) } } }})

紧张是从api中拿到经纬度，然后供应导航

wxml

<view class="container"> <image src='https://res.fc.fjqyx.com/c9d3b2ad821741568b5f2ea073f32207' class='cover' mode='aspectFill'></image> <view class='datetime' animation="{{animationData}}"> <view class='box'> <view class="name css13610f7ae66601"> <span class="fl">xxx</span> <span class="and">&</span> <span class="fr ">xx</span> </view> <view class="date css13610f7ae66601"> <view>谨定于 2020年10月1日</view> <view>农历 xxxxxx 举办婚礼</view> <view bindtap="markertap">地址：湖南省xxxxxxxxxx村落<br />(点击导航)</view> <view>恭请您的光临</view> </view> </view> </view></view>

地址绑定了markertap，点击即可跳转到当前位置到目的地的导航功能

然后便是好友祝福页面

// pages/bless/index.jsvar api = require('../../api/api.js')const app = getApp()Page({ / 页面的初始数据 / data: { userInfo: {}, inputValue: '', zanNum: 0 }, / 生命周期函数--监听页面加载 / onLoad: function (options) { var that = this wx.getUserInfo({ success: function (res) { that.setData({ userInfo: res.userInfo }) } }), that.getPraiseList(), that.getCommentList() }, / 生命周期函数--监听页面初次渲染完成 / onReady: function () { }, / 生命周期函数--监听页面显示 / onShow: function () { }, / 生命周期函数--监听页面隐蔽 / onHide: function () { }, / 生命周期函数--监听页面卸载 / onUnload: function () { }, bindKeyInput: function (e) { this.setData({ inputValue: e.detail.value }) }, / 页面干系事宜处理函数--监听用户下拉动作 / onPullDownRefresh: function () { var that = this; that.getPraiseList(), that.getCommentList() }, / 页面上拉触底事宜的处理函数 / onReachBottom: function () { }, // 获取评论列表 getCommentList: function () { var that = this wx.request({ url: api.host + "commentListByYun", method: 'POST', data: {}, success: res => { if (200 == res.statusCode && 0 == res.data.code) { that.setData({ chatList: res.data.page.list }); } else { wx.showModal({ title: '提示', content: "数据缺点", showCancel: false }) } } }) }, // 获取赞列表 getPraiseList: function () { var that = this wx.request({ url: api.host + "likeListByYun", method: 'POST', data: { }, success: res => { wx.hideToast() if (200 == res.statusCode && 0 == res.data.code) { //更新数据 that.setData({ zanLog: res.data.page.list }) } else { wx.showModal({ title: '提示', content: "数据缺点", showCancel: false }) } }, }) }, loadMoreFriends: function (e) { wx.navigateTo({ url: 'blessDetail/blessDetail' }) }, / 用户点击右上角分享 / onShareAppMessage: function () { var that = this; return { title: api.shareTitle, path: api.sharePath, success: function (res) { wx.showToast({ title: '分享成功', }) }, fail: function (res) { // 转发失落败 wx.showToast({ title: '分享取消', }) } } }, like: function (event) { let that = this; let userInfo = that.data.userInfo; let name = userInfo.nickName; let face = userInfo.avatarUrl; wx.request({ url: api.host + "likeByYun", data: { 'nickName': name, 'nickImage': face, 'openId': getApp().globalData.openId }, method: "POST", dataType: "json", success: res => { if (200 == res.statusCode && 0 == res.data.code) { wx.showModal({ title: '提示', content: "感激您的祝福", showCancel: false }) that.getPraiseList() } else { if (1001 == res.data.code) { wx.showModal({ title: '缺点', content: res.data.msg + '：我们已经收到您的祝福了，感激！ ', showCancel: false }) } } } }) }, foo: function () { let that = this; if (that.data.inputValue) { //留言内容不是空值 let userInfo = that.data.userInfo; let name = userInfo.nickName; let face = userInfo.avatarUrl; let words = that.data.inputValue; wx.request({ url: api.host + "commentByYun", data: { 'nickName': name, 'nickImage': face, 'comment': words, 'openId': getApp().globalData.openId }, method: "POST", dataType: "json", success: res => { if (200 == res.statusCode && 0 == res.data.code) { wx.showModal({ title: '提示', content: "感激您的祝福", showCancel: false }) that.getCommentList() } else { wx.showModal({ title: '缺点', content: "评论缺点", showCancel: false }) } } }) } else { //Catch Error wx.showModal({ title: '提示', content: '您还没有填写内容', showCancel: false }) } that.setData({ inputValue: ''//将data的inputValue清空 }); return; }})

进行轻微的非空判断，然后要求后端提交

wxml

<view class="container"> <view class="title" wx:if="{{zanLog.length > 0}}">已收到 {{zanLog.length}} 位好友的祝福</view> <view class="title">点击下方按钮为我们送上祝福吧</view> <view class="friends" wx:if="{{zanLog.length > 0}}">  <view bindtap='loadMoreFriends' class="face" wx:for="{{zanLog}}" wx:key="user"><image src="{{item.nickImage}}" /></view> </view> <view class="btn_zone"> <view class="zan fl"> <button type="primary" bindtap='like'>送上祝福</button> </view> <view class="share fr"> <button type="default" open-type="share">分享</button> </view> </view> <view class="chat_view" wx:if="{{chatList.length > 0}}"> <view class="chat_list" wx:for="{{chatList}}" wx:key="user"> <view class="chat_face">  <image src="{{item.nickImage}}" /> </view> <view class="chat_words"> <view class="chat_meta"> <text class="chat_user">{{item.nickName}}</text> </view>  <view>{{item.comment}}</view> </view> </view> </view> <view wx:else> <view class="befirst"> <image src="/image/lovemail.gif" /> </view> </view> <view class="send_msg" > <form bindreset="foo"> <input placeholder="快写下您的祝福吧！ " class="send_ipt" bindinput="bindKeyInput" cursor-spacing='100' /> <button type="primary" form-type="reset" class="send_btn">发送</button> </form> </view></view>

代码很大略，没有很繁芜的实现，

末了奉上体验地址：

每期AI知识网

徒手来一个娶亲邀请函小轨范

智能幕后揭秘SoraOpenAI的超凡视频生成大年夜师

运用CDR绘制逼真喷鼻香蕉效果图