uni-app打包web项目（uni-app开发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