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

首先來幾個效果圖

首先是咱們api.js

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
}

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

而後是咱們的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 = [
  '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

<view class="container">
  <scroll-view class="content" scroll-y="true">
    <video src="https://res.fc.fjqyx.com/328b3c8e85c04a5da372598ffc6ef82d" 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='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.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;
  }
})

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

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>

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

最後奉上體驗地址：