One, foreword

At first, our product partner needed an SMS link to jump to a static page in our small program. I added a new page without thinking, and then generated a SMS link after a series of manual operations, and gave the link to the product partner.

A few days later, the product partner came again and said that he needed a new SMS link. When I got the page, there were all question marks in my head. Isn’t this your previous page? Product partners say you see copy is different. At this time, I felt that things were not as simple as I thought before, so I asked the product partner whether there would be similar needs in the future, update the copy and generate a new SMS link. The product partner said that there were only a few cities left. I made the page somewhat generic, separating different pages based on URL parameters, while manually generating an SMS link.

After about two weeks, the product friend took the computer showed me an Excel spreadsheet, there are about 10 lines inside, all is the need to generate a new text links, as business into the future, there will be new areas, need a new text links, so I take a little time, wrote a small tool that can generate a one-time multiple text links.

How to own a gadget

2.1 Function Interaction

I drew a simple flow chart based on the features I wanted.

2.2 the page UI

2.3 Function Implementation

2.3.1 Realizing the way to open the small program by SMS

Wechat provides three ways to open the mini program by SMS, which can be viewed in official documents

I did it through URL Link, official documentation

Note:

1) A single small program daily generated Link upper limit of 500,000 (including short-term effective Link and long-term effective Link);

2) Link that is valid for more than 180 days or permanently valid Link is long-term valid Link. A single small program can generate a total of long-term valid Link upper limit of 100,000, please be careful to call;

3) Links whose validity time is less than 180 days are short-term valid links, and there is no upper limit for the generation of short-term valid links by a single small program;

4) Open range: open for small programs of non-personal subjects;

5) Only URL links of published applets can be generated;

6) When opening the URL Link in wechat or Android phone, the official H5 middle page will be jumped first by default. If you need to customize the H5 content, you can use the cloud to develop static websites.

2.3.2 Specific implementation

Our project is based on the React framework, so the gadget is also written in JSX.

1) View layer

<Tabs className='tools-tabs'>
  <Tab title='Get SMS link'>
    <div className='list mt10'>
      <div className='item'>
        <textarea
          className='tips text-ts text-gray textarea'
          defaultValue={smsLinkText}
          rows={8}
          placeholder='Text message link Skipping page Information paste, Path, and Query separated by a comma.& # 10;Such as: pages/home/home, type = "bj". Multiple lines are separated by newlines. '
          onChange={e= > getValue(e)}
        />
      </div>
      <div className='item'>Gets the JSON value of the short new link</div>
      <div className='item'>
        <textarea className='tips text-ts text-gray textarea' defaultValue={smsLinkListJson} rows={8} placeholder='Short new link obtained' />
      </div>
      <div className='item'>
        <Button className='btn-large' type='primary' round onClick={getSMSLink}>Identify and copy the results with one click</Button>
      </div>
    </div>
  </Tab>
</Tabs>
Copy the code

2) Process input values

Multiple lines and multiple arguments, so using string interception, regrouping the string into what we want to end up with is an array of data.

/** * Sets the input box value *@param {Event} E Event Object *@return {void} No * /
const getValue = e= > {
  const val = e.target.value;
  if(! val)return;

  let list = val.split('\n');
  let linkList = [];
  list.forEach(link= > {
    let [path, query] = link.split(', ');
    if (path && query) {
      linkList.push({
        path: path,
        query: query, }); }}); setSmsLinkText(val); setSmsLinkList(linkList); };Copy the code

3) Click ok to get the applets URL Link

Before CLICKING OK, I checked the input box to see if it was empty. If so, I would be prompted.

If the access_token of the applet is not null, the interface to obtain the applet URL Link needs to pass in the access_token.

The access_token is passed into the getGenerateurllink method to obtain the apule URL Link and put it into the list array.

Convert the List array into a JSON object, echo the page, and copy it to the local clipboard.

/** * copy the link *@param {string} Message copies the content *@return {void} No * /
const copyTextHandle = message= > {
  let input = document.createElement('input');
  input.value = message;
  document.body.appendChild(input);
  input.select();
  input.setSelectionRange(0, input.value.length), document.execCommand('Copy');
  document.body.removeChild(input);
  opentToast('Copy successful');
};

/** * get the applets URL Link *@param {void} No *@return {void} No * /
const getGenerateurllink = (access_token, link, callback) = > {
  const params = {
    path: link.path,
    query: link.query,
  };
  axios
    .post(`https://api.weixin.qq.com/wxa/generate_urllink?access_token=${access_token}`, {
      ...params,
    })
    .then(function () {
      //
    })
    .catch(function (error) {
      const resData = error.resData;
      let url_link = resData.url_link;
      callback && callback(url_link);
    });
};
/** * gets the access_token * of the applet@param {void} No *@return {void} No * /
const getCgibinToken = () = > {
  axios.get('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid= need to jump the small program appid&secret = small programs need to jump to secret').then(res= > {
    const resData = res.resData;
    let access_token = resData.access_token;
    let list = [];
    smsLinkList.forEach(link= > {
      // Get the applets URL Link
      getGenerateurllink(access_token, link, url_link= > {
        list.push({
          url_link: url_link,
          path: link.path,
          query: link.query,
        });
        if(list.length ! = =0 && list.length == smsLinkList.length) {
          let arrayData = {
            list: [].concat(list),
          };
          let jsonData = JSON.stringify(arrayData, null.4); setSmsLinkListJson(jsonData); copyTextHandle(jsonData); }}); }); }); };/** * get SMS link *@param {void} No *@return {void} No * /
const getSMSLink = () = > {
  if(! smsLinkText) {return opentToast('Please fill in the page information of the SMS link');
  }
  getCgibinToken();
};
Copy the code

Complete code

tools.jsx

/ * * *@description Batch get jump applet SMS link */
import React, { useState } from 'react';
import { Tab, Tabs, Button, Toast } from 'antd';
import axios from 'axios';

const Tools = () = > {
  let [smsLinkText, setSmsLinkText] = useState(' ');
  let [smsLinkList, setSmsLinkList] = useState([]);
  let [smsLinkListJson, setSmsLinkListJson] = useState([]);

  /** * Error message box *@param {string} Message popup contents *@return {void} No * /
  const opentToast = message= > {
    Toast({ icon: 'failure'.message: message }, 2000);
  };

  /** * Sets the input box value *@param {Event} E Event Object *@return {void} No * /
  const getValue = e= > {
    const val = e.target.value;
    if(! val)return;

    let list = val.split('\n');
    let linkList = [];
    list.forEach(link= > {
      let [path, query] = link.split(', ');
      if (path && query) {
        linkList.push({
          path: path,
          query: query, }); }}); setSmsLinkText(val); setSmsLinkList(linkList); };/** * copy the link *@param {string} Message copies the content *@return {void} No * /
  const copyTextHandle = message= > {
    let input = document.createElement('input');
    input.value = message;
    document.body.appendChild(input);
    input.select();
    input.setSelectionRange(0, input.value.length), document.execCommand('Copy');
    document.body.removeChild(input);
    opentToast('Copy successful');
  };

  /** * get the applets URL Link *@param {void} No *@return {void} No * /
  const getGenerateurllink = (access_token, link, callback) = > {
    const params = {
      path: link.path,
      query: link.query,
    };
    axios
      .post(`https://api.weixin.qq.com/wxa/generate_urllink?access_token=${access_token}`, {
        ...params,
      })
      .then(function () {
        //
      })
      .catch(function (error) {
        const resData = error.resData;
        let url_link = resData.url_link;
        callback && callback(url_link);
      });
  };

  /** * gets the access_token * of the applet@param {void} No *@return {void} No * /
  const getCgibinToken = () = > {
    axios.get('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid= need to jump the small program appid&secret = small programs need to jump to secret').then(res= > {
      const resData = res.resData;
      let access_token = resData.access_token;
      let list = [];
      smsLinkList.forEach(link= > {
        // Get the applets URL Link
        getGenerateurllink(access_token, link, url_link= > {
          list.push({
            url_link: url_link,
            path: link.path,
            query: link.query,
          });
          if(list.length ! = =0 && list.length == smsLinkList.length) {
            let arrayData = {
              list: [].concat(list),
            };
            let jsonData = JSON.stringify(arrayData, null.4); setSmsLinkListJson(jsonData); copyTextHandle(jsonData); }}); }); }); };/** * get SMS link *@param {void} No *@return {void} No * /
  const getSMSLink = () = > {
    if(! smsLinkText) {return opentToast('Please fill in the page information of the SMS link');
    }
    getCgibinToken();
  };

  return (
    <div>
      <Tabs className='tools-tabs'>
        <Tab title='Get SMS link'>
          <div className='list mt10'>
            <div className='item'>
              <textarea
                className='tips text-ts text-gray textarea'
                defaultValue={smsLinkText}
                rows={8}
                placeholder='Text message link Skipping page Information paste, Path, and Query separated by a comma.& # 10;Such as: pages/home/home, type = "bj". Multiple lines are separated by newlines. '
                onChange={e= > getValue(e)}
              />
            </div>
            <div className='item'>Gets the JSON value of the short new link</div>
            <div className='item'>
              <textarea className='tips text-ts text-gray textarea' defaultValue={smsLinkListJson} rows={8} placeholder='Short new link obtained' />
            </div>
            <div className='item'>
              <Button className='btn-large' type='primary' round onClick={getSMSLink}>Identify and copy the results with one click</Button>
            </div>
          </div>
        </Tab>
      </Tabs>
    </div>
  );
};

export default Tools;
Copy the code

Four,

Think carefully, some needs seem simple, even repeated labor, in fact, can be from the technical processing, just blindly stacking pages and functions are obviously not our pursuit.

This is the last post of 2021. Thanks to the Nuggets, this year has made me more interested in development and more interested in finding some shining points from daily work. Finally, I send it to all the nuggets’ partners.

We walk with all things, the stars show the way, clouds and light spread out into the shape of the earth.

Come on, 2022.