uniapp applet Long press to identify and follow the official account

        Recently, in the process of developing a small program, I encountered a need to long press the QR code, and the official account will pop up for users to pay attention.

                First look at the renderings

                ​​​​​​​        ​​​​​​​        ​​​​​​​        

 Now let's share the steps to achieve it.

The first step is to prepare a WeChat public account and a small program, add the appId of the small program to the WeChat public account, and associate the two.

In the second step, your WeChat official account must have an article, and the address of the article is the address of your QR code

​​​​​​​

 

The third step is to generate the above address as a QR code image, put it on the server, and then quote it in your applet.

referenced code

<u-popup
      v-model="popup1show"
      mode="center"
      width="600"
      height="800"
      class="popupURL1-box"
    >
      <image
        v-if="popupURL1"
        show-menu-by-longpress
        :src="popupURL1"
        alt=""
        class="popupURL-box"
      />
    </u-popup>

I am using the picture display of image. You only need to set the show-menu-by-longpress attribute to long press the pop-up window,

The popupURL1 in the above figure is the address of a QR code picture on the server, similar to

data(){

    retrun {

    popupURL1 : 'http://***.***.**.***:9000/uipicture/gonzhonghao.png'

    }

}

The fourth step is to view it on the mobile phone, and long press the QR code to display it directly.

I hope this article will help you learn to use uniapp development.