devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序v0.2.0：无后端，前端数据写在js中

作者：知新_RL | 2024-02-18 08:47:24

赞

踩

无后端微信小程序开源代码

 

  1. <!--index.wxml-->
  2. <view class="container">
  3. <view id='header'>
  4.   <image class='bjimg' mode='aspectFit' src='./img/bg.jpg'></image>
  5.   <image class='figure' mode='aspectFit' src='./img/fig.png'></image>
  6.    <view bindtap='tel'> 
  7.     <image class='tel' mode='aspectFit' src='./img/tel.png'></image>
  8.    </view> 
  9. </view>
  10. <view id='content'>
  11.   <swiper>
  12.     <swiper-item>
  13.       <view class='sheet'>
  14.         <view class='contentHeader'>
  15.           <image class='contentHeaderImg' mode='aspectFit' src='./img/1.png'></image>
  16.         </view>
  17.         <view class='textSelection'>
  18.           <block wx:for='{{stringArray[0]}}'>
  19.             <text class='{{item.styleClass}}'>{{item.str}}</text>
  20.           </block>
  21.         </view>
  22.       </view>
  23.     </swiper-item>
  24.     <swiper-item>
  25.       <view class='sheet'>
  26.         <view class='contentHeader'>
  27.           <image class='contentHeaderImg' mode='aspectFit' src='./img/2.png'></image>
  28.         </view>
  29.         <view class='contentImg'>
  30.           <image class='companyImg' mode='aspectFit' src='./img/bbkj.jpg'></image>
  31.         </view>
  32.         <view class='textSelection'>
  33.           <block wx:for='{{stringArray[1]}}'>
  34.             <text class='{{item.styleClass}}'>{{item.str}}</text>
  35.           </block>
  36.         </view>
  37.       </view>
  38.     </swiper-item>
  39.     <swiper-item>
  40.       <view class='sheet'>
  41.         <view class='contentHeader'>
  42.           <image class='contentHeaderImg' mode='aspectFit' src='./img/2.png'></image>
  43.         </view>
  44.         <view class='contentImg'>
  45.           <image class='companyImg' mode='aspectFit' src='./img/alibaba.jpg'></image>
  46.         </view>
  47.         <view class='textSelection'>
  48.           <block wx:for='{{stringArray[2]}}'>
  49.             <text class='{{item.styleClass}}'>{{item.str}}</text>
  50.           </block>
  51.         </view>
  52.       </view>
  53.     </swiper-item>
  54.     <swiper-item>
  55.       <view class='sheet'>
  56.         <view class='contentHeader'>
  57.           <image class='contentHeaderImg' mode='aspectFit' src='./img/2.png'></image>
  58.         </view>
  59.         <view class='contentImg'>
  60.           <image class='companyImg' mode='aspectFit' src='./img/ms.jpg'></image>
  61.         </view>
  62.         <view class='textSelection'>
  63.           <block wx:for='{{stringArray[3]}}'>
  64.             <text class='{{item.styleClass}}'>{{item.str}}</text>
  65.           </block>
  66.         </view>
  67.       </view>
  68.     </swiper-item>
  69.     <swiper-item>
  70.       <view class='sheet'>
  71.         <view class='contentHeader'>
  72.           <image class='contentHeaderImg' mode='aspectFit' src='./img/3.png'></image>
  73.         </view>
  74.         <view class='contentImg'>
  75.           <image class='companyImg' mode='aspectFit' src='./img/tjdx.jpg'></image>
  76.         </view>
  77.         <view class='textSelection'>
  78.           <block wx:for='{{stringArray[4]}}'>
  79.             <text class='{{item.styleClass}}'>{{item.str}}</text>
  80.           </block>
  81.         </view>
  82.       </view>
  83.     </swiper-item>    <swiper-item>
  84.       <view class='sheet'>
  85.         <view class='contentHeader'>
  86.           <image class='contentHeaderImg' mode='aspectFit' src='./img/4.png'></image>
  87.         </view>
  88.         <view class='contentImg'>
  89.           <image class='companyImg' mode='aspectFit' src='./img/ms-q1.jpg'></image>
  90.         </view>
  91.         <view class='textSelection textCenter'>
  92.           <text>微软亚洲工程院人脉圈</text>
  93.         </view>
  94.         <view class='contentImg'>
  95.           <image class='companyImg' mode='aspectFit' src='./img/ali-q1.jpg'></image>
  96.         </view>
  97.         <view class='textSelection textCenter'>
  98.           <text>阿里毕业生人脉圈</text>
  99.         </view>
  100.       </view>
  101.     </swiper-item>
  102.   </swiper>
  103. </view>
  104. </view>

　　

  1. //index.js
  2. //获取应用实例
  3. const app = getApp()
  4.  
  5. Page({
  6.   data: {
  7.     stringArray: [
  8.       [
  9.         {
  10.           str: '王立',
  11.           styleClass: 'textH1'
  12.         },
  13.         {
  14.           str: '男 | 37岁( 1981年11月3日)',
  15.           styleClass: ''
  16.         },
  17.         {
  18.           str: '百变空间-CTO、联合创始人、董事',
  19.           styleClass: ''
  20.         },
  21.         {
  22.           str: '5年阿里巴巴广告技术研发管理经验',
  23.           styleClass: ''
  24.         },
  25.         {
  26.           str: '18项发明专利、第一发明人',
  27.           styleClass: ''
  28.         },
  29.         {
  30.           str: '多家上市公司、基金顾问、合作对象包括：',
  31.           styleClass: ''
  32.         },
  33.         {
  34.           str: '-> 宜信',
  35.           styleClass: ''
  36.         },
  37.         {
  38.           str: '-> 知乎',
  39.           styleClass: ''
  40.         },
  41.         {
  42.           str: '-> 旷世',
  43.           styleClass: ''
  44.         },
  45.         {
  46.           str: '-> 华米（华米系，纽交所上市：HMI）',
  47.           styleClass: ''
  48.         },
  49.         {
  50.           str: '-> 石头科技（小米系）',
  51.           styleClass: ''
  52.         },
  53.         {
  54.           str: '-> 艾瑞咨询',
  55.           styleClass: ''
  56.         },
  57.         {
  58.           str: '万门大学特约讲师',
  59.           styleClass: ''
  60.         },
  61.         {
  62.           str: '联系方式：136-0000-0000',
  63.           styleClass: ''
  64.         },
  65.         {
  66.           str: 'Email：56824220@qq.com',
  67.           styleClass: ''
  68.         },
  69.       ], [
  70.         {
  71.           str: '2016年 ~ 至今',
  72.           styleClass: 'textH1'
  73.         },
  74.         {
  75.           str: '百变空间-CTO、联合创始人、董事、连续创业者',
  76.           styleClass: ''
  77.         },
  78.         {
  79.           str: '领导研发中心，研究方向主要为',
  80.           styleClass: ''
  81.         },
  82.         {
  83.           str: '-> ERP、VR以及在装修场景中的应用落地；',
  84.           styleClass: ''
  85.         },
  86.         {
  87.           str: '-> 机器学习，数据驱动营销',
  88.           styleClass: ''
  89.         },
  90.         {
  91.           str: '-> AI;',
  92.           styleClass: ''
  93.         },
  94.         {
  95.           str: '公司融资情况',
  96.           styleClass: 'textH1'
  97.         },
  98.         {
  99.           str: '2017年9月 A轮 估值2.7亿',
  100.           styleClass: ''
  101.         },
  102.         {
  103.           str: '投资方： 东方美莱，博将资本',
  104.           styleClass: ''
  105.         },
  106.         {
  107.           str: '2016年10月 Pre-A轮 估值1亿',
  108.           styleClass: ''
  109.         },
  110.         {
  111.           str: '投资方：博将资本，维度资本',
  112.           styleClass: ''
  113.         },
  114.         {
  115.           str: '2015年11月 天使轮 估值2500万',
  116.           styleClass: ''
  117.         },
  118.         {
  119.           str: '投资方：天使汇，维度资本',
  120.           styleClass: ''
  121.         },
  122.       ], [
  123.         {
  124.           str: '2011年 ~ 2016年',
  125.           styleClass: 'textH1'
  126.         },
  127.         {
  128.           str: '阿里-阿里妈妈 芒果移动总负责人\总监',
  129.           styleClass: ''
  130.         },
  131.         {
  132.           str: '管理过广告部门一半以上的产品线，包括：',
  133.           styleClass: ''
  134.         },
  135.         {
  136.           str: '-> 定向广告产品线',
  137.           styleClass: ''
  138.         },
  139.         {
  140.           str: '-> DSP广告',
  141.           styleClass: ''
  142.         },
  143.         {
  144.           str: '-> 淘宝广告产品线',
  145.           styleClass: ''
  146.         },
  147.         {
  148.           str: '-> 无线广告产品线',
  149.           styleClass: ''
  150.         },
  151.         {
  152.           str: '-> 芒果移动',
  153.           styleClass: ''
  154.         },
  155.         {
  156.           str: '参加过有盟和芒果移动的受过过程，最后只为是芒果移动的总负责人',
  157.           styleClass: ''
  158.         },
  159.         {
  160.           str: '深耕机器学习算法、高可用性引擎等技术',
  161.           styleClass: ''
  162.         },
  163.         {
  164.           str: '在职期间申请18项发明专利、第一发明人',
  165.           styleClass: ''
  166.         },
  167.       ], [
  168.         {
  169.           str: '2006年 ~ 2011年',
  170.           styleClass: 'textH1'
  171.         },
  172.         {
  173.           str: '微软=微软亚洲研究院 技术经理',
  174.           styleClass: ''
  175.         },
  176.         {
  177.           str: '先后经历过：',
  178.           styleClass: ''
  179.         },
  180.         {
  181.           str: '-> windows mobile团队',
  182.           styleClass: ''
  183.         },
  184.         {
  185.           str: '-> IE团队',
  186.           styleClass: ''
  187.         },
  188.         {
  189.           str: '-> SQL Server、SQL Cloud团队',
  190.           styleClass: ''
  191.         },
  192.         {
  193.           str: '-> 深耕手机开发、浏览器内核、SQL Engine、Cloud技术',
  194.           styleClass: ''
  195.         },
  196.         ], [
  197.         {
  198.           str: '2003年 ~ 2006年',
  199.           styleClass: 'textH1'
  200.         },
  201.         {
  202.           str: '天津大学-计算机系统结构',
  203.           styleClass: ''
  204.         },
  205.         {
  206.           str: '硕士学位',
  207.           styleClass: ''
  208.         },
  209.         {
  210.           str: '1999年 ~ 2003年',
  211.           styleClass: 'textH1'
  212.         },
  213.         {
  214.           str: '天津大学-计算机科学与技术',
  215.           styleClass: ''
  216.         },
  217.         {
  218.           str: '学士学位',
  219.           styleClass: ''
  220.         },
  221.         {
  222.           str: '2000年 ~ 2003年',
  223.           styleClass: 'textH1'
  224.         },
  225.         {
  226.           str: '天津大学-工商管理',
  227.           styleClass: ''
  228.         },
  229.         {
  230.           str: '学士学位（二学位）',
  231.           styleClass: ''
  232.         },
  233.         ], []
  234.     ]
  235.   },
  236.   //事件处理函数
  237.   bindViewTap: function() {
  238.   },
  239.   onLoad: function () {
  240.   },
  241.   tel() {
  242.     wx.makePhoneCall({
  243.       phoneNumber: app.globalData.phoneNumber,
  244.     })
  245.   }
  246. })

　

  1. /**index.wxss**/
  2. .container {
  3.   width: 100%;
  4.   display: flex;
  5.   flex-direction: column;
  6.   align-items: center;
  7.   justify-content:flex-start;
  8.   padding: 0;
  9.   background-color: #DDDDDD;
  10. }
  11.  
  12. #header{
  13.   width: 100%;
  14.   height: 400rpx;
  15.   background-color: #040E18;
  16.   /* display: flex;
  17.   flex-direction: column; 
  18.   让图片figure跑上来*/
  19.   display: flex;
  20.   flex-direction:column;
  21.   justify-content: flex-start;
  22.   align-items: center;
  23.   margin: 0;
  24.   padding: 0;
  25. }
  26.  
  27. .bjimg{
  28.   display: block;
  29.   width: 750rpx;
  30.   height: 400rpx;
  31. }
  32.  
  33. .figure{
  34.   display: block;
  35.   width: 728rpx;
  36.   height: 512rpx;
  37.   position: absolute;
  38.   margin-top: -40rpx;
  39.   margin-left: -130rpx;
  40. }
  41.  
  42. .tel{
  43.   display: block;
  44.   width: 70rpx;
  45.   height: 70rpx;
  46.   position: absolute;
  47.   margin-top: -100rpx;
  48.   margin-left: 200rpx;
  49. }
  50.  
  51. #content{
  52.   width: 100%;
  53.   height: 1900rpx;
  54.   background-color: #040E18;
  55. }
  56.  
  57. .contentHeaderImg{
  58.   display: block;
  59.   width: 750rpx;
  60.   height: 112rpx;
  61. }
  62.  
  63. .textSelection{
  64.   display: flex;
  65.   flex-direction: column;
  66.   justify-content: flex-start;
  67.   align-items:flex-start;
  68.   padding: 50rpx;
  69. }
  70.  
  71. text{
  72.   display: block;
  73.   color: #FFFFFF;
  74.   margin: 10rpx;
  75.   font-size: 16px;
  76. }
  77.  
  78. .textH1{
  79.   font-size: 18px;
  80.   color: aqua;
  81.   margin: 25rpx 0 25rpx -10rpx;
  82. }
  83.  
  84. swiper, swiper-item, .sheet{
  85.   width: 100%;
  86.   height: 100%;
  87.   /* 这里好难啊 */
  88. }
  89.  
  90. .contentImg{
  91.   display: flex;
  92.   flex-direction: column;
  93.   justify-content: center;
  94.   align-items:flex-start;
  95.   padding: 60rpx 0 0 0;
  96. }
  97.  
  98. .companyImg{
  99.   display: block;
  100.   width: 650rpx;
  101.   height: 381rpx;
  102. }
  103.  
  104. .sheet{
  105.   display: flex;
  106.   flex-direction:column;
  107.   justify-content: flex-start;
  108.   align-items: center;
  109. }
  110.  
  111. .textCenter{
  112.   align-items: center;
  113. }

　　

转载于:https://www.cnblogs.com/tabCtrlShift/p/9219473.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/106697
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。