首先来几个效果图

首先是我们api.js

const host = ';//-----通用图片地址const imageError = ';//-----splashconst splashWave = ';const indexHead = ';const splashLoading = ';//---- 背景音乐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页面：

js

var api = require('../../api/api.js')//获取应用实例var app = getApp()Page({  data: {    remind: '加载中',    help_status: false,    userid_focus: false,    passwd_focus: false,    userid: '',    passwd: '',    angle: 0  },  onLoad: function () {    var that = this    that.setData({      wave: api.splashWave,      index_head: api.indexHead,      loading: api.splashLoading    })    app.getUserInfo(function (userInfo) {      that.setData({        userInfo: userInfo      })    })  },  onReady: function () {    var _this = this;    setTimeout(function () {      _this.setData({        remind: ''      });    }, 1000);    wx.onAccelerometerChange(function (res) {      var angle = -(res.x * 30).toFixed(1);      if (angle > 14) { angle = 14; }      else if (angle < -14) { angle = -14; }      if (_this.data.angle !== angle) {        _this.setData({          angle: angle        });      }    });  },  btnEnter:function(){    this.goHome()  },  goHome: function () {    wx.switchTab({      url: '../home/home'    });  },  getUserInfo(e) {    if (e.detail.errMsg === 'getUserInfo:ok') {      wx.showLoading({        title: '加载中...',      })      app.globalData.userInfo = e.detail.rawData    } else {      wx.showModal({        title: '提示',        content: '获取用户信息失败',        showCancel: false,        confirmColor: '#e2211c',        success(res) {        }      })    }  },  /**   * 用户点击右上角分享   */  onShareAppMessage: function () {    var that = this;    return {      title: api.shareTitle,      path: api.sharePath,      success: function (res) {        wx.showToast({          title: '分享成功',        })      },      fail: function (res) {        // 转发失败        wx.showToast({          title: '分享取消',        })      }    }  }})

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>      <!-- <view class="index_txt">          您好:{{userInfo.nickName}}      </view> -->      <button class="confirm-btn" open-type='getUserInfo' bindgetuserinfo='getUserInfo' bindtap="btnEnter">进入</button>    </view>  </block></view>

然后进入到我们的home页面

js

var api = require('../../api/api.js')const app = getApp()var imgPlus = [  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';,  ';]//数据可用接口返回 - 在此展示只是为了方便查看数据体Page({  data: {    imgUrls: [      { imgUrl: ';, desc: '我能达到最大的成就，就是每天早上睁开眼看见的人是你' },      { imgUrl: ';, desc: '听悲伤的歌,看幸福的戏' },      { imgUrl: ';, desc: '若不相见，则不相欠' },      { imgUrl: ';, desc: '就算世界荒芜，也有一个人会是你的信徒' },      { imgUrl: ';, desc: '自有佳人予良辰，陪你笑辞别往生' },      { imgUrl: ';, desc: '正是人间少年风范，何妨挑灯奋于夜半' },      { imgUrl: ';, desc: '飞蛾扑火时，一定是极快乐幸福的' },      { imgUrl: ';, desc: '无论是短短的几日，长长的一生，哭、笑、爱、恨，梦里梦外，颠颠倒倒，竟都有它消失的一日' },      { imgUrl: ';, desc: '人生就是如此，你以为已经从一个漩涡逃离，其实另外一个漩涡就在你的脚下。用力蹬一脚，就进去了。所以，不需要对生活太用力，心会带着我们去该去的地方...' },      { imgUrl: ';, desc: '我愿意深深地扎入生活，吮尽生活的骨髓，过得扎实，简单，把一切不属于生活的内容剔除得干净利落，把生活逼到绝处，用最基本的形式，简单，简单，再简单' },      { imgUrl: ';, desc: '太阳未出时，全世界都像一个梦，唯有月亮是真实的；太阳出来后，全世界都真实了，唯有月亮像一个梦' },      { imgUrl: ';, desc: '人生苦短，不如不管，继续任性' },      { imgUrl: ';, desc: '若然幸福要付出代价 只要舍得也就值了 我只知道 他人的蜂蜜有时是自己的砒霜 模拟他人的幸福 才折了自己的福 ' },      { imgUrl: ';, desc: '你的影子，覆盖了我的天空 我那么想你，想到几乎忘记了是为什么想你。在我努力克制的悲伤深处，在我不可抑止的思念深处，你总会云淡风轻...' },      { imgUrl: ';, desc: '许多年之后你再看，骑快马飞奔的人和坐在牛背上慢悠悠赶路的人，一样老态龙钟回到村庄里，他们衰老的速度是一样的。时间才不管谁跑得多快多慢呢' },      { imgUrl: ';, desc: '年轻人不依赖批判和负面的东西而生活 他们靠感情和理想' },      { imgUrl: ';, desc: '虔诚者将世界神话化，又经常不将它当一回事。他总是那么倾向于游戏人间' },      { imgUrl: ';, desc: '如果能忘掉时间、不自我定位、不假思索、把许多定义和概念抛开的话，应该会幸福很多' },      { imgUrl: ';, desc: '我的生活全部沉浸在“时间”的急流中，跟了它流下去，没有抬起头来望望这急流的前后的光景的能力' },      { imgUrl: ';, desc: '巴黎的雨下个不停，你终于懂了那是你们回不去的从前，雨停了，你要往前走，就像塞纳河一样' },      { imgUrl: ';, desc: '拥抱的感觉真好，那是肉体的安慰，尘世的奖赏' },      { imgUrl: ';, desc: '女人敢走，是看准了男人会回头。 男人头也不回，是看准了女人不敢走' },      { imgUrl: ';, desc: '不谦而狂的人，狂不到哪里去；不狂而谦的人，真不知其在谦什么' },      { imgUrl: ';, desc: '谁的眼角触得了谁的眉 ； 谁的笑容抵得了谁的泪 ； 谁的心脏载得住谁的轮回 ； 谁的掌纹赎得回谁的罪' },      { imgUrl: ';, desc: '许多地方没有功德水，那是因为当地的人没有功德了。一个地方的水开始污染，表示人心已先污染了' },      { imgUrl: ';, desc: '即使含着泪， 低着眉， 伤心地笑着， 也总要与一些久别的故人， 相见欢' },      { imgUrl: ';, desc: '如果一切生命都不屑于去石缝间寻求立足的天地，那么，世界上将会有一大片地方成为永远的死寂' },      { imgUrl: ';, desc: '那时脑子太灵光了，如同上了油的齿轮，一秒钟不知要转多少圈，智慧弥漫在四周的空气里，伸手一抓就是一大把' },      { imgUrl: ';, desc: '可自从我意识到我自己，我就感知到，我的自我中存在着天生渴望神秘的倾向，渴望艺术化地说谎' },      { imgUrl: ';, desc: '来吧！让暴风雨来得更猛烈一些吧' },      { imgUrl: ';, desc: '离去，让事情变得简单，人们变得善良，像个孩子一样，我们重新开始' },      { imgUrl: ';, desc: '你有情有义，我必不负你赤诚真心' },      { imgUrl: ';, desc: '我们曾如此渴望命运的波澜，到最后才发现：人生最曼妙的风景，竟是内心的淡定与从容' },      { imgUrl: ';, 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

<view class="container">  <scroll-view class="content" scroll-y="true">    <video src="; style='width:100%;' autoplay="true" loop="false"></video>    <view class='view_bg'>      <view wx:for="{{imgUrls}}" wx:key="{{index}}">        <view class="img">          <image bindtap="previewImage" data-src="{{item.imgUrl}}" mode="aspectFill" class='image_style' src='{{item.imgUrl}}'></image>        </view>        <view class='text'>          <text class='details'>{{item.desc}}</text>        </view>      </view>    </view>  </scroll-view></view>

渲染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

<!--pages/invitation/index.wxml--><view class="container">    <image src='; 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

<!--pages/bless/index.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.face}}" />    </view> -->    <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.face}}" /> -->        <image src="{{item.nickImage}}" />      </view>      <view class="chat_words">        <view class="chat_meta">          <text class="chat_user">{{item.nickName}}</text>        </view>        <!-- <view>{{item.words}}</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>

代码很简单，没有很复杂的实现，

最后奉上体验地址：