首先写好小程序的标题
"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor":"#ff6600","navigationBarTitleText": "大司马and马化腾",//标题"navigationBarTextStyle": "white"},
然后定义几个页面
"tabBar": {"list": [{"pagePath": "pages/index/index","text": "one","iconPath": "/pages/static/home.png","selectedIconPath": "/pages/static/home-active.png"},{"pagePath": "pages/message/message","text": "two","iconPath": "/pages/static/message.png","selectedIconPath": "/pages/static/message-active.png"},{"pagePath": "pages/pro/pro","text": "three","iconPath": "/pages/static/profile.png","selectedIconPath": "/pages/static/profile-active.png"},{"pagePath": "pages/contact/contact","text": "four","iconPath": "/pages/static/contact.png","selectedIconPath": "/pages/static/contact-active.png"}]},
第一个页面可以写个轮播
<view class="slider"><swiper style='height:{{Hei}}' autoplay="{{autoplay}}" indicator-dots="{{indicatorDots}}" interval="{{interval}}" duration="{{duration}}" ><swiper-item wx:for="{{list1}}" wx:for-item="t" wx:key="id"><image src="{{t.imageurl}}" mode="widthFix" bindload="imgH"></image></swiper-item></swiper></view>
图片地址写在js里面
图片可以上传到路过图床上然后再把url写到js上(这里以三生三世图片为例)
data: {list1:[{id:1,imageurl:"//09/10/wJqq4P.jpg"},{id:2,imageurl:"//09/10/wJqq4P.jpg"},{id:3,imageurl:"//09/10/wJqq4P.jpg"},{id:4,imageurl:"//09/10/wJqq4P.jpg"},{id:5,imageurl:"//09/10/wJqq4P.jpg"},{id:6,imageurl:"//09/10/wJqq4P.jpg"},{id:7,imageurl:"//09/10/wJqq4P.jpg"},{id:8,imageurl:"//09/10/wJqq4P.jpg"},{id:9,imageurl:"//09/10/wJqq4P.jpg"}],indicatorDots:true,autoplay:true,interval:5000,duration:1300,bg:'#C79C77',Hei:""},imgH:function(e){var winWid = wx.getSystemInfoSync().windowWidth;var imgh=e.detail.height;var imgw=e.detail.width;var swiperH = winWid*imgh/imgw+"px"this.setData({Hei:swiperH // 设置高度})},
.slider,.slider swiper,image{width: 100%;}
效果图：
第二个页面可以写个小明信片
<view><view class="first-view"><text class="text1">宝贝的成果\n</text><text class="text2">-07-09</text><view class="divLine"></view><image src="//08/26/dfQN28.jpg">\n</image><text class="text3">坚持不懈的宝贝~</text><view class="divLine"></view><text class="text4">是最漂亮的！</text></view></view>
page{height: 100%; background-color:#F5F5F5; }.first-view,.first-view-3{background: white;margin: 60rpx 20rpx 10rpx 20rpx;border-color: gray;border-spacing: 5rpx;border-style: groove;border-width: 2rpx;padding: 25rpx;}.first-view image{width: 100%;height: 430rpx;}.first-view-3 image{width: 100%;height: 460rpx;}.divLine{background: #E0E3DA;width: 100%;height: 5rpx;margin-top: 20rpx;margin-bottom: 20rpx;justify-content: center;/**水平居中**/}.text2{margin-top: 20rpx;font-size: 20rpx;font-weight: 100;}.text3{margin-top: 20rpx;font-size: 30rpx;font-weight: 100;}.text4{margin-top: 20rpx;font-size: 25rpx;font-weight: 100;}
效果图：
第三个页面可以添加一些彼此之间的回忆和第一个页面一样制作成轮播，也可以添加一些其它好的想法
第四个页面可以写一个自己的告白对话，下面是记录恋爱时间的js实现代码和css炫彩字体的样式：
data: {dates:[],h:[],m:[],s:[],},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this;setInterval(function () {var t1 = new Date("/11/03 00:00:00")var t2 = new Date()var t = new Date(t2 - t1 + 16 * 3600 * 1000)that.setData({dates: parseInt(t.getTime() / 1000 / 3600 / 24),h: t.getHours(),m: t.getMinutes(),s: t.getSeconds()})}, 1000)},
page{height:100%;}.background {width: 100%;height: 100%;position:fixed; background-size:100% 100%;z-index: -1;}.logo {font-weight: 600;font-size: 20px;font-family: "楷体";color: #8c888b;background: -webkit-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);/* -moz-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);-ms-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5); */color: transparent;/*设置字体颜色透明*/-webkit-background-clip: text; background-clip: text;/*背景裁剪为文本形式*/animation: ran 10s linear infinite;/*动态10s展示*/}@keyframes move {0% {background-position: 0 0;}100% {/*宽度固定，如果为百分比背景不会滚动*/background-position: -300px 0;}}.wrap {/*设置背景渐变色*/background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange,yellow, green, yellow, orange, red);/*chrome私有样式，加前缀，文字显示背景图片*/-webkit-background-clip: text;background-clip: text;animation: move 10s infinite;/*文字颜色设为透明*/color: transparent;/*宽度固定*/width: 300px;font-size: 20px;font-family: "楷体";}.wrap1 {/*设置背景渐变色*/background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange,yellow, green, yellow, orange, red);/*chrome私有样式，加前缀，文字显示背景图片*/-webkit-background-clip: text;background-clip: text;animation: move 10s infinite;/*文字颜色设为透明*/color: transparent;/*宽度固定*/width: 300px;font-size: 22px;font-family: "楷体";}
效果图如下：
背景图设置：
<image class='background' src="//08/27/d4xOjf.jpg" mode="aspectFill"></image>
.background {width: 100%;height: 100%;position:fixed; background-size:100% 100%;z-index: -1;}
《注：没有发布可以通过预览分享二维码给你的那个她用手机观看，但是需要添加她为项目成员》
如果有其它好的建议欢迎评论区call我，谢谢
