WeChat small program practice tutorial-1: Jingxi shopping mall practice

1. Getting Started

1.1 uni-appsummary

Web site:

/

• 1

uni-app is a program that uses A framework for developing all front-end applications, where developers write a set of code that can be published to theiOSWe have a wide range of platforms such as Android, Web (responsive), and various small programs (WeChat/Alipay/Baidu/Headline/Flybook/QQQ/Fastfinger/Nail/Taobao), and fast apps.

1.2 Development tools

uni-app recommendedHBuilderXto developuni-appType of project. Key Benefits:

• Template Rich
• Sophisticated Smart Tips
• one-click operation

1.2.1 Downloading HBuilderX

Download URL:

/

• 1

• Click on the home page.Download
• Just download the development version

1.2.2 Installing HBuilderX

1. Place the downloadedzipThe package is decompressed.
2. Take the extracted folder and store it in theplain Englishin the directory (and cannot contain special characters such as parentheses).
3. double-clickto start HBuilderX.

1.2.3 Installation of scss/sass compilation

To facilitate writing styles, it is recommended to install thescss/sassplugin, the plugin download address is as follows:

/plugin?id=2046

• 1

strike (on the keyboard)Download the plugin and import into HBuilderXcenter

Click [Yes].

1.2.4 Shortcut Program Switching

[Tools] ->[Preset Shortcut Program Switching] ->[VS Code]

1.3 Creating a uni-app project

Different versions of HBuilderX may be slightly different ways and generate different default files, here the HBuilderX version is2.7.14。

1, [File] - & gt; [New] - & gt; [Project]

2、Fill in the project information

3、Create successfully

1.4 Directory structure

• components: uni-app component catalog
  • : Reusable a-components
• pages: Directory where business page files are stored
  • index
    • : index page
  • list
    • : list page
• static: directories that hold static resources (images, videos), etc..Note that static resources can only be stored in this
• : Vue initialization entry file
• : application configuration, used to configure the global style of the applet, life cycle functions, etc.
• : Configure packaging information such as app name, appid, logo, version, etc.
• : Configure page paths, page window styles, tabBar and other page class information.

1.5 Running the project into WeChat Developer Tools

1、Fill in your ownWeChat small programThe AppID:

2、Configure the installation path of [WeChat Developer Tools] in HBuilderX.

3, in the micro letter developer tools, through the [Settings] - & gt; [Security Settings] panel, open theWeChat Developer Toolsof the service port:

4. Running the project

1.6 UtilizationGitManaging projects

1.6.1 Local management

1. In the project root directory, create a new.gitignoreIgnore the file and configure it as follows:

/node_modules
/unpackage/dist

• 1
• 2

Note that we have ignored the dist directory in the unpackage, so by default the unpackage directory will not be tracked by Git (because no files exist in the unpackage directory anymore). At this point, in order for Git to track the unpackage directory correctly, as a general rule, we can create the in the unpackage directory..gitkeepof the file for placeholder.

2. Open a terminal, switch to the root directory, and run the following command to initialize the local Git repository

git init

• 1

3. Add all files to the staging area

git add .

• 1

4. Local submission of updates

git commit -m "init project"

• 1

1.6.2 Hosting your project in the code cloud

1. Register and activate a Code Cloud account/
2. Generate and configure the SSH public key, run thessh -t git@Detect whether the SSH public key is configured successfully

   • Generate SSH public keyssh-keygen -t ed25519 -C "Gitee SSH Key"

   • 

   • Detailed Configuration Link/base/account/SSH%E5%85%AC%E9%92%A5%E8%AE%BE%E7%BD%AE

3. Creating a Blank Code Cloud Repository
4. Uploading Local Projects to Code Cloud Warehouse