徒手來一個結婚邀請函小程序

首先來幾個效果圖

首先是我們api.js

<code>const host = 'https://alterem.top/merry/app/'

//-----通用圖片地址
const imageError = 'https://i.loli.net/2018/11/15/5bed72ab15f55.png'

//-----splash
const 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.315370
const lat = 29.744200
const 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
}
/<code>

其中定義了我們後臺服務器的地址（因為要用到留言等功能）還有一些亂七八糟的常量，包括經緯度，背景音樂等信息

然後是我們的splash頁面：

js

<code>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: '分享取消',
        })
      }
    }
  }
})
/<code>

wxml

<code>
  
    
  
  
    We are getting married!
    
      
        
         

        
      
       
      
    
  
/<code> 

然後進入到我們的home頁面

js

<code>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',
  '//p2.ttnews.xyz/5fcfcccae960a9acc57f59d0.jpg',
  '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: '//p2.ttnews.xyz/5fcfcccae960a9acc57f59d0.jpg', 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: '分享取消',
        })
      }
    }
  }
})/<code> 

js中定義了當前頁面需要用到的圖片數組以及一些文案描述等

wxml

<code>
  
    

    
      
        
          
        
        
          {{item.desc}}
        
      
    
  
/<code>

渲染js中的圖片數組到頁面，然後提供圖片preview功能

然後map（導航）頁面

<code>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: '分享取消',
        })
      }
    }
  }
})/<code>

主要是從api中拿到經緯度，然後提供導航

wxml

<code> 


    
     

/<code>

地址綁定了markertap，點擊即可跳轉到當前位置到目的地的導航功能

然後就是 好友祝福 頁面

<code>// pages/bless/index.js
var 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;
  }
})/<code>

進行稍微的非空判斷，然後請求後端提交

wxml

<code> 


  已收到 {{zanLog.length}} 位好友的祝福
  點擊下方按鈕為我們送上祝福吧

  
     
    
  
  
    
      
    
    
      
    
  

  
    
      
         
         

      
      
         
         
        {{item.comment}}
      
    
  
  
    
      
    
  
  
    
      
      
    
  
/<code> 

代碼很簡單，沒有很複雜的實現，

最後奉上體驗地址：