微信小程序RPX转化PX

亚历山大海

已于 2024-03-07 11:54:24 修改

阅读量879

点赞数

文章标签：微信小程序 css css3

于 2023-06-06 17:29:01 首次发布

本文链接：https://blog.csdn.net/weixin_44936767/article/details/131072525

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>RPX值向上取整并转为PX</title>
    <style>
        body {
            text-align: center;
            padding-top: 50px;
            background-color: #f8f9fa;
        }
        form {
            display: inline-block;
            background-color: #fff;
            border: 1px solid #dee2e6;
            padding: 20px;
            border-radius: 5px;
        }
        textarea {
            padding: 10px;
            margin-right: 10px;
            width: 400px;
            height: 200px;
        }
        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .output {
            margin-top: 50px;
            text-align: left;
        }
        .output pre {
            background-color: #dee2e6;
            padding: 10px;
        }
    </style>
</head>
<body>
<h1>RPX值向上取整并转为PX</h1>
<form>
    <label>请在下方输入要转化的代码（多行）：</label>
    <br>
    <textarea id="input" placeholder="请输入要转换的代码"></textarea>
    <br>
    <button type="button" onclick="convert()">转换</button>
</form>

<div class="output">
    <h2>转化后的代码：</h2>
    <pre id="output">
        
    </pre>
</div>

<script>
    function convert() {
        const input = document.getElementById("input").value;
        const output = input.replace(/(\d+)rpx/g, (match, p1) => `${Math.ceil(p1 / 2)}px`);
        document.getElementById("output").textContent = output;
    }
</script>
</body>
</html>

wxml 转 html

<!DOCTYPE html>
<html>
<head>
  <title>WXML转HTML</title>
  <style>
    .container {
      width: 80%;
      margin: 0 auto;
    }
    textarea {
      width: 100%;
      height: 200px;
    }
    button {
      margin-top: 10px;
    }
    pre {
      font-family: monospace;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>WXML转HTML</h1>
    <textarea id="wxmlInput" placeholder="在这里输入WXML代码"></textarea>
    <button onclick="convertToHtml()">转换</button>
    <pre id="htmlOutput"></pre>
  </div>

  <script>
    function convertToHtml() {
      var wxmlInput = document.getElementById('wxmlInput').value;
      var htmlOutput = document.getElementById('htmlOutput');
      
      // 使用适当的方法将WXML转换为HTML
      var html = transformWxmlToHtml(wxmlInput);
      
      htmlOutput.textContent = html;
    }
    
      function transformWxmlToHtml(wxml) {
        // 替换WXML中的标签和属性为对应的HTML标签和属性
        var html = wxml
        .replace(/<view/g, '<div')
        .replace(/<\/view>/g, '</div>')
        .replace(/<text/g, '<span')
        .replace(/<\/text>/g, '</span>')
        .replace(/<image/g, '<img')
        .replace(/<block/g, '<div class="block"')
        .replace(/<\/block>/g, '</div>');

        // 将WXML的属性转换为HTML的属性
        html = html
        .replace(/wx:if=/g, 'v-if=')
        .replace(/wx:for=/g, 'v-for=')
        .replace(/wx:key=/g, 'v-bind:key=');

        // 处理WXML中的事件绑定
        html = html
        .replace(/bind:/g, '@')
        .replace(/catch:/g, '@@');

        return html;
    }

  </script>
</body>
</html>