Problems and knowledge points encountered in small program projects

1. Knowledge about mobile terminals

1.1. Physical pixels

1. The resolution of the screen .
2. The device can control the smallest unit of display, and the physical pixel can be regarded as the corresponding pixel.

1.2, device independent pixel & css pixel

A device-independent pixel (also called a density-independent pixel) can be considered as a point in the computer coordinate system, which represents a point that can be used and controlled by the programvirtual pixel(For example: css pixels, but in the android machine, css pixels are not called " css pixels ", but " device independent pixels "), and then converted into physical pixels by the relevant system.

1.3、dpr比 & DPI & PPI

1. dpr: device pixel ratio, physical pixel/device independent pixel = dpr, generally take the dpr of Iphone6 ​​as dpr=2.
2. PPI: The number of pixels on a one-inch display.
3. DPI: The earliest refers to the number of ink dots printed by the printer on a unit area. The more ink dots, the clearer it is.
   
   
   

1.4. Adaptation scheme for mobile terminals

1.4.1, viewport adaptation

• Viewport:

1. Layout viewport: web page width (default 980px).
2. Visual Viewport: What you see is what you get.
3. Ideal viewport.

• Viewport adaptation is very simple, using meta tags.

1.4.1.1. Why do viewport adaptation

1. When mobile phone manufacturers produce mobile phones, the default page width of most mobile phones is 980px.
2. The actual viewport width of the mobile phone must be less than 980px, such as iPhone6 ​​is 375px.
3. Development requirements: The 980 page needs to be completely displayed on the mobile phone screen without scroll bars.

1.4.1.2, Realization

<meta name="viewport" content="width=device-width,initail-scale=1.0">

width = device-width; Let our visual viewport width be equal to the layout viewport width.

• At this time, the viewport is not finished

1.4.2, rem adaptation

1.4.2.1. Why do rem adaptation

1. There are too many models, and different models have different screen sizes.
2. Requirements: The content of a set of design drafts has the same effect on different models. According to the different screen sizes, the content on the page also changes accordingly.

1.4.2.2, Realization

function remRefresh() {
    
    
    let clientWidth = document.documentElement.clientWidth;
    // 将屏幕等分10分
    let rem = clientWidth / 10
    document.documentElement.style.fontSize = rem + 'px'
    document.body.style.fontSize = '12px'
}
window.addEventListener('pageshow', () => {
    
    
    remRefresh()
})
// 函数防抖
let timeoutId;
window.addEventListener('resize', ()=> {
    
    
    timeoutId && clearTimeout(timeoutId),
    timeoutId = setTimeout(() => {
    
    
        remRefresh()
    }, 300)
})

2. Uniapp related knowledge

2.1. Introduction to uni-app

uni-app is a framework for developing all front-end applications with Vue.js. Developers write a set of codes, which can be published to ios, Android, H5, and various small programs (WeChat/Alipay/Baidu/Toutiao/QQ/DingTalk/Taobao), quick apps and other platforms.
uni-app official document : https://uniapp.dcloud.net.cn/

2.2. Development tools

uniapp officially recommends using HBuilderX to develop uniapp type projects. Main benefits:

• rich template
• Perfect Smart Tips
• One-click operation
  Of course, you can still choose to use your favorite editors such as VS Code and Sublime according to your personal preferences.

2.2.1. Download HBuilderX

1. Visit the official homepage of HBuilderX: https://www.dcloud.io/hbuilderx.html
2. Store the decompressed folder in a pure English directory (and cannot contain special characters such as brackets)
3. Double-click HBuilderX.exe to start HBuilderX

2.2.2. Install scss/sass and other plug-ins

In order to facilitate writing styles (for example: <style lang="scss"></style>), it is recommended to install the scss/sass compilation plugin. Plug-in address: https://ext.dcloud.net.cn/plugin?name=compile-node-sass
After entering the plug-in download page, click the import plug-in button using HBuilderX in the upper right corner to install it automatically. The screenshot is as follows:

2.2.3. Shortcut key scheme switching

Operation steps: Tools -> Preset Shortcut Key Scheme Switching -> VS Code

2.2.4. Modify the basic settings of the editor

Operation steps: Tools -> Settings -> Open Settings.json and configure as needed

2.3. Create a new uni-app project

1. File -> New -> Project

2. Fill in the basic information of the project

3. Project created successfully

2.4. Run the project to the WeChat developer tool

1. Fill in the AppID of your own WeChat Mini Program:

2. In HBuilderX, configure the installation path of "WeChat Developer Tools":

3. In the WeChat Developer Tools, open the service port of the "WeChat Developer Tools" through the Settings -> Security Settings panel:

4. In HBuilderX, click Run -> Run to Mini Program Simulator -> WeChat Developer Tools in the menu bar, after compiling the current uniapp project, it will automatically run into the WeChat Developer Tools, so that it is convenient to view the project effect and debug:

2.5. Configuration

2.5.1. Configure tabBar effect

Modify the pages.json configuration file in the project root directory, and add the configuration node of tabBar as follows:

{
    
    
"tabBar": {
    
    
"selectedColor": "#C00000",
"list": [
{
    
    
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "static/tab_icons/home.png",
"selectedIconPath": "static/tab_icons/home-active.png"
},
{
    
    
"pagePath": "pages/cate/cate",
"text": "分类",
"iconPath": "static/tab_icons/cate.png",
"selectedIconPath": "static/tab_icons/cate-active.png"
},
{
    
    
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "static/tab_icons/cart.png",
"selectedIconPath": "static/tab_icons/cart-active.png"
},
{
    
    
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "static/tab_icons/my.png",
"selectedIconPath": "static/tab_icons/my-active.png"
}
]
}
}

2.5.2. Modify the style effect of the navigation bar

1. Open the global configuration file pages.json
2. Modify the globalStyle node as follows:

{
    
    
"globalStyle": {
    
    
"navigationBarTextStyle": "white",
"navigationBarTitleText": "黑马优购",
"navigationBarBackgroundColor": "#C00000",
"backgroundColor": "#FFFFFF"
}
}

2.5.3. Configure network request

Due to the limitation of the platform, axios is not supported in the applet project, and the original wx.request() API function is relatively simple, and does not support
global customization functions such as interceptors. Therefore, it is recommended to use the @escook/request-miniprogram third-party package in the uni-app project to initiate network data requests.
Official document: https://www.npmjs.com/package/@escook/request-miniprogram
Finally, in the main.js entry file of the project, configure it as follows:

import {
    
     $http } from '@escook/request-miniprogram'
uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://www.uinav.com'
// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
    
    
uni.showLoading({
    
    
title: '数据加载中...',
})
}
// 请求完成之后做一些事情
$http.afterRequest = function () {
    
    
uni.hideLoading()
}

2.5.4. Configure subcontracting of applets

Subpackaging can reduce the loading time of applets when they are first launched.

1. In pages.json, the subPackages node is declared at the same level as the pages node, which is used to define the subpackage-related
   structure:

{
    
    
  "pages": [
    {
    
    
      "path": "pages/home/home",
      "style": {
    
    }
    },
    {
    
    
      "path": "pages/cate/cate",
      "style": {
    
    }
    },
    {
    
    
      "path": "pages/cart/cart",
      "style": {
    
    }
    },
    {
    
    
      "path": "pages/my/my",
      "style": {
    
    }
    }
  ],
  "subPackages": [
    {
    
    
      "root": "subpkg",
      "pages": []
    }
  ]
}

2. Right-click on the subpkg directory, click the New Page option, and fill in the relevant information of the page:
   

2.6. Publishing Mini Programs

2.6.1. Why release

1. Only after the Mini Program is released can it be searched and used by users.
2. In order to facilitate debugging, the applet during development contains sourcemap-related files, and the code is not compressed, so the size is relatively large, and it is not suitable for direct release as an online version.
3. By executing "publishing small programs", the volume of small programs can be optimized and the running performance of small programs can be improved.

2.6.2. Publishing Mini Program Process

1. Click Release on the menu bar of HBuilderX->Mini Program-WeChat (only for uni-app)

2. After filling in the name and AppId of the Mini Program to be released in the pop-up box, click the release button.

3. In the console of HBuilderX, check the progress of the release and compilation of the applet.

4. After publishing and compiling, a new WeChat developer tool interface will be opened automatically, click the upload button on the toolbar at this time

5. Fill in the version number and project remarks, click the upload button, and click OK after completion.

6. The code uploaded through the WeChat developer tool is in the development version list of version management by default, as shown in the figure:

7. Submit the development version for review -> release the version that has passed the review and go online to realize the release and launch of the applet:

2.7. Other (published as Android App) process

1. Click the Not logged in button on the left side of the HBuilderX status bar to log in.
2. Open the manifest.json configuration file in the root directory of the project. In the basic configuration panel, obtain the uni-app application ID and fill in the application name:
3. Switch to the App icon configuration panel, click the browse button, select a suitable picture, and then click to automatically generate all icons and replace them:
4. Click Publish->Native App-Cloud Packaging on the menu bar:
5. Check the packaging configuration as follows:
6. Check the packaging progress information in the console:
7. Click the link to download the apk installation package, and install it on the Android phone to check the package effect.

3. Overview of Mini Program Features

1. There is no DOM.
2. Component-based development: a collection of codes with specific functional effects.
3. The volume is small, and the volume of a single compressed package cannot exceed 2M, otherwise it will not be able to go online.
4. Four important files of the applet:
   a) .js
   b) .wxml -->view structure-->html
   c) .wxss -->view style-->css
   d) .json -->view data-- > json file
5. Mini program adaptation scheme: rpx (responsive pixel responsive pixel unit)
   a) Mini program adaptation unit: rpx.
   b) Specify any screen bottom width to be 750rpx.
   c) The applet will automatically calculate the size of the rpx value according to the width of the screen.
   d) Under iPhone6: 1rpx = 1 physical pixel = 0.5px.