微信小程序的話，雖然很早就出來了，不過自己沒有在工作中實際寫過，覺得非常的遺憾。
雖然也可以在github上面找一些小程序來看，不過畢竟不是一步一步自己寫的，還是會覺得缺陷感
這個是我跟着慕課網學的第一個小程序，總算是熟悉了小程序的基本套路
1.我很早以前就註冊過小程序，不過在配後端那裏遇到了問題，現在重新寫小程序還需要解綁之前過期的小程序，哇，就是要手持身份證挺討厭的
2.這個項目很基礎啦，不過算是打開寫小程序的思路，今天發佈的小程序，不過審覈時間比較長呢，放了二維碼也會沒有體驗權限啦
先看下一下我做的小程序的效果
接着我們看一下代碼
代碼很簡單主要是用到了swiper組件，然後將數據，寫到js文件中，讓其渲染頁面，flex佈局這些我工作中都會用到。
<swiper style="height:{{height}}px">
<swiper-item>
<image src="../img/photo.jpg" mode="widthFix" class="photo"></image>
<view class="cover-info">
<text class="cover-name">{{name}}</text>
<text class="cover-spell">{{spell}}</text>
<view class="big-circle"></view>
<view class="medium-circle"></view>
<view class="small-circle"></view>
<view class="small1-circle"></view>
<view class="cover-work">
<text class="cover-job">{{job}}</text>
<text class="cover-exp">{{exp}}</text>
</view>
</view>
<view class="navigation">
遇見我
<image src="../img/arrow-right.png" class="arrow-right"></image>
</view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" style="height:{{height}}px">
<view class="resume">
<view class="section">
<view class="section-info">
<view class="section-seq">1</view>
<view class="section-title">基本資料</view>
</view>
<view class=" column col-2">
<text class="info">姓名：{{name}}</text>
<text class="info">電話：{{tel}}</text>
</view>
<view class=" column col-2">
<text class="info">性別：{{sex}}</text>
<text class="info">年齡：{{age}}</text>
</view>
<view class=" column col-1">
<text class="info">郵箱：{{email}}</text>
</view>
<view class=" column col-1">
<text class="info">住址：{{address}}</text>
</view>
</view>
<view class="section">
<view class="section-info">
<view class="section-seq">2</view>
<view class="section-title">主要欄目</view>
</view>
<view class="skill" wx:for="{{skill}}" wx:key="item">
<text class="skill-name">{{item.name}}</text>
<progress class="process" percent="{{item.percent}}" stroke-width="5"></progress>
</view>
</view>
<view class="section">
<view class="section-info">
<view class="section-seq">3</view>
<view class="section-title">3333</view>
</view>
<view class="education" wx:for="{{education}}" wx:key="item">
<view class="school">
<image src="../img/icon_school.png" class="icon-school"></image>
<text>{{item.school}}</text>
</view>
<view class="row">
<view class="info">
<image src="../img/icon_book.png" class="icon-book"></image>
<text>{{item.major}}</text>
</view>
<view class="info">
<image src="../img/icon_calendar.png" class="icon-calendar"></image>
<text>{{item.major}}</text>
</view>
</view>
<rich-text class="desc">{{item.desc}}</rich-text>
</view>
</view>
<text class="page">1/4</text>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" style="height:{{height}}px">
<view class="resume">
<view class="section">
<view class="section-info">
<view class="section-seq">4</view>
<view class="section-title">experience</view>
</view>
<view class="work" wx:for="{{work}}" wx:key="item">
<view class="company">
<image src="../img/icon_company.png" class="icon-company"></image>
<text>{{item.company}}</text>
</view>
<view class="row">
<view class="info">
<image src="../img/icon_job.png" class="icon-job">
</image>
<text>{{item.job}}</text>
</view>
<view class="info">
<image src="../img/icon_calendar.png" class="icon-calendar"></image>
<text>{{item.major}}</text>
</view>
</view>
<rich-text class="desc">{{item.desc}}</rich-text>
</view>
<text class="page">2/4</text>
</view>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" style="height:{{height}}px">
<view class="resume">
<view class="section">
<view class="section-info">
<view class="section-seq">5</view>
<view class="section-title">experience</view>
</view>
<view class="project" wx:for="{{project}}" wx:key="item">
<view class="project-name">
<image src="../img/icon_computer.png" class="icon-computer"></image>
<text>{{item.name}}</text>
</view>
<rich-text class="desc">{{item.desc}}</rich-text>
</view>
<text class="page">3/4</text>
</view>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" style="height:{{height}}px">
<view class="resume">
<view class="section">
<view class="section-info">
<view class="section-seq">6</view>
<view class="section-title">interdouce</view>
</view>
</view>
<view class="project">
<rich-text class="desc">
{{introduction}}
</rich-text>
</view>
<text class="page">4/4</text>
</view>
</scroll-view>
</swiper-item>
</swiper>
// pages/index.js
Page({
/**
* 頁面的初始數據
*/
data: {
width:0,
height:0,
name:'dimple',
spell:'jser_dimple',
job:'花式跳繩達人',
exp:'2年半',
name:'dimple',
tel:'13265483900',
sex:'女',
email:'[email protected]',
address:'深圳',
skill:[
{name:'單腿跳',percent:60},
{name:'交錯跳繩',percent:89},
{name:'正反跳',percent:45},
{name:'左右跳',percent:99}
],
education:[
{
school:'天字一號花式跳繩大學',
major:'big跳繩達人',
year:'2012-2016',
desc:'讓人驚豔的跳繩達人，擁有無語倫比的魅力'
},
{
school:'佛字一號花式跳繩社會研究院',
major:'頂尖的花式跳繩選手',
year:'2016-2020',
desc:'爲什麼遇見她，時光都停駐，這花式跳繩的魅力'
}
],
work:[
{
company:'花式大大一',
job:'花式跳繩達人',
year:'2016-2018',
desc:'用功的花式達人'
},
{
company:'花式大大二',
job:'花式超級達人',
year:'2018-2020',
desc:'花式達人擁有超越花式達人的魅力'
},
{
company:'花式大大一1',
job:'花式跳繩達人',
year:'2016-2018',
desc:'用功的花式達人'
},
{
company:'花式大大二2',
job:'花式超級達人',
year:'2018-2020',
desc:'花式達人擁有超越花式達人的魅力'
},
{
company:'花式大大一2',
job:'花式跳繩達人',
year:'2016-2018',
desc:'用功的花式達人'
},
{
company:'花式大大二2',
job:'花式超級達人',
year:'2018-2020',
desc:'花式達人擁有超越花式達人的魅力'
},
],
project:[
{
name:'美麗花式跳繩一',
desc:'展現了高超的花式跳繩技巧'
},
{
name:'美麗花式跳繩二',
desc:'花式跳繩是生活中的一部分，讓人無與倫比的快樂'
},
{
name:'美麗花式跳繩一1',
desc:'展現了高超的花式跳繩技巧'
},
{
name:'美麗花式跳繩二1',
desc:'花式跳繩是生活中的一部分，讓人無與倫比的快樂'
},
{
name:'美麗花式跳繩一2',
desc:'展現了高超的花式跳繩技巧'
},
{
name:'美麗花式跳繩二2',
desc:'花式跳繩是生活中的一部分，讓人無與倫比的快樂'
}
],
introduction:'大家好鴨，我是花式跳繩達人dimple，我很闊愛，很喜歡跳繩鴨~很喜歡交朋友呢，我們有機會一起交流技術鴨~認識你真的好開心鴨~'
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命週期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命週期函數--監聽頁面顯示
*/
onShow: function () {
var width = wx.getSystemInfoSync().windowHeight
var height = wx.getSystemInfoSync().windowHeight
this.setData({
width:width,
height:height
})
},
/**
* 生命週期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命週期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
/* pages/index.wxss */
.photo{
display: block;
width: 90%;
margin-left: auto;
margin-right: auto;
position: fixed;
bottom: 0;
}
.cover-info{
position: absolute;
left: 50px;
top: 30px;
}
.cover-name{
font-size: 30px;
font-weight: bold;
display: block;
letter-spacing: 1px;
}
.cover-spell{
font-size: 20px;
letter-spacing: 1px;
}
.big-circle{
background-color: rgba(0,165,34,0.7);
width: 260px;
height: 260px;
border-radius: 130px;
position: absolute;
left: -200px;
top: 110px;
}
.medium-circle{
background-color: rgba(0,165,34,0.7);
width: 160px;
height: 160px;
border-radius: 80px;
position: absolute;
right: -280px;
top: 170px;
}
.small-circle{
background-color: rgba(0,165,34,0.7);
width: 50px;
height: 50px;
border-radius: 25px;
position: absolute;
left: 60px;
top: 60px;
}
.small1-circle{
background-color: rgba(0,165,34,0.7);
width: 80px;
height: 80px;
border-radius: 40px;
position: absolute;
left: 190px;
top: 110px;
}
.cover-work{
position: absolute;
top: 300px;
left: 180px;
text-align: center;
background: rgba(0,0,0,0.2);
padding: 20px 0;
width: 100%;
}
.cover-job{
display: block;
color: #fff;
font-size: 30px;
font-weight: bold;
}
.cover-exp{
display: block;
color: #fff;
font-size: 20px;
}
.navigation{
position: absolute;
top: 40px;
right: 10px;
font-size: 18px;
}
.arrow-right{
width: 20px;
height: 20px;
vertical-align: -3px;
}
.resume{
margin: 0 20px;
}
.section{
}
.section-info{
display: flex;
border-bottom: 1px solid #333;
padding-bottom: 5px;
/* margin: 10px 0; */
margin-top: 10px;
margin-bottom: 10px;
}
.section-seq{
background-color: #444;
width: 22px;
height: 22px;
color: #fff;
text-align: center;
line-height: 22px;
font-weight: bold;
margin-top: 3px;
}
.section-title{
font-size: 20px;
}
.column{
font-size: 16px;
border-bottom: dashed 1px #333;
padding:10px 0;
}
.col-2{
column-count: 2;
}
.info{
display: block;
}
.col-1{
column-count: 1;
}
.skill{
padding: 5px 0;
}
.skill-name{
font-size: 16px;
display: block;
margin-bottom: 5px;
}
.education,.work,.project{
border-bottom: dashed 1px #999;
padding: 10px 0;
}
.education:last-of-type{
border-bottom: none;
}
.school,.company,.project-name{
font-size: 18px;
margin-bottom: 10px;
}
.icon-school{
width: 26px;
height: 26px;
vertical-align: -6px;
margin-right: 5px;
}
.row{
display: flex;
justify-content: space-between;
}
.info{
font-size: 16px;
margin-bottom: 10px;
}
.icon-book{
width:16px;
height: 16px;
vertical-align: -2px;
margin-right: 3px;
}
.icon-calendar{
width: 17px;
height: 17px;
vertical-align: -2px;
margin-right: 3px;
}
.desc{
color: #999;
line-height: 1.5;
}
.page{
display: block;
width: 100%;
text-align: center;
font-size: 14px;
padding-bottom: 15px;
}
.work:last-of-type{
border-bottom: none;
}
.icon-company{
width: 22px;
height: 22px;
vertical-align: -4px;
margin-right: 5px;
}
.icon-job{
width: 18px;
height: 18px;
vertical-align: -3px;
margin-right: 3px;
}
.icon-computer{
width: 26px;
height: 26px;
vertical-align: -6px;
margin-right: 5px;
}
.project:last-of-type{
border-bottom: none;
}
其實我覺得這樣寫的小程序沒有章法，比如vertical-align:-3px，可能我固有思想是盒子模型吧，老覺得直接這樣用很難受
期待我關注更多的小程序