1. Function Introduction

Aim at the small program code above, sweep, ‘di’ ~ to a sound, sweep successfully, open the small program, enter the small program home page.

As I didn’t have any coke on hand, I got a very professional cat to act as a 330ml bottle of Coca Cola to demonstrate.

Press it, aim at its bar code, sweep, “meow” ~ 1, that the cat ran away, sweep code failed, to chase

If ‘di’ ~ to a sound, it indicates that the scan code is successful, then the page will automatically jump to the product details page.

Then you can see others in the Coca Cola under the message, of course you can also click on the lower right corner of the blue button to publish your message;

Principle: Because a commodity corresponds to a unique bar code, so scan the same commodity bar code can enter a unique message list; The bar codes of Coca-Cola 330ML are the same all over the country. When scanned, they all go to the same page. The bar code is like a code, a password, a postman.. Of course, not only bar code, two-dimensional code can also leave a message, such as other people’s wechat two-dimensional code is generally a long time will not change, you can say bad things about others on the code.

Let’s look at the features of each page in detail

2. The home page

The home page has three sections:

1. User information: profile picture and nickname; 2. Rotation chart – can put some pictures to show at ordinary times; 3. Scan button – Click to open barcode scanning;

When the user clicks the scan button, we call the scan interface of the small program to scan the barcode of commodity. When the user scans the barcode, we get the barcode of commodity. At this time, we can jump to the product details page, by the way, the bar code in the past, so that the product details page can know what the user is scanning goods:

    wx.navigateTo({
          url: "/page/component/proDtl/proDtl? barcode="+ barcode, // Transfer the barcode to the product details page})Copy the code

3. Product details page

After entering the details page, our first thing: in the life cycle onLoad to get the barcode of the commodity passed from the home page, and then according to the barcode request the message list of the current commodity, if the commodity has not been scanned, there may be no message, then we just display “no message”

  onLoad(options){
       var barcode = options.barcode ? options.barcode:' '; This.getproductinfo (barcode) // Request message list of current product based on barcode},Copy the code

In the getProductInfo () method, we request a list of product messages from the background; We then render the requested product comment list on the page:

If the user thinks that the requested product name is wrong, he can also click the name to edit:

Finally, there’s a small button at the bottom of the page to submit a comment:

If you want to leave a message, you can click on it with your index finger:

After clicking the button, the small program will jump to the page of adding messages, and pass the barcode information of the commodity:

  turnToSubmit(){
    wx.navigateTo({
      url: "/page/component/addNode/addNode? barcode=" + this.data.barcode,
    })
  },
Copy the code

4. Add a message page

At this time we can start to write our message.

After writing your message, you can mark the type of your message: if you think you are writing a poem, you can choose the type of “poem”; If you think you are writing a letter and waiting for someone to scan the code to read it, you can choose the type of ‘fish book’; If you scan the bar code of a book, you can select the type of ‘excerpt’;

Type on the right side of the is function to upload pictures, first of all, we click on the ‘add images’ small icon, then a small program that is used to open the interface picture album or directly take pictures, get pictures, because the camera phones image pixels are high, lead to larger images, will upload slowly, of server space, the request will be very slow… So to optimize the user experience, we need to compress the image and then upload it.

Wx. chooseImage({count: 1, // default 9 sizeType: ['original'], // You can specify whether the image is original or compressed. By default, both are availablesourceType: ['album'.'camera'], // You can specify whether the source is photo album or camera, and default to both success:function(res) {var tempFilePaths = res.tempfilepaths; Self.com pressedImg(res) // Call the compressedImg method and compress the image}})Copy the code

Although the applet select picture interface can set the default compression, but it seems to be useless, or need to find other ways to compress, the most common image compression on the Internet is the use of the applet provided canvas canvas, the user uploaded the picture onto the canvas (….) And then judge whether the picture is too large according to the height and width of the picture on the canvas. If it is too large, the canvas can be directly scaled down:

   while(canvasWidth > 220 | | canvasHeight > 220) {/ / if the width or height is more than 220, I think the picture for further compression, CanvasWidth = math.trunc (res.width/ratio) canvasHeight = math.trunc (res.height/ratio) ratio++;  }Copy the code

Reference since the image compression: [WeChat applet: using the canvas reduce image] [blog.csdn.net/akony/artic…].

Then upload the compressed canvas image to the background server:

. Wx.uploadfile ({// upload image url:'https://mp.orancat.com/proImgUpload', filePath: photo.tempFilePath, // Compressed image name:'file',
          header: {
            'content-type': 'multipart/form-data'
          },
          success: function (res) {
    .......          

Copy the code

After the image is uploaded successfully, the background will return the address of the uploaded image to us, we render the image to the page, the user will know that the image has been uploaded successfully;

Var data={authorName: userName, // userName token: userId, // userId content: this.data.textContent, // message textContent imgUrl: UserImg, // User profile picture code: this.data.barcode, // Product barcodetypeNodeImgUrl: this.data.nodeImgUrl // The address of the image uploaded by the user}Copy the code

After the message is submitted successfully, the page will automatically cut back to the product details page, at this time, you can see their just left a message;

5. Leaderboard page

The products with messages will appear on the leaderboard page, and are arranged according to the number of messages. Click on a single product to view the messages under the product;

6. Other functions implemented

1. The paging

In the commodity details page, there may be such A situation, for example, if A commodity has 120 messages, if A commodity details page will load 120 messages, the page may load half A day did not come out; The user experience will be very bad. Therefore, the relatively ideal way should be, assuming that 12 messages are A page, then there are A total of 10 pages of messages for commodity A. When we enter the details page of commodity A, the first page (the first 12 messages) should be loaded first. When we slide up to the bottom of the page, the content of the next page will be automatically loaded, page by page as required.

We use the OnReachBottom event provided by the applet to implement paging loading. When the user slides to the bottom of the message list, the next page is triggered:

  onReachBottom: function() {// trigger this.setData({bottomLoading:true// Display loading prompt}) this.getranklist () // request next page of data}Copy the code

Similarly, leaderboards are paginated;

2. Run wx.login to obtain the openId

Since the user’s nickname and avatar may change at any time, openID will not change, so openID is used as the user’s unique credentials. Although I got the user Id, I haven’t used it yet. If you want to set up a user’s personal homepage or reply to a message, you may need to use openId;

3. Upload GIF images

As mentioned above, before uploading the image, we compressed the image a little bit. This is fine if the image is a JPEG or PNG image, but if the image is a GIF image, it may cause the GIF to not move. So I added another judgment: if the image is in GIF format, do not compress the image, directly upload:

    if(res.type=='gif') {if(res. Width > 666 | | res. Height > 666) {/ / if the image is too big to upload wx. HideLoading () wx. ShowModal ({title:'tip',
           content: 'GIF is too big, please upload a smaller one',
           showCancel: false
         })
         return false; } res.tempFilePath=res.path; _this.uploadimg (res) // Upload an imagereturn false;
    }
Copy the code

This allows you to upload GIF images on Windows and Android. What about iphones?? Ahem… As soon as the iPhone opens the album and selects a GIF, the GIF automatically becomes a JPEG still… So iPhone can’t upload giFs for the time being, there seems to be no solution.

7. Download and run with local computer

Download the source code at github address at the bottom of this article, use wechat developer tools, fill in your small program appId, open the project;

Remember to click “Details” in the Developer Tool to set the domain name not to be verified:

If you want to submit and distribute applets, you need to set the applets server domain name on the “Settings > Development Settings” page of the public account platform as follows:

Then, because the general computer does not have a camera can not scan code, so when you need to scan code, you can save the following bar code picture on the local computer, click the scan button to open the picture:

Of course, you can also find other bar codes;

In addition, it should be noted that when you debug on the local computer, because we are using the same background interface, so your message will be synchronized to my small program, so try not to send too obvious test message, such as:

  

Post a fake, positive, harmless message like:

  

7. Code scanning experience

You can also scan this small code directly to try it out:

Download source address :[github.com/AUSERGEE/pr…]