精华内容
下载资源
问答
  • 个人简历小程序

    千次阅读 2019-08-24 13:07:07
    为了熟练掌握微信小程序开发的一些基本技巧,熟悉微信小程序开发流程,特此,运用所学知识,做了一个个人简历小程序。 效果图如下: 代码如下: ① index.js const app = getApp() Page({ data: { ...

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

    效果图如下:

    代码如下:

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

    展开全文
  • 个人简历小程序(附源码)

    千次阅读 2020-05-26 21:56:13
    个人简历小程序(附源码) 使用微信小程序云开发制作自己的个人简历,简单高效。 首先需要了解小程序的基本结构以及云开发模式,及一些css样式基础。 使用小程序云数据库、vant组件库实现简历内容。 最终效果如下: ...

    个人简历小程序(附源码)

    使用微信小程序云开发制作自己的个人简历,简单高效。

    首先需要了解小程序的基本结构以及云开发模式,及一些css样式基础。

    使用小程序云数据库、vant组件库实现简历内容。

    最终效果如下:
    在这里插入图片描述

    代码如下:

    index.json

    {
      "usingComponents": {
      	//引入vant组件
        "van-progress": "@vant/weapp/progress/index",
        "van-divider": "@vant/weapp/divider",
        "van-tag": "@vant/weapp/tag/index",
        "van-collapse": "@vant/weapp/collapse/index",
        "van-collapse-item": "@vant/weapp/collapse-item/index",
        "van-panel": "@vant/weapp/panel/index",
        "van-toast": "@vant/weapp/toast/index"
    	}
    }
    

    index.wxml

    {
      <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}">
        <!-- 第一个页面 -->
        <swiper-item>
            <image class='background' src="../../images/user.jpg" mode="aspectFill"></image>
            <view class="myMsg">
                <view class="name">
                    <text></text>
                    <text></text>
                    <text></text>
                </view>
                <view class="myText">
                    我的简历
                    <image class="rightImg" src="../../images/right.png"></image>
                </view>
            </view>
            <!-- 走马灯 -->
            <swiper class="swiperUser" indicator-dots="{{indicatorDotsUser}}" autoplay="{{autoplayUser}}" interval="{{intervalUser}}" duration="{{durationUser}}" vertical="{{verticalUser}}" circular="{{circularUser}}" display-multiple-items="{{2}}">
                <block wx:for="{{userlist}}" wx:key="index">
                    <swiper-item class="swiperItemUser">
                        <view class="swiperItemUserMsg">
                            <image class="userImg" src="{{item.userImg}}"></image>
                            <view class="zanWord">{{item.name}}刚刚赞了你一下</view>
                        </view>
                    </swiper-item>
                </block>
            </swiper>
     
            <view class="myJob">
                <view>PHP程序员</view>
                <text class="jobYear">4年项目经验</text>
                <button class="zanBtn" wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
                    <image class="zanImg" src="../../images/zan.png"></image>
                    <block>点个赞吧</block>
                </button>
          <van-toast id="van-toast" />
            </view>
    <!-- 第二个页面 -->
        </swiper-item>
        <swiper-item>
            <van-divider contentPosition="left" customStyle="font-size: 30px;color:#8eaadb;border-color:#8eaadb;margin-bottom:20px;">基本资料</van-divider>
            <view class="myData">
                <view>姓名:陶威宏</view>
                <view>年龄:27</view>
            </view>
            <view class="myData">
                <view>电话:176****6021</view>
                <view>性别:男</view>
            </view>
            <view class="myData">邮箱:44298****@qq.com</view>
            <view class="myData marginBottom">地址:北京市朝阳区**6号线)</view>
     
            <van-divider contentPosition="left" customStyle="font-size: 30px;color:#8eaadb;border-color:#8eaadb;">主要技能</van-divider>
            <view class="mainSkill">
                <view class="skillItems">
                    HTML+CSS+JavaScript
                </view>
                <van-progress percentage="50" stroke-width="8" color="#f2826a" show-pivot="{{indicatorDots}}" />
                <view class="skillItems">
                    PHP+MySql+Linux+Nginx
                </view>
                <van-progress percentage="75" stroke-width="8" color="#ee0a24" show-pivot="{{indicatorDots}}" />
                <view class="skillItems">
                    Redis+Memcached
                </view>
                <van-progress percentage="65" stroke-width="8" color="#f2826a" show-pivot="{{indicatorDots}}" />
            </view>
     
            <view class="skillList">
                <view class="tabIcon" wx:for="{{skillList}}" wx:key="index">
                    <van-tag plain size="{{item.size}}" type="{{item.type}}" bindtap="vanMax" data-id="{{index}}">{{item.name}}
                    </van-tag>
                </view>
            </view>
        </swiper-item>
        <!-- 第三个页面 -->
        <swiper-item>
            <van-divider contentPosition="left" customStyle="font-size: 30px;color:#8eaadb;border-color:#8eaadb;margin-bottom:20px;">工作经历</van-divider>
            <van-panel title="北京****科技有限公司" desc="2016.05-2019.07" status="PHP开发">
                <view class="conText">
                    <text>北京****科技有限公司是一家以鲜农产品为主的互联网电商公司,公司产业主要有鲜肉类、农产品类、及自营酒业,以社区经营模式进行线上销售、公司自主研发社区类游戏、自营电商及其他互联网项目累计用户30万。工作期间参与研发自营电商、线上游戏两大项目。
          </text>
                </view>
            </van-panel>
            <van-panel title="北京**网络科技有限公司" desc="2019.07-2020.05" status="PHP开发">
                <view class="conText">
                    <text>北京**网络科技有限公司是一家创业型公司,主要业务以CPS广告模式推广,研发合成类小游戏,网络众包任务平台。公司成立蜘初加入,参与公司项目设计、项目搭建、及开发上线,项目迭代。
            </text>
                </view>
            </van-panel>
        </swiper-item>
        <!-- 第四个页面 -->
        <swiper-item>
            <van-divider contentPosition="left" customStyle="font-size: 30px;color:#8eaadb;border-color:#8eaadb;margin-bottom:20px;">项目经验</van-divider>
            <van-collapse value="{{ activeName }}" bind:change="onChange" accordion>
                <van-collapse-item title="**星球App" name="1">
                    该项目是娱海网络公司自主研发App游戏,通过第三方cpm广告模式盈利,内置网络众包平台,用户可完成他人发布任务获取游戏积分。该项目由创业之初全程参与设计、项目搭建,使用Laravel框架开发,微信登录,公众号认证,微信企业付款到零钱、阿里企业付款,主要负责用户师徒体系、宠物商店、活跃任务、企业付款,众包平台模块。
                </van-collapse-item>
                <van-collapse-item title="**易购App" name="2">
                    该项目是大道农联公司自营电商项目,内置淘宝、京东、拼多多等主流电商优惠券返利模式,同时搭建自营商品,主要负责淘宝客返利佣金结算,自营商城搭建,商品sku系统及商城活动。
                </van-collapse-item>
                <van-collapse-item title="***H5" name="3">
                    该项目是大道农联公司自行研发的H5游戏,模拟宠物合成、宠物交易等虚拟宠物市场,内容丰富,玩法多样。使用Laravel框架开发,Laravel-admin搭建后台管理系统,后台使用echars图表数据分析,支付方式使用微信支付。主要负责用户个人中心、仓库管理、消息通知、微信付款、交易走势及模拟微信拼手气红包,不定期游戏活动。
                </van-collapse-item>
                <van-collapse-item title="**商城" name="4">
                    该项目是大道农联公司第一版商城,使用ThinkPHP搭建,商城内置分销系统、会员返利机制。此项目前后端、数据库及后台均独立开发完成,业务大致分用户系统、订单流程、邀请机制,奖励机制等模块。使用第三方短信验证登录、七牛上传、phpExcel导出,第三方银行卡支付。
                </van-collapse-item>
            </van-collapse>
        </swiper-item>
    </swiper>
    }
    

    index.wxss

    page {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #ffffff;
    }
     
    swiper {
      display: block;
      height: 100%;
    }
     
    .swiper-img {
      width: 100%;
      height: 100%;
    }
    /* 第一屏 */
    .background {
      width: 100%;
      height: 100%;
      position: fixed;
      background-size: 100% 100%;
      z-index: -1;
    }
    .myMsg{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding:30rpx 20rpx 0 80rpx;
      box-sizing: border-box;
    }
    .name{
      font-size: 70rpx;
      font-family: 'Times New Roman', Times, serif;
      font-weight: 600;
      color:#666666;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    .myText{
      display: flex;
      align-items: center;
      justify-content: end;
      font-size:40rpx;
      color:#1f1c1c;
      margin-top:30rpx;
    }
    .rightImg{
      width:40rpx;
      height:40rpx;
      margin-left:10rpx;
    }
    .myJob{
      position: fixed;
      bottom:100rpx;
      left:0;
      right:0;
      background:rgba(0,0,0,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      font-size: 70rpx;
      color:#ffffff;
      padding:30rpx 0;
      box-sizing: border-box;
    }
    .jobYear{
      font-size: 40rpx;
      margin-top:10rpx;
    }
    /* 第二屏 */
    .myData{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 100rpx 0 40rpx;
      box-sizing: border-box;
      margin-bottom: 10rpx;
    }
    .marginBottom{
      margin-bottom: 40rpx;
    }
    .mainSkill{
      padding:0 40rpx;
      box-sizing: border-box;
    }
    .skillItems{
      padding:40rpx 10rpx 20rpx 10rpx;
      box-sizing: border-box;
    }
    .skillList{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding: 50rpx 40rpx;
      box-sizing: border-box;
    }
    .tabIcon{
      margin-right:20rpx;
      margin-bottom:20rpx;
    }
    .van-tag--large{
      font-size: 50rpx !important;
    }
    .van-tag--medium {
      font-size: 30rpx !important;
    }
    .conText{
      font-size: 30rpx;
      color: #666666b2;
      padding: 50rpx 30rpx;
      box-sizing: border-box;
      text-indent: 2em;
      text-align: justify;
    }
    .swiperUser{
      width:100%;
      height:170rpx;
      margin-top:30rpx;
    }
    .swiperItemUser{
      width:auto !important;
      padding:0 30rpx 0 0;
    }
    .swiperItemUserMsg{
      /* height:100rpx; */
      display: flex;
      align-items: center;
      margin-bottom:10rpx;
      margin-left:10rpx;
      padding:0 30rpx 0 0;
      background:rgba(0,0,0,0.3);
      border-radius:100rpx;
    }
    .userImg{
      width:70rpx;
      height:70rpx;
      border-radius: 50%;
      margin-right:10rpx;
    }
    .zanBtn{
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36rpx;
      font-weight: 600;
      color:rgba(67, 5, 5, 0.851);
      margin-top:10rpx;
    }
    .zanImg{
      width:46rpx;
      height:46rpx;
      margin-right:10rpx;
    }
    

    index.js

    import Toast from '@vant/weapp/toast/toast';
    //标签数组
    const skillList = [
      {name:"PHP",type:"danger",size:"large"},
      {name:"Redis",type:"primary",size:"medium"},
      {name:"MySql",type:"success",size:"medium"},
      {name:"缓存",type:"primary",size:"medium"},
      {name:"分布锁",type:"danger",size:"medium"},
      {name:"Laravel",type:"success",size:"medium"},
      {name:"ThinkPHP",type:"danger",size:"medium"},
      {name:"支付",type:"primary",size:"medium"},
      {name:"后台",type:"warning",size:"medium"},
      {name:"Laravel-admin",type:"danger",size:"medium"},
      {name:"LNMP",type:"success",size:"medium"},
    ];
    const db = wx.cloud.database();
    Page({
      /**
       * 页面的初始数据
       */
      data: {
        // 全屏swiper 配置
        indicatorDots: false,
        autoplay: false,
        // 走马灯swiper配置
        indicatorDotsUser:false,//不要swiper点
        autoplayUser:true,//自动切换
        intervalUser:5000,//自动切换时长
        durationUser:1000,//滑动时长
        verticalUser:true,//滑动方向 纵向
        circularUser:true,//采用衔接滑动
        skillList:skillList,
        activeName:'1',
        canIUse: wx.canIUse('button.open-type.getUserInfo'),
        userlist:[]
      },
      //切换标签放大效果
      vanMax:function(event){
        console.log("v")
        let id = event.target.dataset.id;
        let data = skillList
        data.forEach(Element => {
          console.log(Element);
          Element.size = "medium"
        });
        data[id].size = "large"
        this.setData({
          skillList:data
        })
     
      },
      //vant组件
      onChange(event) {
        this.setData({
          activeName: event.detail,
        });
      },
      //点赞记录用户信息,更新弹幕列表
      bindGetUserInfo (e) {
        let userInfo = e.detail.userInfo
        let addData = {
            name:userInfo.nickName,
            userImg:userInfo.avatarUrl
        }
        db.collection('userInfo').add({
          data: {
            name:userInfo.nickName,
            userImg:userInfo.avatarUrl
          },
          success:res =>{
            console.log(res)
            Toast.success('点赞成功!');
            this.setData({
              userlist:this.data.userlist.concat(addData)
            })
          },
          fail: err =>{
            console.log(res);
          }
        })
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        //获取点赞用户
        db.collection('userInfo').field({
          name:true,
          userImg:true
        }).get().then( res =>{
          console.log(res)
            this.setData({
              userlist:res.data
            })
        }).catch( err =>{
          console.log(err)
        })
      },
       
     
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
        console.log(this.data.userlist);
        // this.getUserInfo()
      },
     
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
     
      },
     
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
     
      },
     
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
     
      },
     
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
     
      },
     
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
     
      },
     
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
     
      }
    })
    

    注意

    注意需在小程序云数据库中,添加"userInfo"集合,用于储存点赞用户信息,页面加载前会获取用户信息

    以上就是小程序版个人简历的全部代码,具体审核流程,参照微信小程序审核文档(我这一版本的小程序基本秒批,开发完成即可上线)

    大家可以根据自己的需求,自由设计简历内容,样式

    如果您觉得不错,请点个推荐,谢谢
    欢迎转载,请标明原处,TuiHo

    展开全文
  • 微信小程序个人简历

    千次阅读 2020-11-18 12:02:58
    微信小程序_个人简历 介绍 基于微信云开发写的一个个人简历微信小程序,组件库使用的是ColorUI。 安装教程 微信公众平台申请一个小程序(个人版就可以),下载微信开发者工具,导入项目,更换appid,然后在开发者...

    微信小程序_个人简历

    介绍

    基于微信云开发写的一个个人简历微信小程序,组件库使用的是ColorUI。

    安装教程

    1. 微信公众平台申请一个小程序(个人版就可以),下载微信开发者工具,导入项目,更换appid,然后在开发者工具的左上角云开发按钮开通云开发服务,选择基础版免费的就可以,在app.js文件中将环境id更换为你创建的环境id。
    2. 在微信开发者工具导入整个Resume文件,代码方法都写了注释,由于数据存到云数据库和云仓库,可能有些内容看不到,可以扫码预览一下内容。觉得对你有帮助的麻烦给个Star,谢谢!!!

    获取项目源码:

    1.请点击:源码地址
    2.关注公众号:殷桃小狗子 回复个人简历获取下载链接

    项目展示

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 个人简历”微信小程序+源码

    千次阅读 2018-12-27 20:15:03
    个人简历”微信小程序+源码 运行工具:微信web开发者工具 源码链接:

    “个人简历”微信小程序+源码

    运行工具:微信web开发者工具
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    源码链接:

    https://download.csdn.net/download/qq_38275941/10881657

    展开全文
  • 微信小程序|个人简历

    千次阅读 2019-10-01 11:46:45
    姓名: 小程序 性别: 未知 出生年月:2017年1月 民族: 汉 政治面貌:群众 籍贯: 中国 家族:Tencent 父亲:Allen Zhang 兄长:Wechat * DIY信息: 口头禅:小而不凡 爱好:蜗居(离不开微信) * ...
  • 微信小程序版的个人博客及简历 说明: 本项目为小程序入门项目,需要一定的前端基础及一点后端知识,项目可能不太好,欢迎大家吐槽,纯萌新小白勿入,最后祝大家Coded愉快。 使用方法: git clone ...
  • 微信小程序【My简历】的功能简介

    千次阅读 2020-04-09 12:00:13
    一、背景简介: 当需要找工作或者换工作的时候,发出去的简历文件通常为word格式会pdf格式。对方接到简历文件的时候,预览不是很...扫描二维码或者在微信小程序页面搜索‘My简历’,即可进入小程序 2,登陆小程...
  • 微信小程序简历 前言 哈喽!你好! 这里是微信小程序 - 林锦浩的简历 项目传送门 欢迎小星星 ???? 查看 欢迎扫描下面二维码查看 小程序简历基于微信小程序和Vant框架搭建 具有 主页、个人简介、关于我的、我的...
  • 微信小程序 : 有张简历 -- 小总结

    千次阅读 2019-03-31 18:19:24
    趁着短暂休息的几天 ,简单撸一个微信小程序 ,先看看效果图。 当然 , 以上只是效果图~~~~ , 源码完成后会上传到Github , 看到的大佬能不能指导下完全没有后台服务器的情况下怎么通过纯小程序组件实现MQ或者...
  • 微信小程序-简历信息显示

    千次阅读 2019-06-17 14:48:33
    本次主要介绍如何实现简单的个人简历信息的显示,其中主要的也就是图片的显示以及文本信息的布局。功能首先是点击按钮进入简历信息显示的首页,其中显示简历主人的头像和基本信息,然后是点击头像进入下一个界面,...
  • 简历管理案例(微信小程序+后台)

    千次阅读 2019-06-24 18:51:14
    最近有一个客户(人力资源公司)想做一个微信小程序/公众号,她的需求是让求职者可以扫码上传简历,在PC后台可以对求职者的简历进行管理,帮助求职者找工作。由于该客户可能是第一次合作,我做了一个后台的demo,...
  • Java面试个人简历

    万次阅读 多人点赞 2019-04-24 11:46:07
    了解微信公众号、小程序的开发; 具体所会的技术点可查看个人技术博客(百度直接搜索:郑清 csdn) GitHub开源项目: https://github.com/zhengqingya 证 书: 证书名称:英语托业桥B类五级 项目经验: ...
  • 微信小程序解决苹果端在禁止下拉刷新以后仍可以拖到屏幕...使用微信小程序云开发写的个人简历小程序和好玩的关联微信运动遛狗的小程序,内置天气查询功能。欢迎大家扫码体验,项目详情也可到我的置顶博客查看。项目都已
  • 小程序个人开发者的经验总结

    千次阅读 2017-07-14 17:20:16
    一、个人开发者公号的读者中大部分应该都知道我有一个小程序 [Github开源社区]。我简单的介绍下这个小程序:这是一个小程序版的 Github 社区,目前功能比较简单,主要包括了查看热门项目、登录 Github、点赞项目和...
  • 个人简历

    千次阅读 2006-10-16 21:59:00
    个人简历 l 个 人 资 料 
  • 7月19日微信小程序联盟更新的小程序开发教程、小程序资讯、小程序demo、小程序实战内容合揖如下:小程序资讯与小程序教程 一张图带你看懂小程序发展蓝皮书 2017-07-19 微信小程序开发问答《五十三》手机号码处理为...
  • 阅读本篇文章之前,可以先看看上一篇分享的内容,主要讲微信小程序的由来,它的...本项目是基于微信小程序原生框架,常用原生组件及官方API实现的小程序版个性简历,并引入炫酷的colorui组件库,展现不一样的精彩画面。
  • 微信小程序简介

    千次阅读 2021-05-15 11:07:43
    微信小程序官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/ 小程序是一种全新的连接...全面开放申请后,主体类型为企业、政府、媒体、其他组织或个人的开发者,均可申请注册小程序。微信小程序
  • aps个人简历

    千次阅读 2014-05-25 16:09:43
    个人简历 基本信息  姓 名: 申屠荣荣 性 别: 男 居 住 地: 浙江杭州 学 历: 本科 学 校: 浙江树人大学 出
  • 程序员垃圾简历长什么样?

    万次阅读 多人点赞 2020-03-30 07:56:59
    疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧...
  • 一、微信小程序的来源在2016年9月中,微信公众平台向外发出200个小程序内测邀请函,那么什么是微信小程序,有什么功能呢?微信小程序尽管叫小程序,但其实这就是今年年初腾讯曾对外提及的微信“应用号”。早在2016年...
  • 个人简历(markdown)

    万次阅读 2017-08-29 18:02:16
    纯粹的心血来潮用markdown写一个简单的简历模板。...个人信息 */男/* 本科/ 工作年限:3年 技术博客:http://my.csdn.net/waiwaifight_lin 期望职位:C# .net中级程序员 期望薪资:12K-15K 期望城市...
  • vue 开发小程序

    万次阅读 2018-06-14 11:11:26
    引言现在的前端有各种各样的新知识和新框架,小程序才出生几年,就已经火到这种程度了,所以作为前端学习者,这个新技能我们是一定要尽快get到的。学习小程序最好的方法就是自己手写一个小程序,能从中找到自己的...
  • 张佰鑫个人简历

    千次阅读 2005-12-17 11:54:00
    个人简历基本个人信息姓名:张佰鑫年龄:20性别:男出生日期1986-10-25学历:专科政治面貌团员学校专业南阳理工学院 软件学院 网站设计与编程专业 联系地址南阳理工学院软件学院东南校区11#233室家庭电话0373-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,748
精华内容 11,899
关键字:

个人简历小程序