个人简历小程序

    为了熟练掌握微信小程序开发的一些基本技巧,熟悉微信小程序开发流程,特此,运用所学知识,做了一个个人简历小程序。

效果图如下:

代码如下:

① 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界面。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/474215.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android的Fragment介绍

前言 fragment是从android3.0开始提出来的&#xff0c;用来支持大屏幕设备的ui设计。通过将activity划分为多个fragment&#xff0c;不仅提高了设计的灵活性&#xff0c;而且可以在程序运行时改变它们的特征&#xff0c;比如动态的修改&#xff0c;替换已有的fragment等等。 fr…

[Kaggle] Heart Disease Prediction

文章目录1. 数据探索2. 特征处理管道3. 训练模型4. 预测kaggle项目地址1. 数据探索 import pandas as pd train pd.read_csv(./train.csv) test pd.read_csv(./test.csv)train.info() test.info() abs(train.corr()[target]).sort_values(ascendingFalse)<class pandas.c…

python进程的回收—wait

1.os.wait()回收资源 os.wait()方法用来回收子进程占用的资源&#xff1a; import os import time ret os.fork() # 创建新的进程 一次调用&#xff0c;两次返回 if ret 0: # 子进程执行 # 子进程拿到的返回值是0 print("子进程&#xff1a;pid%d, ppid%d" % (…

Oracle数据库逻辑存储结构管理相关问题与解决

我们在Mysql数据库中&#xff0c;一般是登入进去一个数据库&#xff0c;紧接着就创建数据库实例&#xff1a;create databse XXX;但是在Oracle数据库就不行。在数据库连接过程中老是报监听失败的错误。在备份表空间的时候&#xff0c;设置表空间为备份模式&#xff0c;它提示我…

Python调用C的方法

参考&#xff1a;http://www.cnblogs.com/fxjwind/archive/2011/07/05/2098636.html http://amazingjxq.com/2012/01/09/python%E8%B0%83%E7%94%A8c%E5%87%BD%E6%95%B0/>>>cd /home/jxq/code/gcc -fPIC -shared bob_hash.c -o bob_hash.so然后在python里面用ctypes加载…

01.神经网络和深度学习 W2.神经网络基础

文章目录1. 二分类2. 逻辑回归3. 逻辑回归损失函数4. 梯度下降5. 导数6. 计算图导数计算7. 逻辑回归中的梯度下降8. m个样本的梯度下降9. 向量化10. 向量化的更多例子11. 向量化 logistic 回归12. 向量化 logistic 回归梯度输出13. numpy 广播机制14. 关于 python / numpy 向量…

python中的孤儿进程

1.子进程未运行完父进程就结束运行退出&#xff0c;留下来的子进程就是孤儿进程 2.父进程结束退出&#xff0c;子进程会被继父收回&#xff0c;通常是int进程&#xff08;pid为1&#xff09;无危害 import os import time ret os.fork() # 创建新的进程 一次调用&#xff0…

Oracle数据库物理存储结构管理遇到的问题与解决

问题一&#xff1a;当我创建一个重做日志文件放入重做日志文件组中的时候&#xff0c;查询数据字典发现新创建的重做日志文件的状态为“不合法”。 解决方案&#xff1a; 通过查阅相关资料了解到 新建的重做日志文件组成员状态为INVALID,这是由于新建的成员文件还没有被…

实例讲解hadoop中的map/reduce查询(python语言实现)

条件&#xff0c;假设你已经装好了hadoop集群&#xff0c;配好了hdfs并可以正常运行。 $hadoop dfs -ls /data/dw/explorerFound 1 itemsdrwxrwxrwx - rsync supergroup 0 2011-11-30 01:06 /data/dw/explorer/20111129$ hadoop dfs -ls /data/dw/explo…

python中僵尸进程

⼦进程运⾏完成&#xff0c;但是⽗进程迟迟没有进⾏回收&#xff0c;此时⼦进程实际上并没有退出&#xff0c;其仍然占⽤着系统资源&#xff0c;这样的⼦进程称为僵⼫进程。 因为僵⼫进程的资源⼀直未被回收&#xff0c;造成了系统资源的浪费&#xff0c;过多的僵⼫进程将造成…

01.神经网络和深度学习 W3.浅层神经网络

文章目录1. 神经网络概览2. 神经网络的表示3. 神经网络的输出4. 多样本向量化5. 激活函数6. 为什么需要 非线性激活函数7. 激活函数的导数8. 随机初始化作业参考&#xff1a; 吴恩达视频课 深度学习笔记 1. 神经网络概览 xW[1]b[1]}⟹z[1]W[1]xb[1]⟹a[1]σ(z[1])\left.\begin…

多进程修改全局变量

多进程中&#xff0c;每个进程中所有数据&#xff08;包括全局变量&#xff09;都各有拥有⼀份&#xff0c;互不影响 (读时共享&#xff0c;写时复制) import os import time num 100 ret os.fork() # 创建新的进程 一次调用&#xff0c;两次返回 if ret 0: # 子进程…

多进程模块multiprocessing

multiprocessing模块就是跨平台版本的多进程模块&#xff0c;提供了⼀个Process类来代表一个进程对象 创建⼦进程时&#xff0c;只需要传⼊⼀个执⾏函数和函数的参数&#xff0c;创建⼀个 Process实例&#xff0c;⽤start&#xff08;&#xff09;方法启动 &#xff0c;join()…

01.神经网络和深度学习 W2.神经网络基础(作业:逻辑回归 图片识别)

文章目录编程题 11. numpy 基本函数1.1 编写 sigmoid 函数1.2 编写 sigmoid 函数的导数1.3 reshape操作1.4 标准化1.5 广播机制2. 向量化2.1 L1\L2损失函数编程题 2. 图片&#x1f431;识别1. 导入包2. 数据预览3. 算法的一般结构4. 建立算法4.1 辅助函数4.2 初始化参数4.3 前向…

PL/SQL程序设计以及安全管理实验遇到的问题及解决

问题一&#xff1a;当我书写PL/SQL语句调用所创建的函数时&#xff0c;报“此范围不存在名为XXX函数名”的错误。 解决&#xff1a; 我通过查阅相关资料&#xff0c;了解到&#xff1a;这种情况主要是调用的函数的参数或者函数名书写错误&#xff0c; 然而&#xff0c;我经过仔…

PowerDesigner使用教程 —— 概念数据模型 (转)

一、概念数据模型概述 概念数据模型也称信息模型&#xff0c;它以实体&#xff0d;联系(Entity-RelationShip,简称E-R)理论为基础&#xff0c;并对这一理论进行了扩充。它从用户的观点出发对信息进行建模&#xff0c;主要用于数据库的概念级设计。 通常人们先将现实世界抽…

进程的创建-Process⼦类

from multiprocessing import Process&#xff08;P必须大写 import os import time classSubProcess(Process): """创建Process的子类""" def __init__(self, num, a): super(SubProcess, self).__init__() # 执行父类Process默认的初始化方法…

阿里云 超级码力在线编程大赛初赛 第1场(第245名)

文章目录1. 比赛结果2. 题目1. 树木规划2. 正三角形拼接3. 大楼间穿梭4. 对称前后缀1. 比赛结果 通过了 3 题&#xff0c;第245名&#xff0c;进入复赛了&#xff0c;收获 T恤 一件&#xff0c;哈哈。 2. 题目 1. 树木规划 题目链接 描述 在一条直的马路上&#xff0c;…

python中的进程池Pool

初始化Pool时&#xff0c;可以指定⼀个最大进程池&#xff0c;当有新进程提交时&#xff0c;如果池还没有满&#xff0c;那么就会创建新进程请求&#xff1b;但如果池中达到最大值&#xff0c;那么就会等待&#xff0c;待池中有进程结束&#xff0c;新进程来执行。 非阻塞式&a…