Custom Capabilities Example

WeDa, as a cross-platform application development platform, does not provide underlying terminal interfaces such as DOM API, but in some extension scenarios where the WeDa platform's capabilities are insufficient, we still need to use these capabilities.

Generally, platform-specific native code can be written in the page or application lifecycle. For example, here's how to write some native code on the web platform in WeDa.

More practical examples can be found at: https://cloud.tencent.com/document/product/1301/83129

Global Feedback Button (WEB)

The case requirement is to provide a global-level feedback link. WeDa currently lacks this implementation, but it can be easily implemented using lifecycle hooks.

Implementation Approach:

1. Create a new Feedback function method feedback in the global common handler. The code is as follows:

export function initFeadback() {
  if(!document.getElementById('feedback')){
    const feedbackElement = document.createElement('div');

    // Implement feedback style
    const feedbackTemplate = `
      <div id='feedback' draggable="true">
      <style>
      #feedback {
        position: absolute;
        right: 8px;
        bottom: 20px;
        width: 48px;
        height: 48px;
        line-height: 48px;
        font-size: 14px;
        border-radius: 50%;
        text-align: center;
        cursor: pointer;
        opacity: 0.3;

        color: white;
        background-color: grey;
        transition: opacity 0.5s;
      }
      #feedback:hover{
        opacity: 1;
      }
      </style>
      
      Feedback
      </div>
    `;

    feedbackElement.innerHTML = feedbackTemplate;

    feedbackElement.addEventListener('click', (e) => {
      // TODO Implement feedback capability
      window.open('https://wj.qq.com/');
    });

    document.body.appendChild(feedbackElement);
  }
}

2. Call the initialization method of feedback in the global lifecycle. The code is as follows:

export default {
  onAppLaunch(launchOpts) {
    $app.common.feedback.initFeadback();
  },
}

Frontend excel Processing (WEB)

Case requirement: Import an excel file on the frontend page, parse its content, and display it in a data table.

Implementation Approach:

1. In WeDa's app development settings, introduce the CDN js address for the excel file processing tool xlsx, such as: https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js

2. Implement the processing logic for excel files: Add a custom javascript handler method named excelHandler within the page. The code is as follows:

export default async function({ event }) {
  console.log(event.detail);
  // Get file link
  const res = await $w.cloud.getTempFileURL(event.detail.value);
  console.log(res);
  const dataBuffer = await (await fetch(res[event.detail.value[0]])).arrayBuffer();
  // Use xlsx.js to read the content of an excel file
  const workbook = XLSX.read(dataBuffer);
  console.log(workbook);
  const { SheetNames, Sheets } = workbook;
  const records = parseSheet(Sheets[SheetNames[0]]); // Process the first sheet
  console.log(records);
  return records
}

// Convert excel content to an array
function parseSheet(sheetData = {}, start = 'A0') {
  const titleInfo = parseCellIndex(start);

  let records = Object.keys(sheetData).filter(key => {
    const index = parseCellIndex(key)
    return /^([a-zA-Z]+)(\d+)$/.test(key) && index[1] && index[1] > titleInfo[1];
  }).reduce((s, key) => {
    const index = parseCellIndex(key);
    if(index[1] === titleInfo[1] + 1) {
      s.push([sheetData[key].w])
    }else {
      s[index[0]].push(sheetData[key].w); 
    }
    return s;
  }, []).reduce((s, row, i) => {
    row.forEach((x, j) => {
      if(j) { // Not title
        s[j-1] = s[j-1] || {}
        s[j-1][row[0]] = x;
      }
    })
    return s;
  }, []);

  return records
}

function parseCellIndex(key = '') {
  const matches = key.match(/^([a-zA-Z]+)(\d+)$/);
  return [matches?.[1] && columnToNumber(matches[1]), matches?.[2] && Number(matches[2])];
}

// Convert A,B,C... to 0,1,2...
function columnToNumber(column) {
  let result = 0;
  for (let i = 0; i < column.length; i++) {
    const charCode = column.charCodeAt(i) - 64;
    result = result * 26 + charCode;
  }
  return result - 1;
}

3. Add a file upload component and a data table component to the page, along with an intermediate page variable records (array type). For the table's data source, select the expression option and set its value to $w.page.dataset.state.records, then enable the paginator and dynamic pagination.

4. Finally, start configuring the event logic:

   • Add a call to the custom code excelHandler in the file upload success event
   • In the success branch of the call, add an assignment node for the records variable with event.detail as the input parameter. This assigns the array converted from the processed excel sheet to the records variable

The core logic is now complete. After the table retrieves data and renders it, you can update and adjust the displayed column content in the table properties to achieve the desired effect.