首先来几个效果图
首先是我们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>
代码很简单,没有很复杂的实现,
最后奉上体验地址:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。