Overview:

This document provides an analysis of a product that uses the Uniapp framework. The product is run using the CLI method and incorporates the uview UI framework. The document also mentions several features and modules that are integrated into the product, such as uni-simple-router, luch-request, and lodash-es. Additionally, the document provides instructions for installing and configuring the product.

Features:

• UI Framework: uview 1.8.8
• npm Terminal:
  • Recommended to switch to Taobao source for users in China.
• HbuilderX Integration:
  • After importing the project into HbuilderX, right-click and select “Re-recognize project type”.
• WebStorm Integration:
  • Requires the rpx plugin wechat-mini-program-support to enable support for WeChat Mini Program.
• VS Code Formatting Issue:
  • VS Code does not support one-click formatting due to eslint problems.
• I18n Integration
• http with async/await
• Hot Update Prompt and Enhancement
• Login and Package Pages Templates
• Mock Integration
• Husky Integration
• RSA Encryption/Decryption
• Socket Integration
• uni-simple-router Integration
• luch-request Integration
• Hot Update Module Integration
• WeChat Mini Program/Official Account Sharing Module
• Default Pages: Login, Register, Forgot Password, Binding Phone Number, Agreement, Product Poster Generation, Promotion Poster Generation
• JWT Renewal
• Retry Mechanism for Requests and Handling 404
• Configuration of Navigation Bar (referencing uniappDemo)
• Startup Screen Configuration (manifest.json)
• Native Protocol (https://ask.dcloud.net.cn/article/36937)
• Lodash-es: A Consistent, Modular, High-Performance JavaScript Utility Library (https://www.lodashjs.com/)
• qs: URL Parsing into Objects (https://juejin.cn/post/7125723650627469319)

Installation:

To install and configure the theme, follow these steps:

1. Transform the regular project into a CLI project by referring to the official tutorial at https://uniapp.dcloud.net.cn/quickstart-cli.html.

2. Pay attention to the following considerations when developing components:

   • Use @tap for click events within <view></view> tags.
   • Use @click for click events within <u-button></u-button> tags.
   • When passing values or invoking events from child components to parent components, use this.$emit('xxxx'), where xxxx is used in the parent component with @xxxx.

3. Use the following code to perform routing jumps, where path must start with /, e.g., /pages/index/index:

   this.$uni.navigateTo({url: '/pages/index/index'})
   

4. For conditional compilation in pages.json, pay attention to the following:

   • Preview PDF: The highest supported version is pdfjs-2.6.347. Download the pdf plugin from http://mozilla.github.io/pdf.js/getting_started/ and extract the build and web folders. Create the path hybrid/html/pdf under src in your Uniapp project, and place the two folders inside it. Note that pdf.js does not support cross-origin requests (https://blog.csdn.net/xinlingdexueba/article/details/79555678).
   • “File origin does not match viewer’s” error: Comment out the code in viewer.js. Create a preview-pdf.vue component, following the reference at https://github.com/Eveveen/uni-app-pdf. Use this component for previewing.

5. For hot update solutions, use the plugin at https://excalidraw.com/ and open docs/app-upgrade.excalidraw.

6. Use less (not recommended), and add the dependency accordingly. If using pnpm (not recommended), note that it may cause compilation issues. Refer to https://juejin.cn/post/7077918263954374670#heading-7 for more details.

7. To resolve potential issues with pnpm causing package unavailability during builds, it is recommended to use npm instead. Add the following code to package.json:

   "pnpm": {
     "peer-alias": {
       "preact": "npm:preact@10.5.8"
     }
   }
   

8. For different platform builds, use the following naming convention in package.json:

   • ${env}:${platform}: ${env} represents the environment (e.g., development) and ${platform} represents the platform. Commands with the dev prefix are for the development environment, and build is for production packaging.

9. For different environment builds, create .env.xxx files in the root directory to differentiate the environments. Append --mode ${env} to the startup command. For example, create .env.test for the test environment and append --mode test to the dev:h5 startup command.

10. To package with Docker, modify the COPY command in the Dockerfile. The default is set to h5.

11. For eslint configurations, to format the entire file range without warnings, place /\_ eslint-disable \_/ at the top of the file. To temporarily ignore rules, use comments to wrap the code block. To enable or disable warnings for specific rules, use comments to wrap the code block. To disable warnings for specific lines, use the following formats:

• Disable a specific rule on a specific line: // eslint-disable-next-line <rule-id>.
• Disable multiple rules on a specific line: // eslint-disable-next-line <rule-id1>, <rule-id2>.

12. Useful plugins include:

• Plugin for Cool Styles and Animation Effects: https://ext.dcloud.net.cn/plugin?id=2009
• Plugin for Cool Styles and Animation Effects: https://ext.dcloud.net.cn/plugin?id=3685
• mp-html Rich Text Component (compatible across all platforms and editable): https://ext.dcloud.net.cn/plugin?id=805
• Autumn Cloud uCharts: High-performance cross-platform chart component: https://ext.dcloud.net.cn/plugin?id=271
• luch-request: https://ext.dcloud.net.cn/pl

Summary:

This product analysis provides an overview of a product that utilizes the Uniapp framework and uview UI framework. It lists several key features and modules integrated into the product, including uni-simple-router, luch-request, lodash-es, and qs. The installation guide provides step-by-step instructions for setting up the theme, while also mentioning important considerations for component development, routing jumps, conditional compilation, and eslint configurations. Additionally, it highlights the availability of useful plugins for enhancing the product.