Then the problem is that this web page first involves the front-end development of mobile web. I prefer to use HTML5+bootstrap combination to achieve the aesthetic effect of the page. Other front-end tasks are handed over to JavaScript to solve (here I use native javascript code completely and do not use any framework, because considering that the mobile phone loads web pages at a slow speed, and many unused functions in the framework will also load with the web pages, which consumes user traffic).
After all the functions were ready, the customer was very satisfied with the trial, and then I submitted the code to the official server. However, the other party suddenly mentioned one thing: the page you made is indeed quite beautiful and has good compatibility, but this page can also be accessed using a browser on your computer, so others can casually view the source code of the page, and then copy the entire page. Can there be any way to prevent this? Then the question comes again. This is my first time doing WeChat secondary development. I have never encountered such a demand. How can I solve it?
I couldn't think of it for a while, and later I put this problem aside and did some backend business. When doing a data collection function in the background, the PHP code uses the parameter $_SERVER['HTTP_USER_AGENT']. I suddenly thought that when the browser visits a web page, it will send a UserAgent to the server, which contains some basic information about the browser and user operating system. Since WeChat has a built-in browser, will the UserAgent bring a unique logo related to WeChat when browsing web pages with WeChat (after all, Tencent is such a big company, and WeChat is one of their core products)? Just use the code to print its UserAgent to find out. The javascript code is as follows:
The code copy is as follows:
<script type="text/javascript">
alert(navigator.userAgent);
</script>
I got the result as shown on my phone:
Sure enough, I really saw something different. I believe that smart friends have discovered it. That's right, it's this thing: MicroMessenger/6.0.0.50_r844973.501. The string behind the slash is the version number of WeChat I am currently using, and the front should be a unique logo of WeChat. Actually, I initially thought it was MicroMessage, and thought that the Chinese translation means "micromessage", but after a closer look, I found that it was not. After looking up the dictionary, I realized that the word Messenger means "the person who reports the message, the person who sends the message", so I don't think it is strange. This logo should be said to be something other browsers will not have, so the solution is here, please see the code:
The code copy is as follows:
<script type="text/javascript">
// Regularly match the browser's UserAgent. If it does not contain the WeChat unique identifier, it is other browsers.
var useragent = navigator.userAgent;
if (useragent.match(/MicroMessenger/i) != 'MicroMessenger') {
// This warning box will block the current page and continue to load
alert('This access has been prohibited: You must use the built-in browser of WeChat to access this page!');
// The following code is to forcefully close the current page with javascript
var opened = window.open('about:blank', '_self');
opened.opener = null;
opened.close();
}
</script>
This code has been tested on Android, iPhone, iPad, and PC. As long as the web page is not opened inside WeChat, the warning box above will first pop up. At this time, the page behind is blank and nothing has been loaded. When clicking the confirm button of the warning box, the last three lines of code will forcefully close the current page. OK, here it has realized the original intention of the user, and it can be done simply.
Wait, can you really finish the work like this? Are you sure there will be no other problems? Of course not. In fact, this method will not make you rest assured, because forged UserAgents, this restriction can still be bypassed. In general, it is to guard against gentlemen but villains. Everyone knows. Of course, if any friend has a better way to solve this problem, please comment below that technology lies in sharing and communication with each other, haha.