美文网首页
@芥末的糖-----Vue的页面转小程序

@芥末的糖-----Vue的页面转小程序

作者: 芥末的糖 | 来源:发表于2019-06-21 10:44 被阅读0次
有这么一个需求,就是需要从Vue的页面转小程序,也就是说,
  • html-->view,
  • stylus-->css
  • rem-->rpx

以下为解决方案:

一.装一个git包,按照教程启动

1.https://github.com/txs1992/stylus-converter

1. First fork project and then clone project to local
git clone git@github.com:<your github>/stylus-converter.git

2. Enter the project directory
cd stylus-converter

3. Installation project depends
npm install

4. Go to line 581 of the `node_modules/stylus/lib/lexer.js` file.

5. Modify the code below.
// before modification
if ('/' == this.str[0] && '/' == this.str[1]) {
  var end = this.str.indexOf('\n');
  if (-1 == end) end = this.str.length;
  this.skip(end);
  return this.advance();
}

// After modification
if ('/' == this.str[0] && '/' == this.str[1]) {
  var end = this.str.indexOf('\n');
  const str = this.str.substring(0, end)
  if (-1 == end) end = this.str.length;
  this.skip(end);
  return new Token('comment', new nodes.Comment(str, suppress, true))
}
---------------------------------------
// download stylus-converter
npm install -g stylus-converter

// Run the cli conversion file
stylus-conver -i test.styl -o test.scss

// Run the cli conversion directory
// cd your project
mv src src-temp
stylus-conver -d yes -i src-temp -o src
二.转成sass后,转css

1.https://www.sassmeister.com/

注意有些语法不支持,需要手动修改

三.rem转px

注意修改 1rem等于多少px!

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../layui/jquery-3.2.1.min.js"></script>
        <style>
            div#newCss {
                border: 1px solid #999;
                width: 504px;
                height: 140px;
            }
        </style>
    </head>

    <body>
        <h4>rem样式</h4>
        <textarea id="css" cols="60" rows="10"></textarea>
        <br />
        <input type="button" value="rem转换rpx" onclick="rem2rpx()" />
        <h4>转换后的样式</h4>
        <div id="newCss"></div>
        <input id="aaa">
        <input id="bbb">
        <script type="text/javascript">
            function rem2rpx() {
                var oldCss = document.getElementById("css").value.trim(); //".similar_recommend .title{margin:.3rem 0 0;padding-top:.4rem;color:#666;font-size:.28rem;}"
                //对原样式根据rem进行拆分成数组,这样除了最后一个元素,数组前边的几个元素都是以原rem样式数值结尾
                //拆分后的格式:[".similar_recommend{background:#fff;border-radius:.1", ";height:7.4", ";margin-top:-.3", "}"]
                var newCssArr = oldCss.split("rem")
                var newCss = "" //转换后新的样式变量
                for(var i in newCssArr) {
                    if(i < newCssArr.length - 1) {
                        //非最后一个元素,对字符串按照:再次拆分,把rem样式的数值分离出来进行转换
                        var str = newCssArr[i]
                        var idx = str.lastIndexOf(':')
                        var prevStr = str.substring(0, idx + 1)
                        var nextStr = "" //nextStr格式为    -.3 , -3 , 3 , .3
                        if(str.indexOf('-.') > -1) {
                            //nextStr格式为-.3rem或-3rem
                            nextStr = str.substring(str.indexOf(':-') + 2, str.length)
                            //nextStr格式为.3rem或3rem
                            if(nextStr.indexOf('.') > -1) {
                                nextStr = "0" + nextStr
                            }
                            nextStr = "-" + parseInt(nextStr * 200) + "rpx"
                        } else {
                            nextStr = str.substring(idx + 1, str.length)
                            //处理 nextStr="1px .2"的情况
                            var index = nextStr.indexOf(' ')
                            if(index >= 0) {
                                let str1 = nextStr.substring(0, index)
                                let str2 = nextStr.substring(index + 1, nextStr.length)
                                str2 = str2.indexOf('.') > -1 ? "0" + str2 : str2
                                str2 = parseInt(str2 * 200) + "rpx"
                                nextStr = str1 + ' ' + str2
                            } else {
                                nextStr = nextStr.indexOf('.') > -1 ? "0" + nextStr : nextStr
                                nextStr = parseInt(nextStr * 200) + "rpx"
                            }
                        }

                        //重组数组内的样式字符串
                        newCss += prevStr + "" + nextStr
                    } else {
                        //追加最后一个数组元素
                        newCss += newCssArr[i]
                    }
                }
                document.getElementById("newCss").innerHTML = newCss
            }
            $("#bbb").keydown(function(event) {
                if(event.which == 13) {
                    console.log("ok")
                }
            });
        </script>
    </body>

</html>

相关文章

  • @芥末的糖-----Vue的页面转小程序

    有这么一个需求,就是需要从Vue的页面转小程序,也就是说, html-->view, stylus-->css r...

  • @芥末的糖-----Vue-router

    我们使用路由来干什么呢?个人理解:在前端我们做单页面的开发时,常使用路由来实现页面的跳转,Vue给出了我们Vue-...

  • h5跳转小程序之静态网页

    首先h5跳转小程序的方式有很多,这里说得不是小程序中嵌套h5页面,而是单纯的一个(外部的)h5页面跳转小程序,我的...

  • @芥末的糖

    1.接下来是一段有故事的代码,如果你能看到最后,那么我相信,这些干货将会让你受益 2.要求变成//循环外:3 ...

  • 小程序和H5页面互相跳转的实现

    需求体现: 在小程序里面,实现小程序和H5页面互相跳转。 1. 实现H5页面跳转小程序 小程序里面加载H5页面,需...

  • uni-app页面布局

    单页面程序 uni-app 约定页面文件遵循 Vue 单文件组件 (SFC) 规范[https://vue-loa...

  • @芥末的糖-----redux

    以下例子如果看不懂,就直接看总结,然后看最开始的图,然后对应代码目录结构:都在同一个目录下 1.全局注入 2.全局...

  • @芥末的糖-----PropTypes

    1.导入一个包 import PropTypes from 'prop-types' 2.使用PropTypes用...

  • 2020-02-14

    vue-router的使用:开发vue单页面程序时,app.vue只是

  • h5跳转微信小程序

    微信小程序web-view中内嵌的h5页面,跳转小程序 微信小程序文档:https://developers.we...

网友评论

      本文标题:@芥末的糖-----Vue的页面转小程序

      本文链接:https://www.haomeiwen.com/subject/gvslcqtx.html