首先來幾個效果圖
首先是我們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>
代碼很簡單，沒有很複雜的實現，
最後奉上體驗地址：