微信小程序资料总结

原文链接： https://www.mk2048.com/blog/blog.php?id=h0jkjajcj2ib&title=%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%B5%84%E6%96%99%E6%80%BB%E7%BB%93

http://blog.csdn.net/ZCLengendary/article/details/54312030 --添加html标签与处理

https://www.cnblogs.com/HDK2016/p/6285320.html --正则表达式

https://www.w3cschool.cn/ --w3cschool

<span style="font-size:18px;"> <span style="white-space:pre;">  </span>//替换标签中特殊字符 这里观察返回数据找到非 HTML 字符串,随后将该字符串替换成空字符串.  
        var infoFlg = "<!--SPINFO#0-->";  
        if (content.indexOf(infoFlg) > 0) {  
         content = content.replace(/<!--SPINFO#0-->/, "");  
        }</span>

下面是实例

js代码如下

<span style="font-size:18px;">var WxParse = require('../../wxParse/wxParse.js');  
  
Page({  
  
  data: {  
  },  
  
onLoad: function(options) {  
      
    //http://c.m.163.com/nc/article/CADGA4VH0001875N/full.html  
    var self = this;  
    var optionId = options.id;  
    console.log(optionId);  
    wx.request( {  
      url: 'http://c.m.163.com/nc/article/'  optionId  '/full.html',  
      header: {  
        "Content-Type": "application/json"  
      },  
      method: "GET",  
      data: {  
          
      },  
      success: function( res ) {  
  
        var data = res.data[optionId];  
        var imgInfoArr = res.data[optionId].img;  
  
        //替换标签中特殊字符  
        var infoFlg = "<!--SPINFO#0-->";  
        var imgFlg = "<!--IMG#";  
        var title = " <p style=\"margin:15px 15px; line-height: 20px;\"> "   res.data[optionId].title   "</p>";  
        var source = " <p style=\"margin:15px 15px; font-size: 14px; color:darkgray \">来源于: "   res.data[optionId].source   "</p>";  
        var content = "<div style=\"margin:10px; line-height:25px; font-weight:200; font-size:17px; color:black; word-break:normal\">"   res.data[optionId].body   "</div>";  
  
         //替换标签中特殊字符  
        var infoFlg = "<!--SPINFO#0-->";  
        if (content.indexOf(infoFlg) > 0) {  
         content = content.replace(/<!--SPINFO#0-->/, "");  
        }  
  
        var imgFlg = "<!--IMG#";  
        //图片数量  
        var imgCount = (content.split(imgFlg)).length-1;   
        if (imgCount > 0) {  
          console.log("有dd"   imgCount   "张图片");    
            
          for (var i = 0; i < imgCount; i  ) {  
            var imgStr = "<!--IMG#"   i   "-->";  
            var imgSrc = "\""   imgInfoArr[i].src   "\"";   
            var imgHTML = "<div> <img style=\"width:100%\" src="  imgSrc  "> </div>";  
            content = content.replace(imgStr, imgHTML);  
          }  
        }  
  
        var article = title   source   content ;  
        WxParse.wxParse('article', 'html', article, self,imgCount);  
  
  
        setTimeout (function () {  
          self.setData({  
          hide: true  
        })  
        }, 500)  
      }  
    });  
}  
  
})</span>

css

使用CSS选择器定义标签
使用CSS，您可以使用数百种CSS属性来更改元素在页面上的显示方式。
当你输入<h2 style="color: red">CatPhotoApp</h2>时，你就给h2元素添加了inline style(内联样式)。

这是添加元素的样式的一种方法，但更好的方法是使用CSS，它代表(Cascading Style Sheets)层叠样式表。
在代码的顶端，创建一个如下所示的style元素，：

<style>    
</style>
在这个style元素的内部, 你可以为所有h2元素创建一个CSS选择器。例如，如果你希望所有的h2元素都设置为红色, 则你的样式元素将如下所示：

<style>    
  选择器 {属性名称: 属性值;}    
  h2 {color: red;}    
</style>
请注意，围绕每个元素的样式，打开和关闭花括号 ({ 和}) 很重要。您还需要确保元素的样式位于开始和结束样式标签之间。最后，请确保将分号添加到每个元素样式的末尾。
删除你的h2元素的样式属性，而不是创建一个CSSstyle元素。添加必要的CSS，以将所有h2元素变为蓝色。

更多专业前端知识，请上【猿2048】www.mk2048.com

微信小程序资料总结

猜你喜欢