Problems you may encounter in front-end development work and their solutions

• 1. The xxx code dependency analysis in the uni-app applet is ignored
• 2. The uni-app pop-up list scrolls, and the content under the pop-up box also scrolls.
• 3. Normal custom components of the uni-app applet do not take effect

• 4. The gap problem at the bottom of the pop-up layer of uni-app popup

• 5. Solution to the problem that the iOS page can slide up and down after customizing the navigation bar in the uni-app applet

• 6. Share the QR code in uni-app and save it to the photo album

• 7. Vue reports an error when running

---

1. The xxx code dependency analysis in the uni-app applet is ignored

This problem occurred in a new task. The big red color looked very annoying when it was started. Fortunately, the error message also provided a solution, as shown in the figure below.

"ignoreDevUnusedFiles": false,
    "ignoreUploadUnusedFiles": false,

---

2. The uni-app pop-up list scrolls, and the content under the pop-up box also scrolls.

In the pop-up component code, you need to add @touchmove.stop.prevent="moveHandle" to the outermost view to solve this problem.

3. Normal custom components of the uni-app applet do not take effect

This is a bizarre problem. Normal custom components are introduced, registered, and used on the page, but they are not displayed and no other errors are reported after compilation. Why is this? I don’t know... This hbuilder definitely can’t Is it okay to catch me alone? I checked and found that other people have also encountered this problem.

To sum up, there are roughly two solutions as follows:

1. Every time you reference a new component, close the compiler and then restart it.

2. After creating a new component, create a new page and recompile it (personal test is valid) . The newly created component will take effect. It is so bizarre.

If there is a better way, you are welcome to suggest it. I don’t want to use the two stupid methods above anymore.

4. The gap problem at the bottom of the pop-up layer of uni-app popup

As shown in the picture, the problem I encountered was that there was a gap in the pop-up layer at the bottom . I looked at it and it seemed to be a style problem. It came with a padding-bottom, so I looked at the source code and the problem was solved.

Solution:

First find the source code of Popup

Because the bottom pop-up layer is set, we focus on the bottom pop-up style.

5. Solution to the problem that the iOS page can slide up and down after customizing the navigation bar in the uni-app applet

When I mentioned this, I thought, it’s great, it’s another opportunity to learn more!!! (My true thoughts - arrest all people who use Apple), it’s fine on Android, but it has problems, please Look at the following questions:

Problem description:
During the development of the mini program, I customized the navigation bar, but found that the entire page can be moved up and down in iOS, resulting in a very poor experience.

Solution:
"disableScroll": true, //ios prohibits the entire page from sliding up and down

 {
    "path": "home/index",
    "style": {
     "navigationStyle": "custom",//关闭原生导航栏
     "disableScroll":true,//ios禁止页面整体上下滑动
   }
 },

Problem Description:

As shown in the picture below: It is normal on real Android phones and development tools, but when it comes to Big Apple (I don’t use Big Apple, I don’t know that it can still swipe left and right~~~)

This is a style issue, so let’s look at the original page style code;

solution:

At that time, I didn’t know what this problem was. Later, I asked my colleagues for advice and thought about it carefully. In fact, this problem can be easily solved.

The initially set width is 100%, but padding is set below, and the default calculation method for the box width is content-box, which is explained in detail in the figure below

So in the parent element in the corresponding html page structure, add this sentence to its style to solve the problem

6. Share the QR code in uni-app and save it to the photo album

This shouldn't be a difficulty. This is because I haven't done it before and I think it's very fresh, so I share it here. The function to be implemented looks like this. It appears in the form of a pop-up window and the user can choose to forward it to friends or save the photo album . Then repost from album

1. Page structure, because it is in the form of a pop-up window, uni-popup is chosen.

<uni-popup ref="popup" animation mask-background-color="rgba(0,0,0,0.2)" @change="popChange">
			<view class="popup-container">
				<view class="inner">
					<view class="item" @click="sharePictrue">
						<text class="iconfont icon-fenxiangxiaochengxu" style="margin-right: 40rpx;"></text>
						<text class="text btn">转发给好友</text>
						<!-- <button size="mini" id="sharePictrue" style="border:none;" plain open-type="share" class="text btn">转发给好友</button> -->
						<text class="iconfont icon-xiangyou1" style="float:right"></text>
					</view>
					<view class="underline"></view>
					<view class="item" @click="saveToAlbum">
						<text class="iconfont icon-xiangcexuanze" style="margin-right: 40rpx;"></text>
						<text class="text">保存相册</text>
						<!-- <text class="iconfont icon-xiangyou1" style="float:right"></text> -->
					</view>
					<view class="underline"></view>
					<view class="cancel" @click="close">取消</view>
				</view>
			</view>
		</uni-popup>

2. js part-save photo album

The prerequisite for saving the album is that you have this picture (then you must get this picture before, for example, by calling the interface to get the picture)

uni.getFileSystemManager().writeFile writes files

Detailed address: FileSystemManager.writeFile(Object object) | WeChat Open Document

uni.saveImageToPhotosAlbum saves pictures to the system album

3. Share QR code

wx.showShareImageMenu()

sharePictrue() {
				wx.showShareImageMenu({
					path: '../../static/ph_fit_qrcode.png' ||
						this.qrsrc
				})
			},

7. Vue reports an error when running

Get a new task, run the command in the terminal according to the readme file instructions and report an error, as shown in the figure below

1. Reason for error:

The node version is too high - At the beginning, the node I installed by default was the latest version, and the project was an old project. I checked and found that the error was caused by the node version being too high. There was also node-sass in the error message. , so I checked the version of node-sass installed before

You can see that this version is version 4.14, so open the npm Chinese official website

Solution:

Uninstall the previous node in the control panel, install the corresponding node version Node.js Chinese website , find the corresponding node version to download, and install it all the way. You can check whether the installation is successful in the cmd window. Follow the command again to install the dependency package and start it. La!

Summarize

The above is what I want to share today. I hope it can help you in front of the screen, bye~