WeChat applet local image processing by screen size, WeChat Applet Screen Size

Small Program local image processing by screen size, small program screen size

Small Program local image processing by screen size

Preface:

I personally feel that the IDE of small programs is sometimes inconvenient to use. Maybe it is the reason why I used Eclipse before. The development tool of the applet does not support directly copying files to the directory. Therefore, you must first import the image files to the local directory, and then compile the tool class to obtain the width and height of the screen, the specific steps are as follows.

1. Import local Images

Step 1: select a project from the leftmost menu

Step 2: select Open and copy the image to the new image folder.

After the image is imported, the overall directory structure of the project is shown in,

2. Adaptive image width and height by screen size

Step 1: Write a tool function to return the encapsulated screen height and width

Open the utils. js file in the utils folder under the root directory. I personally think this is similar to the tool class in Java. The specific code is as follows:

/*** Obtain the width and height of the Mobile Display. * parameter: e, * return viewSize (including the width and height of the display) */function getViewWHInfo (e) {var viewSize ={}; var originalWidth = e. detail. width; // Original Image width var originalHeight = e. detail. height; // The original height of the image wx. getSystemInfo ({success: function (res) {// read the system width and height var viewWidth = res. required wwidth; var viewHeight = res. windowHeight; console. log (originalWidth + "" + originalHeight); console. log ("width:" + viewWidth + "height" + viewHeight); viewSize. width = viewWidth; viewSize. height = viewHeight ;}}); return viewSize ;}// export interface -- the module must be written. exports = {getViewWHInfo: getViewWHInfo}

Step 2: edit the script file

Open index in the index folder. js file, delete all the original content, and copy the following code directly. First, call the require function to instantiate the tool class. The data is set in index. variables to be read in the wxml file. The imageLoad function binds the bindLoad and imageUtil image loading events. the getViewWHInfo (e) clause calls the preceding custom function.

// Index. js // obtain the application instance var imageUtil = require ('.. /.. /utils/util. js '); var app = getApp () Page ({data: {imageUrl :".. /image/1.jpg", viewHeigh: "", viewWidth: ""}, onLoad: function () {}, imageLoad: function (e) {var viewSize = imageUtil. getViewWHInfo (e); // console. log (viewSize. heigh); this. setData ({viewHeigh: viewSize. height, viewWidth: viewSize. width });}})

Step 3: Edit image tags

Open index in the index folder. wxml file, delete all the original content, insert the following Image Code and copy and paste it directly. style indicates the label style, width: {viewWidth} indicates that the image width is index. the value assigned in the js file, the same as height and src. The bindload event indicates that the image is bound to the index when it is loaded. the imageLoad function of the js file, which is executed when the image is loaded.

<image  style="width: {{viewWidth}}px; height: {{viewHeigh}}px;" src="{{imageUrl}}" bindload="imageLoad"> </image> 

Finally:

The above is an example of the processing of small program local images by screen size. If you have any questions, please leave a message or go to the community to discuss it. Thank you for reading this article and hope to help you, thank you for your support!