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>