二.UniApp入门教程-项目创建

 

本篇大概讲述了项目创建，创建登陆页面，首页轮播图和列表，个人中心这四块功能，后续会陆续补充项目创建时的优化和总结

 

本系列UI框架采用uView来实现，最新的到2.X版本了，本系列暂用1.X为例，比较好上手

uView官网地址：https://v1.uviewui.com/

 

(1)导入脚手架

首先下载uView的“脚手架空白工程”，下载地址：https://v1.uviewui.com/components/resource.html，

 

 并将文件导入到我们项目中，形成的项目文档结构如下图所示：

点击顶部菜单“运行”-》“运行到浏览器”-》Chrome，显示效果如下：

uView为我们生成了Tabbar，"首页"和"我"对应的vue页面

 

每个vue页面大致由三部分组成:

template: 页面结构

script: 用于业务逻辑 ,data(){}用于初始化数据，,methods对应函数

style: 页面样式

<template>
    <view> 
    </view>
</template> 
<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    }
</script>

<style>

</style>

(2)uniapp常用命令和组件

在正式开始开发项目之前，首先了解下uniapp的常用命令

 

v-bind:使用data中定义的变量或者使用表达式 v-bind:class="msg"

v-on:可以简写成@ 绑定事件，.stop可以防止实践穿透

v-model:双向绑定 v-model="msg" 在表单中使用非常方便，直接获取表单数据

v-if，v-else-if: 条件判断

v-show：是否显示

v-if和v-show的比较，v-if能决定某个元素或区块是否挂载，一般v-if比较常用

v-for:列表渲染

 

uniapp基础组件：https://uniapp.dcloud.io/component/README

 

(3)登陆功能

首先在“pages”下创建目录“login”,在该目录下创建页面“index.vue”,代码如下：

<template>
    <view class="wrap">
        <view class="top"></view>
        <view class="content">
            <view class="title u-text-center">欢迎登录</view>
            <input class="u-border-bottom u-margin-20" type="text" v-model="username" placeholder="请输入账号" /> 
            <input class="u-border-bottom u-margin-20" type="password" v-model="password" placeholder="请输入密码" /> 
            <button @tap="submit" :style="[inputStyle]" class="getCaptcha">登陆</button>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return { 
                username: '',
                password: ''
            }
        },
        computed: {
            inputStyle() {
                let style = {};
                if (this.username && this.password) {
                    style.color = "#fff";
                    style.backgroundColor = this.$u.color['warning'];
                }
                return style;
            }
        },
        methods: {
            submit() {

                uni.setStorageSync('username', this.username);
                var localStorageUser = uni.getStorageSync('username');
                this.$u.toast(localStorageUser + ',登陆成功');
                uni.reLaunch({
                    url:'/pages/index/index'
                }) 
            }
        }
    };
</script>

<style lang="scss" scoped>
    .wrap {
        font-size: 28rpx;

        .content {
            width: 600rpx;
            margin: 80rpx auto 0;

            .title {
                font-size: 60rpx;
                font-weight: 500;
                margin-bottom: 100rpx;
            }

            input {
                text-align: left;
                margin-bottom: 10rpx;
                padding-bottom: 6rpx;
            }

            .tips {
                color: $u-type-info;
                margin-bottom: 60rpx;
                margin-top: 8rpx;
            }

            .getCaptcha {
                background-color: rgb(253, 243, 208);
                color: $u-tips-color;
                border: none;
                font-size: 30rpx;
                padding: 12rpx 0;

                &::after {
                    border: none;
                }
            }  
        } 
    }
</style>

效果如下：

其中，按钮绑定提交事件“submit”，v-model双向绑定用户名密码，通过localStorage本地存储用户信息，跳转至首页。实际开发中，用户名信息应设为动态获取，后续将通过Vuex进行优化

 

(4)创建首页

首页的布局我们以轮播图和信息列表为例，效果图如下

A.首先是轮播图，使用uView的Swiper插件

<view class="wrap"> <u-swiper :list="list"></u-swiper> </view>

list数据绑定

data() {
return {
list: [{
        image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
        title: '昨夜星辰昨夜风，画楼西畔桂堂东'
    },
    {
        image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
        title: '身无彩凤双飞翼，心有灵犀一点通'
    },
    {
        image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
        title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
    }
],
}
        },

B.列表也很简单，主要是样式和布局，代码如下，用for循环遍历十次，即十条信息

<view class="u-margin-10 info" v-for="count in 10">
  <navigator url="/pages/news/newsdetails/newsdetails"   hover-class="navigator-hover">
  <u-row gutter="16">
    <u-col span="3">
        <view>
            <u-image width="150rpx" height="150rpx" src="/static/test/1.jpg" class="u-flex-nowrap">
            </u-image>
        </view>
    </u-col>
    <u-col span="9">
        <view class="info_title u-line-1 u-text-left u-col-top">2021世界制造业大会，重磅开幕！</view>
        <view class="info_content u-line-2 u-text-left u-col-top">
            全球中小企业联盟全球主席克里斯蒂安·武尔夫，国务院发展研究中心党组书记马建堂，工业和信息化部党组成员、副部长辛国斌，上海合作组织秘书长弗拉基米尔·诺罗夫，韩国驻华大使张夏成，上海市人民政府副市长张为，海尔集团创始人、董事局名誉主席张瑞敏将发表致辞或视频致辞
        </view>
        <view class="info_date u-text-right u-col-top">2021-11-23</view>
    </u-col>
  </u-row>  
  </navigator>
</view> 

样式文件大致如下：

.info {
    background-color: $u-bg-color;
}
.info-img {
    width: 50rpx;
    height: 50rpx;
}

.info_title {
    font-weight: 700;
    font-size: 20rpx;
}

.info_content {
    font-size: 20rpx;
    text-indent: 2em;
}

.info_date {
    font-size: 20rpx;
    color: $u-main-color;
} 

本篇的列表会在下文继续优化，绑定动数据，下拉加载更多，数据分页，并对列表进行组件化，以及父子组件之间的值传递

 

（5）个人中心

个人中心比较简单，点击退出回到登陆页面，账号就是登陆账号，从本地缓存中读取

主要代码如下：

<view class="u-flex user-box u-p-t-30 u-p-l-30 u-p-r-20 u-p-b-30">
    <view class="u-m-r-10">
    <u-avatar :src="pic" size="140"></u-avatar>
    </view>
    <view class="u-flex-1">
    <view class="u-font-18 u-p-b-20">账号：{{username}}</view>
    <view class="u-font-14 u-tips-color">微信号:ywk</view>
    </view> 
 </view> 

<view class="u-m-t-20">
    <u-cell-group>
    <u-cell-item icon="star" title="个人信息"></u-cell-item> 
    </u-cell-group>
</view>

<view class="u-m-t-20">
    <u-cell-group>
    <u-cell-item icon="reload" title="退出" @click="logout"></u-cell-item>
    </u-cell-group>
</view>

总结：通过uView导入空白脚手架后，通过uniapp常用命令和组件，搭建了一个基础的移动App项目。

下一期将对Api网络请求进行优化和封装，完善首页列表的功能。

 

以上，仅用于学习和总结！