首先说明Uni-app是以vue为基础的小程序开发，所以使用uni-app之前需要学习过VUE，知道怎么使用，也需要一些微信小程序的开发经验，这样也能看得懂编译后的代码

uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）、快应用等多个平台。

1、初始项目认识

先补充说明：

main.js：项目的入口文件，也就是项目加载时，先加载main.js文件

manifest.json：负责管理打包的一些配置，指定应用名称，图标，权限等

pages.json：页面路由，负责设置整个项目的页面(pages)存放路径以及窗口外观(globalStyle)的

2、uni-app无法启动微信开发者工具，报错

在将项目运行至微信开发者工具时，出现下述报错：[微信小程序开发者工具] × #initialize-error: [error] 工具的服务端口已关闭。要使用命令行调用工具，请在下方输入 y 以确认开启，或手动打开工具 -> 设置 -> 安全设置，将服务端口开启。

解决办法： 这时解决办法则是需要打开微信开发者工具的服务端口

打开微信开发者工具，选择设置–>通用设置

点击安全，打开服务端口,再重新运行到微信开发者工具就不会报错了

3、设置背景图片占满全屏

因为发现background-image并不能直接使用本地图片，就在思考如何使用，最后想到层级

<template>
    <view class='login-box'>
        <image
         src="../../static/images/back.png"
         style="width: 100%;height: 100%;opacity: 0.4;z-index: -1;"></image>
    </view>
</template>

<style scoped>
    .login-box {
        height: 100vh;
    }
<style>

当然使用本地图片作为backgroundImage也是可以的，但是稍微有一点麻烦，以下是第二种办法

页面

<template>
    <view class="content" :style="{backgroundImage:'url(' + imageURL + ')'}"></view>
</template>

script

export default {
    data() {
        return {
            title: 'Hello',
            // 图片存储位置
            imageURL: '../../static/images/back.jpg'
        }
    }
}

4、# 顶部双层tabbar切换页面内容

页面效果图（仿国家反诈中心APP）

一般来说都只用到一层，也就是下面的代码

<swiper class="top_tab">
    <swiper-item :class="{ 'toptab_item_active': index == taballCur }" v-for="(item, index) in tabListAll"
        :key="index" class="toptab_item" @click="clickCtAllTab(index)">
        <view>{{item.title}}</view>
    </swiper-item>
</swiper>

当然，如果需要两层的话，需要在上一个tabbar的孩子的位置再加一个即可（注意排版）

下面是完整的vue代码（仅供参考）

<template>
    <view>
        <!-- 顶tab -->
        <swiper class="top_tab">
            <swiper-item :class="{ 'toptab_item_active': index == taballCur }" v-for="(item, index) in tabListAll" :key="index" class="toptab_item" @click="clickCtAllTab(index)">
            <view>{{item.title}}</view>
            </swiper-item>
        </swiper>
        <view style="display: flex;margin-top:20rpx;margin-bottom: 20rpx;">
            <view style="background-color: #e2e2e2; width: 100%; height: 1rpx;"></view>
        </view>
        <!-- 内容信息 -->
        <view v-if="taballCur===0">
            <!-- tab部分 -->
            <swiper class="ct_tab">
                <swiper-item :class="{ 'ct_active': index == tabCur }" v-for="(item, index) in tabList" :key="index" class="ct_item" @click="clickCtTab(index)">
                    <text v-text="item.title"></text>
                </swiper-item>
            </swiper>
            <view style="display: flex;margin-top:20rpx;margin-bottom: 20rpx;">
                <view style="background-color: #e2e2e2; width: 100%; height: 1rpx;"></view>
            </view>
            <view v-if="tabCur===0">
                <view class="recommend">
                    <news-list></news-list>
                </view>
            </view>
            <view v-if="tabCur===1">
                <view>浙江</view>
            </view>
            <view v-if="tabCur===2">
                <view>各地动态</view>
            </view>
            <view v-if="tabCur===3">
                <view>小课堂</view>
            </view>
            <view v-if="tabCur===4">
                <view>视频</view>
            </view>
        </view>
        <view v-if="taballCur===1">
            <view>案例</view>
        </view>
    </view>
</template>

<script>
import newsList from '../../common/component/newsList.vue'
export default {
    components: { newsList },
    data() {
        return {
            tabCur: 0,
            taballCur: 0,
            tabListAll: [{
                title: '宣传',
            }, {
                title: '案例',
            }],
            // 二级tabbar的标题
            tabList: [{
                title: '推荐',
            }, {
                title: '浙江',
            }, {
                title: '各地动态',
            }, {
                title: '小课堂',
            }, {
                title: '视频',
            }]
        }
    },
    methods: {
        clickCtTab(ctCur) {
            this.tabCur = ctCur
            console.log('tabCur点击了--->' + this.tabCur)
        },
        clickCtAllTab(ctallCur) {
            this.taballCur = ctallCur
            console.log('最顶上的ctallCur点击了--->' + this.taballCur)
        }
    }
}
</script>

5、CSS多余的文本文字使用省略号显示

①、超出一行试用省略号（这里是使用uni-app开发小程序的代码，如果是其他的也是异曲同工之处）

效果如图所示

<view class="omit">
    <view class="text_omit">国家网信办曝光一批涉未成年人电信诈骗典型案例【刑侦奋战百日行动】浙江：抓获网络诈骗犯罪嫌疑人2.07万、止付资金132万元</view>
</view>

style

.omit {
    margin-top: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    .text_omit {
        width: 80%;
        white-space:nowrap;
        overflow:hidden; //溢出内容隐藏
        text-overflow:ellipsis;
    }
}

②、文本超出两行三行多行

效果图

其他的多行效果以此类推（大都需要设置盒子的宽度）

.omit {
    margin-top: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    .text_omit {
        width: 80%;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden; //溢出内容隐藏
        text-overflow: ellipsis; //文本溢出部分用省略号表示
        display: -webkit-box; //特别显示模式
        -webkit-line-clamp: 3; //行数
        line-clamp: 2;
        -webkit-box-orient: vertical; //盒子中内容竖直排列
    }
}

(注意：有时添加在嵌入样式中不生效，需要添加在行内样式中）

继续开发，持续更新中....................

记录学习使用Uni-app开发微信小程序中遇到的小小问题整合

1、初始项目认识

2、uni-app无法启动微信开发者工具，报错

3、设置背景图片占满全屏

4、# 顶部双层tabbar切换页面内容

5、CSS多余的文本文字使用省略号显示