程序员经验分享-hwhale

个人简历小程序

2023-11-06

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

效果图如下：

代码如下：

①　index.js
        const 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界面。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序

个人简历小程序 的相关文章

  • OpenBSD 加速　下载安装

    OpenBSD 安装后需要安装其它软件时候 发现它要自动下载源文件 要不就手动下载 反正就是慢 我发现有个方法可以加快自动安装时候的下载 su root cat gt gt etc mk conf DISTDIR usr files dis

随机推荐

  • 字符串一次编辑

    一次编辑 字符串有三种编辑操作 插入一个字符 删除一个字符或者替换一个字符 给定两个字符串 编写一个函数判定它们是否只需要一次 或者零次 编辑 作者 LeetCode Solution 链接 https leetcode cn proble

  • linux搭建ftp

    ftp一些概念了解 Linux安装vsftpd及配置详解 1 安装 yum y install vsftpd 2 FTP主动模式与FTP被动模式 3 防火墙开启21端口 文中是使用iptables开启的 现在centos7 2版本默认是防火

  • 对el-form-item中的子组件进行必填验证（方法）

    效果图 思路 在el form item中添加show message属性 每次修改子组件值时 对其进行判断修改 部分代码

  • 光通量，光强，亮度，照度

    1 光通量 F 单位时间通过的光量 单位 流明 lm 2 发光强度 光强 I 单位立体角的光通量 I F 单位 坎德拉 cd 3 亮度 L 单位面积光强 L I S sin 单位 坎德拉 平米 cd 4 照度 E 单位面积接受的光通量 E

  • 固定分区存储空间的分配和回收Java代码实现

    目录 一 实验要求 二 实验目的 三 源代码 四 实验结果 五 实验总结 一 实验要求 实现固定分区存储管理方式下存储空间的分配和回收 已知当前内存分配表如下 分区号 起始地址 长度 状态 1 10KB 30KB Job5 2 40KB 7

  • 已知一个整数，如何判断这个整数是无符号的？

    前言 记录6月11日 肯哥在群里面分享的一个问题 说实话 看到题目想了半天没明白 一看答案 才发现 这题真的简单 题目 已知一个整数 如何判断这个整数是无符号的 题解 1 因为我的思路完全是错误的 我就不再此进行乱分析了 肯哥给出的提示是

  • 多维时序

    多维时序 MATLAB实现基于贝叶斯线性回归 Bayesian Regression 的多变量输入回归预测 目录 多维时序 MATLAB实现基于贝叶斯线性回归 Bayesian Regression 的多变量输入回归预测 预测效果 基本介绍

  • harbor 中 使用 push 上传镜像时候 显示 没有认证

    harbor 中 使用 upload 上传镜像时候 显示 没有认证 概述 VMware harbor 安装完成后 使用docker tag 打新的标签 然后 用docker push上传镜像的时候 显示 安全方面的错误 1 客户端显示信息

  • 数据结构知识点总结

    说明 1 本文档为作者考研准备数据结构时期所作笔记 所用资料为王道视频 2 文中少部分内容来源 王道数据结构笔记 3 文中部分图片 文字内容来源于互联网 4 文中一些示例图片由作者绘制 出现错误难以避免 如发现错误 欢迎指出 5 根据网友的

  • 在VREP的模型脚本中使用其他脚本的函数

    VREP是一款用于机器人仿真的软件 最近博主也正在使用此款软件完成机器人工控课程设计 VREP使用的是Lua语言编程的 Lua语言是嵌入式语言 十分方便简单 有C C 语言基础很容易上手 此次工控设计是关于youbot小车在迷宫中寻找随机生

  • 共识算法比较：Tendermint的BFT与EOS的dPoS

    这项技术深入研究由Chjango Unchained编写 本文比较了不同的共识系统 它们为EOS和Tendermint提供了关于每种基础技术以及它们有什么样的独特地类似证明 PoS 能力 在由单个组织运行的传统分布式系统中 信任和安全由防火

  • Windows下安装使用SVN

    Windows下安装使用SVN https www cnblogs com sns007 p 5769393 html

  • Git 学习（二）—— 工作区 — 本地仓库的操作命令

    我们要上传文件到本地仓库 不是直接拷贝进去的 而是需要通过命令一步步上传 从工作区到本地仓库分为了三步 也可以说是三个区域 目录 1 操作命令 1 git init 获取本地仓库 2 git add 工作区 暂存区 3 git commit

  • 关于distcc安装和使用

    distcc a fast free distributed C C compiler NEWS distcc 3 1 released Distcc release 3 1 is now available at Downloads Se

  • java 是怎么在中删除下拉列表_删除在一个下拉列表字段中选择的选项，并且不显示在该行中存在的其他下拉列表中不工作-jquery...

    我有一个包含多列的html表 在两列中我显示下拉列表 当用户从一个下拉列表中选择值时 选择Product1或Select Product2下拉列表 我想删除在一个下拉列表中选择的选项 并且不要在另一个下拉列表中显示该选项 下面的示例代码适用

  • Springboot 集成Druid

    Springboot 集成Druid Druid是Java语言中最好的数据库连接池 Druid能够提供强大的监控和扩展功能 本篇主要讲解一下 Springboot中如何集成 Druid 1 添加Druid依赖

  • QML 信号 槽 传递参数

    详细的C QML 的信号与槽 初学者教程 请参考该文 QML 中信号和槽之间传递参数并不需要在连接的时候特别声明 只需要将其关联在一起即可 main qml import QtQuick 2 13 import QtQuick Contro

  • flask web 01--基础入门案例

    flask web 01 基础入门案例 1 介绍 2 功能说明 3 源码分析 3 1 功能 3 2 源码 3 3 测试结果 4 注意事项 5 说明 1 介绍 最近由于需要 开始补了一些python web相关的技能 考虑到高效和简洁 就补了

  • Spring Boot 依赖注入

    Spring Boot 依赖注入 SpringBoot的实现方式基本都是通过注解实现的 跟Spring注解注入差不多 相关的常见注解有Autowired Resource Qualifier Service Controller Repos

  • 个人简历小程序

    为了熟练掌握微信小程序开发的一些基本技巧 熟悉微信小程序开发流程 特此 运用所学知识 做了一个个人简历小程序 效果图如下 代码如下 index js const app getApp Page data userInfo hasUserIn

热门标签