前言：
当前小伙伴们对“html邀请函源码”都比较关心，姐妹们都需要分析一些“html邀请函源码”的相关内容。那么小编在网摘上收集了一些关于“html邀请函源码””的相关内容，希望咱们能喜欢，同学们快快来了解一下吧！首先来几个效果图
首先是我们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>代码很简单，没有很复杂的实现，
最后奉上体验地址：
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #html邀请函源码
