Giải pháp tạo động tệp cấu hình uniapp pages.json

Gần đây đã tiếp quản một dự án dựa trên ứng dụng duy nhất dự án phát triển này, cá nhân tôi ngưỡng mộ các chức năng mạnh mẽ của nó trong việc phát triển các chương trình h5\app\mini bằng cách sử dụng cùng một bộ mã. Nhưng tập tin cấu hình của nó trang.json Nó cũng khiến tôi rất chán nản, không vì lý do gì khác ngoài việc nó là một bản dead-script JSON Tập tin rất bất tiện để quản lý.

Sau khi tìm kiếm một số thông tin, tôi hy vọng nó có thể được sử dụng trang.js tập tin thay thế trang.json Các tệp cấu hình (khả năng động của JS có thể dễ dàng phân chia các cấu hình định tuyến), nhưng chưa tìm thấy giải pháp tốt nào. Có một cái, nhưng nó quá phức tạp, nên tôi nghĩ tốt hơn là chỉ đếm bóng thôi.

Vì vậy, tôi tự mình sử dụng nó Nodejs Tôi đã viết một kế hoạch bằng tay, mặc dù nó hơi thô sơ, nhưng nó rất nhẹ về sự phụ thuộc và tương đối thuận tiện khi sử dụng. Cá nhân tôi cảm thấy nó khá hữu ích nên tôi đặc biệt viết một bài để chia sẻ với mọi người.

Xây dựng kiến ​​trúc tập tin

Đầu tiên chúng ta tạo một cái mới bộ định tuyến thư mục, sau đó xây dựng cấu trúc tệp theo định dạng sau.

bộ định tuyến # Thư mục định tuyến động ├── build.js # Biên dịch tệp chính cấu hình định tuyến ├── index.js # Tệp cấu hình chính └── mô-đun # Tệp mô-đun định tuyến động └── small.js # Tài liệu định tuyến mô-đun phân chia

viết build.js tài liệu

Mã này như sau:

const fs = require('fs') const path = require('path') const router = require('./index.js') // Chuyển đổi tệp cấu hình mô-đun định tuyến phụ sang định dạng tệp cấu hình uniapp const buildRouter = Route => { const res = [] const { baseUrl, Children } = Route Children.forEach(i => { const obj = { path: baseUrl + i.path, style: { NavigationBarTitleText: i.name } } Object.keys(i).forEach(ii => { !['path', 'name'].includes(ii) && (obj.style[ii] = i[ii]) }) res .push(obj) }) return res } // Tự động tải tập tin cấu hình định tuyến con thư mục './modules' const getRouter = () => { const srcPath = path.resolve(__dirname, './modules') const result = fs.readdirSync(srcPath) let router = [] result.forEach(r => { const Route = require('./modules/' + r) router = [...router, ...buildRouter(route)] }) return router } // Xây dựng trang và ghi vào tệp pages.json router.pages = getRouter() fs.writeFile( __dirname + '/../pages.json', // Tôi sử dụng hai khoảng trắng để thụt lề pages.json. Nếu bạn thích các ký tự tab, bạn có thể thay thế tham số thứ ba bằng \t. JSON.stringify(router, null, ' '), e => e ? console.error(e) : console.log('tệp cấu hình pages.json được cập nhật thành công') )

build.js Tệp này là tệp chính và được sử dụng để biên dịch trang.json của. nếu bạn có nútjs Từ góc độ lập trình, đây là một câu hỏi rất đơn giản. Nếu không, đừng lo lắng về nó, chỉ cần sao chép nó.

Viết tập tin index.js

Tài liệu này không nói gì nhiều ngoài trang.json trong tập tin này trang Nội dung khác bên ngoài các trường có thể được xuất khẩu. File mẫu của tôi ở đây như sau:

module.exports = { GlobalStyle: { NavigationBarTextStyle: 'white', NavigationBarTitleText: 'Giao hàng bằng tài xế', NavigationBarBackgroundColor: '#4a9ff8', BackgroundColor: '#4a9ff8' }, tabBar: { color: '#666', selectedColor: '# 4a9ff8', màu nền: '#f7f7f7', borderStyle: 'trắng', danh sách: [ { pagePath: 'pages/index/index', iconPath: 'static/images/icon-homeed.png', selectedIconPath: 'static/images/icon-home.png', text: 'Home' }, { pagePath: ' trang/tác vụ/tác vụ', iconPath: 'static/images/icon-tasked.png', selectedIconPath: 'static/images/icon-task.png', text: 'Task' }, { pagePath: 'pages/my/my', iconPath: 'static/images/icon-myed.png', selectedIconPath: 'static/images /icon-my.png', văn bản: 'Của tôi' } ] } }

Mọi thứ ở đây được viết theo cấu hình chính thức. Vì không có nhiều nội dung trong phần này nên không cần thiết phải chia nhỏ ra. Điểm khác biệt là đây là JS nên không cần phải viết dấu ngoặc kép đâu ~ haha. . .

Viết tập tin định tuyến phụ của mô-đun

Mã trên:

module.exports = { baseUrl: 'pages/small/', Children: [ { path: 'register', name: 'Register' }, { path: 'login', name: 'Login' } ] }

Xuất một đối tượng ở đâu url cơ sở Nó đề cập đến thư mục nơi các tập tin của bạn được lưu trữ. Lý do chia tách là vì chúng tôi không muốn viết những đoạn mã lặp đi lặp lại này vào đường dẫn của mỗi trang.

những đứa trẻ là đường dẫn và tiêu đề của mỗi trang được bao phủ bởi tuyến đường phụ.
ở đây và ứng dụng duy nhất mặc định trang.json Định dạng hơi khác một chút, tôi có build.js trong tập tin buildRouter() Hàm được sử dụng để chuyển đổi định dạng dữ liệu này. Mục đích là làm cho mã cấu hình định tuyến phụ của chúng ta ngắn gọn hơn.

Điều cần lưu ý ở đây là nếu bạn có nhu cầu sử dụng các mục cấu hình khác thì chỉ cần ghi trực tiếp vào. Hóa ra định dạng là gì cũng được, như thế này:

module.exports = { baseUrl: 'pages/small/', Children: [ { path: 'register', name: 'Đăng ký', 'app-plus': { titleNView: { nút: [ { text: 'Message', fontSize: '16px' } ] } } }, { path: 'đăng nhập', tên: 'đăng nhập' } ] }

Cái ở trên 'ứng dụng cộng' Nó sẽ được chèn tự động. Chỉ cần viết nó ở đây theo yêu cầu của tài liệu chính thức. Nói chung, điều này được sử dụng ít hơn, vì vậy tôi sẽ không thực hiện bất kỳ xử lý bổ sung nào về việc này.

sử dụng

Sau khi xây dựng mã này, hãy chạy nó trực tiếp từ dòng lệnh nút-router/build.js sẽ được tạo trong thư mục gốc của dự án trang.json tài liệu.
Điều cần giải thích ở đây là dự án của tôi sử dụng hbuilder Dự án được tạo bởi giao diện GUI nên thư mục gốc là thư mục gốc của dự án.Nếu dự án được tạo bằng công cụ CLI, thư mục gốc ở trên sẽ trở thành thư mục của dự án src Mục lục.

Nếu bạn muốn tải mã trực tiếp, bạn có thể kiểm tra kho của tôi https://github.com/fengcms/uniapp-pages-json-cli-build Nếu bạn vào github để tải xuống, hãy cho tôi một lượt thích!

Bản quyền và Giấy phép

Bản quyền thuộc về FungLeo(web@fengcms.com)

Giấy phép: MIT