uniapp專案如何運作在h5端-uni-app-PHP中文網

首頁

web前端

uni-app

uniapp專案如何運作在h5端

PHPz

May 22, 2023 am 11:40 AM

隨著行動互聯網的快速發展，越來越多的企業開始關注並使用跨端開發技術。 Uniapp作為一款整合了Vue.js和小程式開發能力的跨平台開發框架，已經在許多企業中得到了廣泛的應用。

Uniapp支援運行在不同的平台上，如微信小程式、支付寶小程式、百度小程式、H5端、App端等，本文將主要介紹如何運作Uniapp在H5端。

一、專案初始化

在執行Uniapp專案前，我們需要先進行專案的初始化。在命令列中輸入以下命令：

npm install -g @vue/cli

vue create -p dcloudio/uni-preset-vue my-project

登入後複製

其中，「my-project」為專案名稱，可依需求自行變更。初始化完成後，我們可以將該專案匯入開發工具進行編輯和調試。

二、寫頁面程式碼

在Uniapp中，我們可以透過寫Vue的單一檔案元件來實現對頁面的開發。以下是一個簡單的範例：

<template>
  <view class="container">Hello world!</view>
</template>

<style>
  .container {
    text-align: center;
    font-size: 24px;
    color: #333;
  }
</style>

登入後複製

在頁面中，我們可以使用各種元件來實現豐富多彩的互動效果。

三、設定H5運行環境

完成頁面的撰寫後，我們需要透過設定H5運行環境來實現專案的運作。

修改manifest.json

在專案的根目錄中，找到manifest.json文件，該文件定義了Uniapp專案的一些基本屬性。我們需要將下列屬性值設為true，來支援H5端的運作。

"h5": {
  "baseApiUrl": "",
  "devServer": {
    "host": "",
    "port": "",
    "compress": true
  },
  "subpackages": true,
  "postcss": true,
  "customVars": true
}

登入後複製

安裝依賴

執行下列指令安裝H5端所需的依賴套件：

npm install uni-html-webpack-plugin html-webpack-plugin webpack-dev-server webpack-cli webpack -D

登入後複製

設定webpack

#在專案的根目錄中，建立vue.config.js文件，並加入下列程式碼：

const path = require('path');
const fs = require('fs');

const UniHtmlWebpackPlugin = require('uni-html-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  configureWebpack: (config) => {
    const pages = {};
    const entries = {};
    const templateDir = './public';
    const templateExt = '.html';

    const appDirectory = fs.realpathSync(process.cwd());
    const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);

    const getEntries = (dir, ext) => {
      const entryFiles = fs.readdirSync(dir);
      let regx = new RegExp(ext + '$');
      return entryFiles.filter(file => regx.test(file)).reduce((entry, file) => {
        const filename = file.replace(new RegExp(ext + '$'), '');
        entry[filename] = path.join(dir, filename);
        return entry;
      }, {});
    };

    const getPages = (entryDir, templateDir, templateExt) => {
      const entryFiles = fs.readdirSync(entryDir);
      let regx = new RegExp('\.(' + Object.keys(entries).join("|") + ')$');
      return entryFiles.filter(file => regx.test(file)).reduce((pages, file) => {
        const filename = file.replace(regx, '');
        const template = path.join(templateDir, filename + templateExt);
        pages[filename] = {
          entry: entries[filename],
          template,
          filename: `${filename}.html`,
          chunks: ['chunk-vendors', 'chunk-common', filename]
        };
        return pages;
      }, {});
    };
    Object.assign(entries, getEntries('./src/pages', '.vue$'));
    Object.assign(pages, getPages('./src/pages', templateDir, templateExt));

    config.entry = entries;
    config.plugins = config.plugins.concat(
      Object.keys(pages).map((name) => {
        const page = pages[name];
        return new HtmlWebpackPlugin({
          title: name,
          template: page.template,
          filename: page.filename,
          chunks: page.chunks,
          inject: true,
          minify: {
            removeComments: false,
            collapseWhitespace: false,
            removeAttributeQuotes: false,
            minifyJS: false,
            minifyCSS: false,
            minifyURLs: false
          }
        });
      }),
      new UniHtmlWebpackPlugin()
    );
  }
};

登入後複製