At present, the H5 page opened in the wechat browser of mobile phone cannot download pictures or files through the API of JavaScript.

Why can we download it in the default browser of the mobile phone, but when we open the browser in wechat, we cannot download it?

I think it is the permission of wechat APP. The permission to download is in the hands of the current APP. Wechat refuses to download files from the built-in browser, even though the browser has a corresponding download API, but you just can’t download.

Why did wechat do this? Is afraid of the common browser pop-up ads before the same situation. Without restrictions on image download permissions, many marketers will induce users to open web pages and automatically download advertising images and the like.

But long press the picture to save is still ok.

But it’s not impossible. Wechat does provide some apis to enable limited downloads.

Use jS-SDK of wechat

We can use the JS-SDK provided by wechat to communicate with wechat and obtain some mobile phone system capabilities.

The official line:

Wechat JS-SDK is a web development kit provided by wechat public platform for web developers based on wechat.

The usage is to import the JSSDK JS file in the page, and then you get a WX object. Then call the config method and pass in the appId, signature and other information (which needs to be obtained from the wechat public account platform). Then we can communicate with wechat through the method of WX object and use the ability of mobile phone system.

There is a wx.downloadimage () method for downloading images. But I actually think it’s for monkey business.

This method does not take a URL parameter, but a serverId.

Where does the serverId come from? It comes from another method, wx.uploadimage (). The wx.uploadimage () method is used to upload the local image, but once the upload succeeds, the callback gets a serverId.

Upload to where? Wechat’s own server. If you want to save to your own company’s server, you have to ask the company’s server to call the multimedia interface to retrieve the picture from the wechat server. What’s more, the wechat server only allows you to save it for three days

Yes, the images you can download are uploaded by users and are only valid for three days. What’s more, downloaded images don’t appear to be saved in the album, but in places where users can’t find them.

The conclusion is that it doesn’t work at all.

Wechat applets

Miniprogram provides a simple and efficient application development framework and rich components and apis to help developers develop services with native APP experience in wechat.

Wechat small program is not H5, because it is a native program under wechat, but the syntax is similar to the web development of that set.

The entry file of the Hello World project template of wechat applet is the following code.

// app.ts
App<IAppOption>({
  globalData: {},
  onLaunch() {
    // Display local storage capability
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    / / login
    wx.login({
      success: res= > {
        console.log(res.code)        
        // Send res.code to the backend for openId, sessionKey, unionId}})}})Copy the code

As you can see, there’s also a WX object here.

However, it is important to note that this WX object and the JS-SDK WX are completely different things and should not be confused.

Call the wx.downloadFile() method and pass in a URL to download the file. However, there are some restrictions, such as the maximum size of a single download of 200 MB, can only access the specified domain name configured by the development Settings, domain name must be ICP record, etc..

Downloaded files are saved in a local temporary path. If is the picture, you can call again wx. SaveImageToPhotosAlbum save () method to photo albums.

Talk for a long time, this micro channel applet is not H5 ah, if my micro channel applet through the web-view element embedded an H5 page, then I this H5 page is not more awesome, is it possible to use small program WX object ah.

I can’t.

Although it is embedded H5 page, but in fact it and small program is isolated, small program embedded H5 page and ordinary H5 page is no difference, or use the silly JS-SDK.

Wx. DownloadFile () is only for wechat applet and can not be used on H5, even if the H5 is embedded in the applet.

Then again, why are the capabilities of wechat applets much less limited than those of JS-SDK?

I think it is because the small programs developed by developers are supervised by wechat, and their release needs to be reviewed by wechat. Wechat also has the right to remove any small programs from the shelves.

So wechat is not afraid of small program developers abuse features, caught directly to you sealed.

So what’s the plan?

First of all, in the H5 page of wechat browser, we can’t let users download pictures, videos and documents (PDF, Word, etc.) by clicking the “Download” button, but open a new page for you to preview.

But for other files that wechat cannot preview (if zip package), it will download them.

But for displayed images, users can hold down the image to save it.

So our general solution is:

First of all to determine whether the browser is wechat browser, if not wechat browser, download the original logic.

If it is a picture, a pop-up window pops up when you click the download button, prompting the user to long press the picture to download;

If it is a video or document file, prompt the user to download the file using the default browser. It is not a good idea to direct the user to click on the upper right corner to open the link in the default browser.

We can copy the file link when we click the download button, and then let the user open the default browser and paste the link to download. This hogging of the user’s clipboard is actually not a good idea.

Or simply block the download button, or pop up only on the PC download prompt.

If it’s a different type of file, you can download it.

At the end

Today, I talked about some reasons, misunderstandings and solutions for wechat browser not being able to download pictures. I hope it will help you.

I am front-end watermelon brother, welcome to pay attention to me.