为了熟练掌握微信小程序开发的一些基本技巧，熟悉微信小程序开发流程，特此，运用所学知识，做了一个个人简历小程序。
效果图如下：
代码如下：
① index.jsconst app = getApp()
Page({
data: {
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
user:{
name:"",
phone:"123456789123",
email:"123456789@qq.com"
}
},
//事件处理函数
bindViewTap: function () {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse) {
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function (e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})③ index.wxml
<view class="container">
<view class='Top'>
<image src='../../utils/images/bak.jpg' class='Top-background'></image>
<view class='Top-left Top-View'>
<image class='Top-img' src='../../utils/images/PersonalHeadImg.jpeg'></image>
</view>
<view class='Top-right Top-View'>
<view>姓名：{{user.name}}</view>
<!-- 点击事件 -->
<view >手机：{{user.phone}}
</view>
<view>邮箱：{{user.email}}</view>
</view>
</view>
<view class='main'>
<navigator url='../basicsituation/index' class='main-to'>
<view class='main-view'>
<view class='main-view-item' hover-class="main-view-item-hover">--基本情况--</view>
</view>
</navigator>
<navigator url='../experience/index' class='main-to'>
<view class='main-view'>
<view class='main-view-item' hover-class="main-view-item-hover">--学习经历--</view>
</view>
</navigator>
<navigator url='../skill/index' class='main-to'>
<view class='main-view'>
<view class='main-view-item' hover-class="main-view-item-hover">--特点擅长--</view>
</view>
</navigator>
<navigator url='../reward/index' class='main-to'>
<view class='main-view'>
<view class='main-view-item' hover-class="main-view-item-hover">--获奖奖励--</view>
</view>
</navigator>
</view>
</view>④ Index.wxss
.Top{
position: relative;
padding-top: 50rpx;
width: 100%;
height: 450rpx;
}.Top-View{
width: 50%;
height: 260rpx;
float: left;
}
.Top-right view{
font-size: 32rpx;
margin: 30rpx auto;
width: 100%;
height: 40rpx;
overflow: hidden;
}
.Top-background{
position: absolute;
width: 100%;
height: 500rpx;
top: 0px;
left: 0px;z-index: -1;
}
.Top-left{
width: 40%;
}
.Top-img{
width: 200rpx;
height: 200rpx;
border-radius: 50%;
margin: 50rpx;
}
.Top-right{
width: 60%;
color: white;
padding-top: 40rpx;
}.Top-font{
position: absolute;
bottom: 0rpx;
left:17%;
}
.main{
width: 100%;
height: auto;
/* margin-top: 100rpx; */
border-top: 1px solid #0E426A;
}.main-view{
width: 100%;
height: 140rpx;
line-height: 120rpx;
border-bottom: 1px solid #0E426A;
clear: both;
}
.main-view-item{
width: 100%;
text-align: center;
background-color:#b3d4db;
}
.main-view-item-hover{
width: 100%;
text-align: center;
background-color:#1ac2e4;
}① Index.js
Component({
/**
* 组件的属性列表
*/
properties: {},/**
* 组件的初始数据
*/
data: {
hiddenVideo: true},/**
* 组件的方法列表
*/
methods: {
click: function () {
this.setData({
hiddenVideo: !this.data.hiddenVideo
})
}},
})Index.json
{
"component": true,
"usingComponents": {},
"navigationBarTitleText": "基本情况"
}③ Index.wxss
.education{
width: 100%;
height: auto;
}.header{
width: 100%;
height: 400rpx;
background-image: url('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4231578138,2286783346&fm=27&gp=0.jpg')
}
.h-img{
width: 100%;
height: 400rpx;
}
.main{
width: 100%;
height: auto;
}
.main-title{
width: 100%;
height: 100rpx;
background: #d6d6d6;
text-align: center;
line-height: 100rpx;
padding-left: 20rpx;
}
.m-view{
width: 90%;
padding: 20rpx 10rpx;
margin: 0 auto;
font-size: 32rpx;
}④ Index.wxml
<view class='education'>
<view>
<view class='header'>
<video custom-cache="false" hidden="{{hiddenVideo}}" class='header' src='http://mvvideo1.meitudata.com/575c2b652d7375255.mp4'>
</video>
</view>
</view>
<view class='main'>
<view class='main-title' bindtap="click">点击显示个人介绍视频</view>
<view class='school m-view'>就读院校：大学</view>
<view class='m-view'>目前学历： 本科</view>
<view class='m-view'>所学专业： 软件设计与开发</view>
<view class='m-view'>外语：六级</view>
<view class='m-view'>自我评价：
<text>
性格沉稳，对工作认真负责，纪律性和适应性强。
长得帅气，善良,大方,学习态度认真，自我感觉良好！
</text>
</view>
</view>
</view>① Index,js
Page({/**
* 页面的初始数据
*/
data: {},/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {},/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {}
})③ Index.wxss
page{
height: 100%;
background-color:#b3d4db;
}
.container{
width: 100%;
height: 100%;
}
.myphoto{
width: 28%;
height: 20%;
border-radius: 100%;
margin-left: 36%;
margin-top:10%;
}
.main{
height:79%;
width: 100%;
}
.main-text{
font-size: 20px;
color: #405f80;
font-family: '楷体'
}
.main-view-item{
border-radius: 10px;
height: 16%;
width: 80%;
margin: 6px auto;
border:2px solid gray;
padding-left:4px;
background-color:#b3d4db;
}
④ Index.wxml
<view class="container"><image class="myphoto" src="../../utils/images/PersonalHeadImg.jpeg"></image>
<view class="main">
<view class="main-view-item">
<text class="main-text">1.小程序部分内容纯属虚构</text>
</view>
<view class="main-view-item">
<text class="main-text">2.基本情况有一个“点击显示个人视频”</text>
</view>
<view class="main-view-item">
<text class="main-text">3.学习经历与特点擅长页面均有一个滑块视图</text>
</view>
<view class="main-view-item">
<text class="main-text">4.技能页面采用进度条组件显示</text>
</view></view></view>(4)Experience
① Index,js
Component({
/**
* 组件的属性列表
*/
properties: {
},/**
* 组件的初始数据
*/
data: {
},/**
* 组件的方法列表
*/
methods: {}
})② Index.json
{
"component": true,
"navigationBarTitleText": "学习经历"
}③ Index.wxss.experience{
width: 100%;
height: auto;
}
.header{
width: 100%;
height: 400rpx;
position: relative;
}
.header image{
width: 100%;
height: 400rpx;
position: absolute;
left: 0rpx;
top: 0rpx;
z-index: -1;
}
.main{
width: 100%;
height: auto;
margin-top: 40rpx;
}
.m-box{
width: 100%;
float: right;
height: auto;
}
.m-view{
width: 100%;
height: auto;
position: relative;
padding-top: 30rpx;
}
.m-view image{
width: 44rpx;
height: 44rpx;
position: absolute;
left: -22rpx;
top: 0rpx;
z-index: 100;
background: #fff;
}
.m-view .view-text{
width: 90%;
height: auto;
margin-left: 60rpx;
font-size: 32rpx;
padding: 40rpx 0rpx;
}④ Index.wxml<view class='experience'>
<view class='header'>
<swiper interval='5000' duration='1000' autoplay='true'>
<swiper-item>
<image src="../../utils/images/swiper1.jpg">
</image>
</swiper-item>
<swiper-item>
<image src="../../utils/images/swiper2.jpg">
</image>
</swiper-item>
<swiper-item>
<image src="../../utils/images/swiper3.jpg">
</image>
</swiper-item>
</swiper>
<!-- <image src="../../utils/images/swiper1.jpg"></image> -->
</view><view class='main'>
<view class='m-box'>
<view class='m-view'>
<view class='view-text'><view>2004年9月至2010年6月XXXXXX小学。</view> </view>
</view><view class='m-view'>
<view class='view-text'><view>2010年9月至2013年6月就读于XXXXXX中学。</view> </view>
</view><view class='m-view'>
<view class='view-text'><view>2013年9月至2016年6月就读于XXXXXXXXX中学。</view> </view>
</view>
<view class='m-view'>
<view class='view-text'><view>20016年9月至今就读于XXXXXXXXX大学。</view>
</view>
</view>
</view>
</view>
</view>(5)Reward
① Index,js
Component({
/**
* 组件的属性列表
*/
properties: {},/**
* 组件的初始数据
*/
data: {
project:[
{
"name":"拍摄电影项目",
"text":"web网站",
"src":"../../utils/images/reward1.jpg"
},{
"name": "华三通信的项目",
"text": " web网站",
"src": "../../utils/images/reward2.jpg"
},{
"name": "酒店管理系统",
"text": "java程序",
"src": "../../utils/images/reward3.png"
},{
"name": "UNIX服务器",
"text": "硬件编程",
"src": "../../utils/images/reward4.jpg"
}]
},/**
* 组件的方法列表
*/
methods: {}
})② Index.json
{
"component": true,
"usingComponents": {},
"navigationBarTitleText": "获奖情况"
}③ Index.wxss
.project{
width: 100%;
height: auto;
}
.p-view{
width: 100%;
height: auto;
text-align: center;
margin-top: 40rpx;
}
.p-view image{
width: 90%;
height: 400rpx;
margin: 0 auto;
}
.p-text{
width: 85%;
height: auto;
text-align: left;
font-size: 32rpx;
background: #D6D6D6;
padding: 20rpx;
border-radius: 6rpx;
margin: 10rpx auto;
}
.p-text-l{
display: inline-block;
width: 50%;
height: auto;
text-align: center;
}
.p-text-r{
display: inline-block;
width: 50%;
height: auto;
text-align: center;
}④ Index.wxml
<view class='project'>
<view class='p-view' wx:for="{{project}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<image src='{{item.src}}'></image>
<view class='p-text'>
<text class='p-text-l'>{{item.name}}</text>
<text class='p-text-r'>{{item.text}}</text>
</view>
</view>
</view>(6)Skill
① Index.js
Component({
/**
* 组件的属性列表
*/
properties: {},/**
* 组件的初始数据
*/
data: {
Skill:[
{
name:"移动Adroid",
num:"93",
color:"#2980b9",
}, {
name: "HTML/CSS3",
num: "95",
color: "#c0392b",
}, {
name: "Ajax",
num: "24",
color: "#d35400",
}, {
name: "网络编程",
num: "86",
color: "#27ae60",
}, {
name: "C语言",
num: "66",
color: "#2F3C4F",
},
],
Skill2:[
{
name: "口语表达",
num: "60",
color: "#E2F355",
},
{
name: "心理素质",
num: "64",
color: "#E0B050",
},
{
name: "打篮球",
num: "89",
color: "#A0F050",
},
{
name: "交际能力",
num: "83",
color: "#E5E050",
},
],
},/**
* 组件的方法列表
*/
methods: {}
})② Index.json
{
"component": true,
"usingComponents": {},
"navigationBarTitleText": "特点擅长"
}③ Index.wxss
<view class='skill'>
<view class='logo'>
<!-- Skills -->
<swiper interval='5000' duration='1000' autoplay='true'>
<swiper-item>
<image src="../../utils/images/skill.jpg">
</image>
</swiper-item>
<swiper-item>
<image src="../../utils/images/skill1.jpg">
</image>
</swiper-item>
<swiper-item>
<image src="../../utils/images/skill3.jpg">
</image>
</swiper-item>
</swiper>
</view>
<text class='title'>编程技能：</text>
<view class='header'>
<view class='h-div' wx:for="{{Skill}}" wx:index="index" wx:item="item" wx:key="index">
<text>{{item.name}}</text>
<text class='h-text-right' >{{item.num}}</text>
<view class='h-box'>
<progress percent="{{item.num}}" active activeColor='{{item.color}}' />
</view>
</view>
</view>
<text class='title'>生活技能：</text>
<view class='header'>
<view class='h-div' wx:for="{{Skill2}}" wx:index="index" wx:item="item" wx:key="index">
<text>{{item.name}}</text>
<text class='h-text-right' >{{item.num}}</text>
<view class='h-box'>
<progress percent="{{item.num}}" active activeColor='{{item.color}}' />
</view>
</view>
</view></view>
④ Index.wxml
.skill{
width: 100%;
height: auto;
margin: 0rpx;
padding: 0rpx;
}
.logo{
width: 100%;
height: 400rpx;
position: relative;
margin-bottom: 30rpx;
}
.logo image{
width: 100%;
height: 400rpx;
position: absolute;
top: 0px;
left: 0px;
}
.header{
width: 100%;
height: auto;
}
.title{
font-size: 56rpx;
padding:40rpx 20rpx;
}
.h-div{
height: 110rpx;
width: 100%;
/* border: 1px solid red; */
}
.h-div text{
padding: 10rpx 40rpx;
font-size: 30rpx;
}
.h-div .h-box{
width: 90%;
margin: 0 auto;
margin-top: 20rpx;
}
.h-text-right{
float: right;
}
(7)app.json
{
"pages": [
"pages/index/index",
"pages/basicsituation/index",
"pages/experience/index",
"pages/skill/index",
"pages/reward/index",
"pages/logs/logs",
"pages/description/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#b3d4db",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"tabBar": {
"list": [
{
"pagePath": "pages/description/index",
"text": "说明",
"iconPath": "utils/images/b2.png",
"selectedIconPath": "utils/images/b1.png"
},
{
"pagePath": "pages/index/index",
"text": "个人主页",
"iconPath": "utils/images/a1.png",
"selectedIconPath": "utils/images/a2.png"
}
]
}
}- 如何理解小程序的宿主环境？
小程序的运行环境包括渲染层和逻辑层，WXML 和 WXSS 工作在渲染层，JS 脚本工作在逻辑层。如下图所示，渲染层与逻辑层分别与Native（微信客户端）进行数据交换，Native发出HTTPS请求给第三方服务器，然后收到Web套接字信息，将信息返回渲染层与逻辑层。值得注意的是，一个小程序存在多个界面，故由多个WebView(视图层),每一个WebView和JS脚本均由一个线程进行管理。
开发UI界面过程中，程序需要维护很多变量状态，同时要操作对应的UI元素。这就引入“数据驱动”的概念，它可以让状态和视图绑定在一起（状态变更时，视图也能自动变更），WXML结构实际上等价于一棵Dom树，通过一个JS对象也可以来表达Dom树的结构，WXML可以先转成JS对象，然后再渲染出真正的Dom树。
如图所示：小程序的逻辑层和渲染层是分开的两个线程。在渲染层，宿主环境会把WXML转化成对应的JS对象，在逻辑层发生数据变更的时候，我们需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层，再经过对比前后差异，把差异应用在原来的Dom树上，渲染出正确的UI界面。
![[Kaggle] Heart Disease Prediction](https://img-blog.csdnimg.cn/20200824195738168.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxMjAxMjY3,size_16,color_FFFFFF,t_70#pic_center)
![[编程启蒙游戏] 2. 奇偶数](https://img-blog.csdnimg.cn/20200829205657618.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxMjAxMjY3,size_16,color_FFFFFF,t_70#pic_center)
