Giter Club home page Giter Club logo

Comments (6)

jin-yufeng avatar jin-yufeng commented on May 11, 2024 1

是的,目前前端插件包对于link标签是直接忽略的,所以没有请求style.css。因为在前端发起网络请求需要添加到列表,还需要花费比较长的时间,另外,由于前端时间和空间的限制,支持的选择器也比较少,所以没有支持这样的功能(个人设计上前端包的功能是轻量且快速的)
如果确有需要,可以在前端这样处理一下:

// 假设html是后台返回的字符串
var that = this;
// 获取css
var getStyle = function(html, links, i){
  if(i>=0){
    wx.request({
      url: links[i].match(/href=['"](\S+?)['"]/)[1],
      success(res){
        getStyle("<style>"+res.data+"</style>"+html, links, i-1);
      },
      fail(err){
        console.error(err);
      }
    })
  } else {
    that.setData({
      html
    })
  }
}
// 获取link
var links = html.match(/<link.*?>/g);
if(links)
  getStyle(html,links,links.length-1);
else {
  that.setData({
    html
  })
}

虽然把css写在style里比较难维护,不过就不用在前端请求耗时了😂
如果后台可以使用nodejs(或者用云函数),可以使用后端包解析,把解析结果返回前端,这样前端就不用解析了,可以直接显示
另外后端包可以直接解析link标签,还支持更多的选择器

var parser = require("parser-wxapp");
return await parser(html);

from mp-html.

jin-yufeng avatar jin-yufeng commented on May 11, 2024

是指这个吗?使用外部样式

from mp-html.

Tyoon avatar Tyoon commented on May 11, 2024

感谢您的回复,不是本地的wxss,是服务端的css,例如:
<link rel="stylesheet" href="style.css"/>
<div class="message">message</div>

from mp-html.

jin-yufeng avatar jin-yufeng commented on May 11, 2024

如果用的是后端npm包的话是可以这样用link标签的(因为nodejs可以发起网络请求获取css的内容)
前端包不行,如果要用只能把这个css的所有内容放在style标签里,另外需要注意一下支持的选择器

from mp-html.

Tyoon avatar Tyoon commented on May 11, 2024

可能我没描述清楚问题,我在服务端生成HTML,内容如下(服务器地址举例说明的,不是真实地址):
<link rel="stylesheet" href="https://www.server.com/style.css"/>
<div class="message">message</div>
这段内容通过接口返回给小程序,但是小程序并没有请求style.css(服务端有调试日志),所以没办法渲染出class="message"所对应的样式,这段内容在浏览器里都是能正常显示。
如果是把所有的css都通过style写在标签上,一是工作量太大,二是维护很不方便。

from mp-html.

Tyoon avatar Tyoon commented on May 11, 2024

非常感谢您耐心的解答!我试一下您说的办法,我会推荐给其他朋友使用,谢谢!

from mp-html.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.