公司简介——哎丫的第一个微信小程序

效果预览

目录结构:

程序代码

group.js

Page({
  data: {
    group: [
    {
      name: "Taniszyc",
      comment: "盛彩科技创始人兼CEO,XPU大学前微信部长,著作有《雅白大全》",
      imagePath: "/images/zyc.jpg",
      saying: "座右铭:Done is better than perfect",
      blog: "个人博客: 盛彩小站"
    },
    {
      name: "Tanisgzh",
      comment: "盛彩科技高级工程师",
      imagePath: "/images/gzh.jpg",
      saying: "座右铭:今天你脱发了吗?",
      blog: "XPU大学公众号,官方QQ等经营人"
    },
    {
      name: "Taniszs",
      comment: "盛彩科技高级工程师",
      imagePath: "/images/zs.jpg",
      saying: "座右铭:996修福报!",
      blog: "XPU大学公众号,官方QQ等经营人"
    },
    {
      name: "Taniscda",
      comment: "盛彩科技普通员工,本小程序作者",
      imagePath: "/images/cda.jpg",
      saying: "座右铭:stay hungry,stay foolish",
      blog: "个人博客: 哎丫笔记"
    }
  ]
}
})

group.json

{
  "navigationBarTitleText": "SC Creative",
  "navigationBarBackgroundColor": "#000",
  "navigationBarTextStyle": "white"
}

group.wxml

<swiper class="move-swiper" indicator-dots="{{true}}"
previous-margin="20rpx" next-margin="20rpx">
  <swiper-item class='container move-card' wx:for="{{group}}">
      <image src="{{item.imagePath}}" class="banner"></image>
      <view class='abcd'>
        <text style="font-weight: bold; font-size: 40rpx;">{{item.name}}</text><text class="aaaa" style="font-size: 32rpx;">{{item.comment}}</text>
      </view>
      <view class='abcd' style="font-size: 32rpx;">
      <text >{{item.saying}}</text><text>{{item.blog}}</text>
      </view>
    </swiper-item>
</swiper>

group.wxss

.move-swiper{
  height: 100vh;
}

.move-card{
  height: 100%;
  width: 100%;
  background: #eee;
  margin: 20 0rpx;
}

.aaaa{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 40rpx;
  margin-right: 40rpx;
}

sc.js

Page({})

sc.json

{
  "navigationBarTitleText": "SC Creative",
  "navigationBarBackgroundColor": "#000",
  "navigationBarTextStyle": "white"
}

sc.wxml

<view class='container'>
   <image class='banner' src="/images/sc.jpg"></image>
   <view class='abcd'>
     <text style="font-weight: bold; font-size: 40rpx;">SC Creative</text><text>注册资本:1000亿</text>
   </view>
   <text class="left" style="font-size: 32rpx;" space="emsp">  这是一家年轻且充满活力的公司,自2016年创立以来,公司取得了可喜的佳绩,企业秉承单身狗的优良传统,有着极限996等一系列作死文化,目前业内口碑良好,有望成为中国第六家上市的互联网公司。</text>
   <navigator style="font-weight: lighter; font-size: 30rpx;" url="/pages/group/group" open-type="switchTab" hover-class="nav-hover">成员信息</navigator>
</view>

app.json

{
  "pages": ["pages/SC Creative/sc","pages/group/group"],
  "tabBar": {
    "list": [
      {
        "text": "公司简介",
        "pagePath": "pages/SC Creative/sc",
        "iconPath": "images/icons/gs.jpg",
        "selectedIconPath": "images/icons/gs_xz.jpg"
      },
      {
        "text": "成员信息",
        "pagePath": "pages/group/group",
        "iconPath": "images/icons/qz.jpg",
        "selectedIconPath": "images/icons/qz_xz.jpg"
      }
    ]
  }
}

app.wxss

.container {
  background-color: #eee;
  height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.banner{
  width: 375rpx;
  height: 375rpx;
  border-radius: 50%;
}

.abcd {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.left {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 80rpx;
  margin-right: 80rpx;
}

.nav-hover{
  color: blue;
}

sc.wxss、app.js为空,project.config.json、sitemap.json默认即可不做修改

© 版权声明
THE END
一发入魂
点赞2打赏
分享
评论 抢沙发

请登录后发表评论