首先来几个效果图
首先是我们
consthost=''//-----通用图片地址constimageError=''//-----splashconstsplashWave=''constindexHead=''constsplashLoading=''//----背景音乐constmusicLinkTitle='merryMe'constmusicLink=''//----经纬度constlng=111.315370constlat=29.744200constlocName='xxxx'constlocAddress='湖南省xxxxxxxxx村'constshareTitle='诚意邀请您参加我们的婚礼'constsharePath='pages/splash/splash'//-----home//-----my//-----={//image,host,//mobileIn,imageError,splashWave,indexHead,splashLoading,musicLinkTitle,musicLink,lng,lat,locName,locAddress,shareTitle,sharePath}其中定义了我们后台服务器的地址(因为要用到留言等功能)还有一些乱七八糟的常量,包括经纬度,背景音乐等信息
然后是我们的splash页面:
js
wxml
viewclass="container"viewclass="remind-box"wx:if="{{remind}}"imageclass="remind-img"src="{{loading}}"/image/viewblockwx:elsetextclass="title"Wearegettingmarried!/textviewclass="content"viewclass="hd"style="transform:rotateZ({{angle}}deg);"imageclass="logo"src="{{index_head}}"/imageimageclass="wave"src="{{wave}}"mode="aspectFill"/imageimageclass="wavewave-bg"src="{{wave}}"mode="aspectFill"/image/view!--viewclass="index_txt"您好:{{}}/view--buttonclass="confirm-btn"open-type='getUserInfo'bindgetuserinfo='getUserInfo'bindtap="btnEnter"进入/button/view/block/view然后进入到我们的home页面
js
js中定义了当前页面需要用到的图片数组以及一些文案描述等
wxml
viewclass="container"scroll-viewclass="content"scroll-y="true"videosrc=""style='width:100%;'autoplay="true"loop="false"/videoviewclass='view_bg'viewwx:for="{{imgUrls}}"wx:key="{{index}}"viewclass="img"imagebindtap="previewImage"data-src="{{}}"mode="aspectFill"class='image_style'src='{{}}'/image/viewviewclass='text'textclass='details'{{}}/text/view/view/view/scroll-view/view渲染js中的图片数组到页面,然后提供图片preview功能
然后map(导航)页面
主要是从api中拿到经纬度,然后提供导航
wxml
然后就是好友祝福页面
进行稍微的非空判断,然后请求后端提交
wxml
代码很简单,没有很复杂的实现,
最后奉上体验地址: