How to use wechat public account to achieve the collection of users' opinions

The background,

The background is that the private owner Gao wants to do something similar to “public opinion survey”, but this thing should be in a friendly form, do a good job of two-dimensional code as promotional materials, and let the people involved are willing to participate, simple operation and not conflict.

At the beginning, our plan was to use electronic questionnaires, such as questionnaires such as H5 products, but questionnaires are well-known, now too overwhelming, when people send you a questionnaire, the first reaction is big. So obviously the questionnaire does not meet our appeal of friendly form and simple operation. So naturally think of wechat public account this mainstream platform, wechat endorsement, product friendly, and natural flow is huge, easy to promote.

Two, preparation work

The first step is the need to have a wechat public number, the best is the enterprise subscription number, which gao has met, and the public number has a person to maintain. Then the next is to use the powerful operation functions provided by the wechat public account itself.

As people who have been engaged in the ecological development of wechat all know, wechat ecology has strong developability (public account, subscription number, small program, small game), public account internal can also jump to the web page, and wechat itself provides a special Webview for web page loading as a container for carrying, So any legitimate H5 web pages maintained by developers can be opened through the wechat public account.

But Gao’s appeal is that the scheme must be easy to use for users and maintainers at the same time, can not be too complex, and the implementation is fast, so we had better use the existing functions provided by the wechat public platform to achieve this appeal.

Iii. Program implementation

Wechat public platform

Let’s take a look at an ordinary wechat public account management background is what kind of, what can be done. ☞ portal

Our plan this time mainly uses the three menus of [automatic reply] [Custom menu] [Message Management], take a look at them respectively

Step 1: Auto reply

We through the editor is concerned to reply to set users to follow this public number after the first greeting is as follows

Step 2: Receive a message reply

The content here is used for the immediate response after receiving a message sent by users to the public account, which can give users a good sense of feedback

Step 3: Customize the menu

Here we can customize the user to follow the public number after the public number to see the bottom menu, through the following Settings, into our public number can be seen at the bottom

Results the following

4. Message collection

When we do this function, how to manage the user sent us the message, wechat public platform provides a message management menu for us to view the most recent five days of all user messages

But Gao wants to be able to not only view user messages through wechat public platform, but also export these contents to excel tables. Can this be done?

From the perspective of wechat public platform, is not to provide us with the message export function, but this function wants to achieve, how to do. It’s time to show the real technology!

Five, strange prostitution skills

The console analyzes the XHR request

First of all, the premise of our implementation is to solve the problem as little as possible through development means, so we can only use the existing resources to combine to achieve our demands. Now that the message is visible, let’s open the browser console and see if there is an interface to capture the data.

It turns out that the list of messages was not obtained through the interface request, so take a look at the URL

The message actually returns the page resources directly through the URL request and is embedded in it. Since the PC end can’t get through, let’s consider the mobile end packet capture. Because viewing the public account messages can not only be viewed through the wechat public platform, but also can use the small program provided by the official [public platform assistant] to manage fans’ messages on mobile devices, as follows

Packet capture on the mobile end

Now if you look at this little program what did we catch the bag

JSON parsing

Parse it using the JSON tool below

Vi. Data processing

Implement JSON to Excel

Since we have been able to get the serialized JSON data, the subsequent operation is simple, which is to simply implement the JSON sorting and export into excel files. The implementation code is as follows

<html>
<head>
  <p style="font-size: 20px; color: red;">Export the JSON file to a CSV file using label A</p>
  <button onclick='tableToExcel()'>export</button>
</head>
<body>
  <script>
    function prefixDate(origin) {
      const str = origin && origin.toString()
      if (str.length === 2) return origin
      if (str.length === 1) return '0' + str
    }
    function getDate(dateValue) {
      let temp = dateValue
      if (temp && temp.toString().length === 10) temp = temp * 1000
      const date = new Date(temp)
      const year = date.getFullYear()
      let month = prefixDate(date.getMonth() + 1)
      let when = prefixDate(date.getDate())
      let hour = prefixDate(date.getHours())
      let minute = prefixDate(date.getMinutes())
      let sec = prefixDate(date.getSeconds())
      return `${year}-${month}-${when} ${hour}:${minute}:${sec}`
    }
    function tableToExcel() {
      const jsonData = [
        ...
      ]
      // Column headings are separated by commas. Each comma separates a cell
      let str = 'Wechat name, message content, whether reply, sending time, wechat profile picture \n';
      // Add \t so that the table does not display scientific notation or other formats
      for (let i = 0; i < jsonData.length; i++) {
        const data = jsonData[i]
        const nick_name = data.nick_name.toString()
        const content = data.content.toString()
        const has_reply = data.has_reply === 1 ? 'is' : 'no'
        const dateStr = getDate(data.date_time)
        const avatar = data.wx_headimg_url.toString()
        str += `${nick_name}\t,${content}\t,${has_reply}\t,${dateStr}\t,${avatar}\n`
      }
      //encodeURIComponent solves Chinese garbled characters
      let uri = 'data:text/csv; charset=utf-8,\ufeff' + encodeURIComponent(str);
      // Do this by creating a tag
      let link = document.createElement("a");
      link.href = uri;
      // Name the downloaded file
      link.download = "User message.xls";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  </script>
</body>
</html>
Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

How to use wechat public account to achieve the collection of users’ opinions

The background,

Two, preparation work