逸尘小程序前端实战

1. 欢迎页面

<!-- welcome.wxml -->

<view class="container">
    <image class="user-image" src="../../images/c4.jpg"></image>
    <text class="user-name"><text style="color:red">Hello</text> 逸尘AI</text>
    <view class="text-container" bindtap="onTap">
        <text class="welcome">开启小程序之旅</text>
    </view>
</view>

/* welcome.wxss */

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

.user-image{
    width: 200rpx;
    height: 200rpx;
    margin-top: 160rpx;
    border-radius: 50%;
}

.user-name{
    margin-top: 100rpx;
    font-size: 32rpx;
    font-weight: bold;
}

.text-container{
    margin-top: 200rpx;
    border: 1px solid #770077;
    width: 200rpx;
    height: 80rpx;
    border-radius: 20rpx;
    text-align: center;
}

.welcome{
    font-size: 22rpx;
    font-weight: bold;
    color: #770077;
    line-height: 80rpx;
}

page{
    height: 100%;
    background-color: #B3D4DB;
}

// welcome.js

Page({

    /**
     * 页面的初始数据
     */
    data: {

    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {

    },
    onTap: function(event) {
        wx.redirectTo({
            url: '../index/index'
        })
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {

    }
})

welcome.json

json 文件中不可写注释

{
  "navigationBarBackgroundColor":"#B3D4DB"
}

2. 首页

2.1 轮播图

<!-- 轮播图 -->
<view>
    <swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000" circular="true">
        <swiper-item>
            <image src="../../images/b1.jpg"></image>
        </swiper-item>
        <swiper-item>
            <image src="../../images/b2.jpg"></image>
        </swiper-item>
        <swiper-item>
            <image src="../../images/b3.jpg"></image>
        </swiper-item>
    </swiper>
</view>

swiper{
    width: 100%;
    height: 400rpx;
}

swiper image{
    width: 100%;
    height: 400rpx;
}

2.2 公司名称部分

<!-- 公司名称 -->
<view class="header c">
    <view class="company">
        <view class="companyName">济南逸尘智创网络科技有限公司</view>
        <view>
            <image class="locationImg" src="/images/right-circle.png"></image>
        </view>
    </view>
    <view class="address">
        <view class="location l">
            <image class="s18" src="/images/location.png"></image>
        </view>
        <view class="addressText l">
            山东省济南市长清区大学路1号
        </view>
        <view class="phone r">
            <image class="s18" src="/images/phone.png"></image>
        </view>
        <view class="wechat s18 r">
            <image class="s18" src="/images/wechat.png"></image>
        </view>
    </view>
</view>

.c {
    color: #333;
}

.f-size {
    font-size: 14px;
}

.header {
    border-bottom: 2px solid #ccc;
    padding-bottom: 3px;
}

.company {
    width: 100%;
    height: 20px;
    margin-top: 3px;
}

.companyName {
    font-size: 20px;
    font-weight: 900;
    line-height: 20px;
    float: left;
    margin-left: 10px;
}

.locationImg {
    width: 20px;
    height: 20px;
    float: right;
    margin-right: 10px;
}

.s18 {
    width: 20px;
    height: 20px;
}

.address {
    width: 100%;
    height: 20px;
    margin-top: 8px;
}

.l {
    float: left;
}

.r {
    float: right;
}

.addressText {
    font-size: 16px;
    line-height: 20px;
}

.location {
    margin-left: 10px;
}

.addressText {
    margin-left: 3px;
}

.wechat {
    padding-right: 10px;
    border-right: 2px solid #ccc;
}

.phone {
    margin-right: 10px;
    padding-left: 10px;
}

2.3 公司简介

<view class="list c">
    <view class="h1">
        <text>-公司简介-</text>
    </view>
    <view class="h2">
        <text>-Company profile-</text>
    </view>
    <view class="text f-size">
        <text>济南逸尘智创网络科技有限公司以让科技走进生活，让技术服务市场的愿景为指导，创新性的提供小程序制作、网站定制及Android开发等服务，对接高校项目，服务社会大众。</text>
    </view>
</view>

.h1 {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.h2 {
    font-size: 16px;
    color: #ccc;
    text-align: center;
}

.text {
    /* 首行缩进 */
    text-indent: 2em;
    margin-top: 8px;
}

.list {
    padding: 8px;
}

2.4 解决方案

<!-- 解决方案 -->
<view class="list c">
    <view class="h1">
        <text>-解决方案-</text>
    </view>
    <view class="h2">
        <text>-Solution-</text>
    </view>
    <view class="flex-c f-size">
        <view class="flex-r box">
            <view>APP开发</view>
            <view>网站定制</view>
        </view>
        <view class="flex-r box">
            <view>微信小程序</view>
            <view>QQ小程序</view>
        </view>
        <view class="flex-r box">
            <view>百度智能小程序</view>
            <view>支付宝小程序</view>
        </view>
    </view>
</view>

.flex-c {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
}

.flex-r {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

2.5 合作伙伴

<view class="list c">
    <view class="h1">
        <text>-合作伙伴-</text>
    </view>
    <view class="h2">
        <text>-Partner-</text>
    </view>
    <view class="text f-size">
        <text>目前已与山东风之谷网络科技有限公司、鑫立集团等众多公司达成战略合作，范围涉及VR、物联网、医疗健康、智能家居、文化传媒等众多方面。</text>
    </view>
</view>

2.6 联系我们

<view class="list c">
    <view class="h1">
        <text>-联系我们-</text>
    </view>
    <view class="h2">
        <text>-Contact us-</text>
    </view>
    <view class=".flex-c center f-size">
        <view>
            <text>电话：15314117650</text>
        </view>
        <view>
            <text>邮箱：[email protected]</text>
        </view>
        <view>
            <text>地址：济南市长清区大学路1号</text>
        </view>
    </view>
</view>

/* 联系我们 */

.center {
    text-align: center;
}

2.7 全局配置

{
    "pages": [
        "pages/index/index",
        "pages/welcome/welcome"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
    },
    "tabBar": {
        "color": "#333",
        "selectedColor":"#3388ff",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath":"/images/index.png",
                "selectedIconPath":"/images/indexC.png"
            },
            {
                "pagePath": "pages/welcome/welcome",
                "text": "欢迎",
                "iconPath": "/images/ai.png",
                "selectedIconPath": "/images/aiC.png"
            }
        ]
    },
    "sitemapLocation": "sitemap.json"
}