关于uni-app:uniapp打包web项目uniapp开发vue网页应用

uni-app 是什么

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

本文内容

应用 uni-app 这个平台进行开发 web 利用，语法是 Vue.js 的。

筹备

1、下载 HBuilder 下载地址：htttps://hx.dcloud.net.cn/
2、创立我的项目

3、开发

代码

pages/index/index.vue

<template>
    <view class="content">
        <ul v-for="reslist in reslists">
            <li @click="resinfo(reslist.res_id)">
                <view class="res_title">{{reslist.res_title}}</view>
                <view class="res_category_equal">
                    <span class="res_category">{{reslist.res_category}}</span>
                    <span class="res_equal">{{reslist.res_equal}}</span>
                </view>
            </li>
        </ul>
    </view>
</template>

<script>
    export default {data() {
            return {reslists:''}
        },
        onLoad() {
            uni.request({
                url: 'http://demo.likeyunba.com/api/reslist/reslist.php',
                header: {'header': 'application/json'},
                success: (res) => {
                    
                    // 将获取到的后果存入 reslists 数组
                    this.reslists = res.data;
                }
            });
        },
        methods: {resinfo:function(res_id){
                
                // 跳转到 resinfo 页面
                uni.navigateTo({url: '../resinfo/resinfo?res_id=' + res_id});
            }
        }
    }
</script>

<style>
    *{
        padding: 0;
        margin: 0;
    }
    page{background: #eee;}
    .content{
        width: 90%;
        margin:30px auto;
    }
    .content ul li{
        list-style: none;
        width: 100%;
        height: 80px;
        background: #fff;
        margin-bottom: 10px;
        border-radius: 10px;
    }
    .content ul li .res_title{
        width: 100%;
        height: 40px;
        line-height: 50px;
        font-size: 17px;
        color: #333;
        text-indent: 15px;
        white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all;
    }
    .content ul li .res_category_equal{
        width: 100%;
        height: 40px;
        line-height: 30px;
        font-size: 14px;
        color: #999;
        text-indent: 15px;
    }
    .content ul li .res_category_equal .res_category{float: left;}
    .content ul li .res_category_equal .res_equal{float: left;}
    .content ul li .res_category_equal .res_creattime{
        float: right;
        font-size: 13px;
        margin-right: 15px;
    }
</style>

pages/resinfo/resinfo.vue

<template>
    <view class="content">
        <view class="res_title">{{resinfo.res_title}}</view>
        <view class="res_category_equal_creattime">
            <span class="res_category">{{resinfo.res_category}}</span>
            <span class="res_equal">{{resinfo.res_equal}}</span>
            <span class="res_creattime">{{resinfo.res_creattime}}</span>
        </view>
        <view class="res_content">{{resinfo.res_content}}</view>
    </view>
</template>

<script>
    export default {data() {
            return {resinfo:''}
        },
        onLoad(e) {
            uni.request({
                url: 'http://demo.likeyunba.com/api/reslist/resinfo.php?res_id='+e.res_id,
                header: {'header': 'application/json'},
                success: (res) => {
                    
                    // 将获取到的后果存入 resinfo 数组
                    this.resinfo = res.data[0];
                }
            });
        }
    }
</script>

<style>
    *{
        padding: 0;
        margin: 0;
    }
    page{background: #eee;}
    .content{
        width: 90%;
        margin:30px auto;
    }
    .content .res_title{
        width: 100%;
        margin-top: 15px;
        font-size: 20px;
    }
    .content .res_category_equal_creattime{
        width: 100%;
        height: 30px;
        line-height: 30px;
    }
    .content .res_category{
        font-size: 14px;
        color: #999;
        float: left;
        margin-right: 10px;
    }
    .content .res_equal{
        font-size: 14px;
        color: #999;
        float: left;
        margin-right: 10px;
    }
    .content .res_creattime{
        font-size: 14px;
        color: #999;
        float: right;
    }
    .content .res_content{
        width: 100%;
        margin-top: 20px;
        font-size: 15px;
    }
</style>

打包设置

须要返回 manifest.json 这个文件进行设置。具体设置请参考下图：

打包

打包设置实现之后，就能够进行打包。

发动打包之后，零碎就会主动进行编译，这个时候只须要进行期待。

打包实现后，就能够看到一个 static 文件夹和 index.html 文件。

把这些上传到服务器就能够政策拜访。

截图演示

运行成果如图。

线上演示

http://demo.likeyunba.com/uniapp-web-demo/#/

源码

https://likeyun.lanzout.com/iEh0R0pzgaah

作者

TANKING

学习求教：sansure2016