這段時(shí)間需要為公司編輯公眾號(hào)，需要做一些效果漂亮的布局（圖片，按鈕，標(biāo)題），但是默認(rèn)微信官方并不能用原生的HTML編寫公眾號(hào)，所以需要借助第三方來(lái)編輯，壹伴還不錯(cuò)，可以直接把html 源代碼放到微信公眾號(hào)網(wǎng)頁(yè)里。但是微信公眾號(hào)內(nèi)的HTML是沒(méi)有像原生那樣，有style標(biāo)簽的，只有包含在body標(biāo)簽里面的代碼。而且body標(biāo)簽里面的代碼樣式是內(nèi)聯(lián)樣式，這個(gè)還特意查看了網(wǎng)頁(yè)鏈接的公眾號(hào)，進(jìn)行調(diào)試，發(fā)現(xiàn)確實(shí)只能是內(nèi)聯(lián)樣式，（PS：可能更容易讓用戶圖形化操作吧）。內(nèi)聯(lián)樣式看著維護(hù)很難，很難去區(qū)分那個(gè)標(biāo)簽是什么作用的。

解決方法：所以可以用python（PS：或者其他代碼，例如nodejs,個(gè)人喜歡python的風(fēng)格，write less code do more thing）來(lái)讀取一個(gè)html文件，然后提取style標(biāo)簽里面的內(nèi)容 和 body標(biāo)簽里面的內(nèi)容，再進(jìn)行類型匹配，替代為內(nèi)聯(lián)樣式，下面是python的源代碼：

import sys

def is_space(s):
    return s=='\r' or s=='\n' or s=='\t' or s==' '

class ConvertInnerStyle:
    """this class is to convert the inner style into the inline style
       generate the html code which only contain the source code within the body
       it could assist the people who want to make the customize web page in the wechat subscription"""

    def __init__(self,origin):
        """make the constructor to be clear"""
        self.total_content=''
        self.style_dict={}
        self._fg_init(origin)

    def _fg_init(self,origin):
        """initialize the resouces that we provided """
        f=open(origin,'r',encoding="UTF-8")
        self.totalContent=f.read()
        f.close()
        self._process_style()

    def _fg_find_style(self,tag):
        """this is the method that can generate the substring which match the tag name of the html"""
        preffix='<'+tag+'>'
        suffix=r'</'+tag+'>'
        s=self.totalContent.find(preffix)
        e=self.totalContent.find(suffix)
        return self.totalContent[s+len(preffix)-1:e]

    def _process_style(self):
        """process the source code within the style tag ,generate the content which match the class name,(optional it can process the multiple classes which has the same styles)"""
        #get the source code within the style tag of the html
        inner_styles=self._fg_find_style('style')
        #print(inner_styles)
        #for loop that find the index of the } character
        end_index=inner_styles.find('}')
        print(end_index)
        while end_index!=-1:
            #get the substring of the single styles block
            #which contain .xxx{xxxx}   .xxx,.yyy,.uuu {xxx;xxxx;}
            single_styles=inner_styles[:end_index+1] #because the end_index is the forward element of }
            print(single_styles)
            #first find the index of {
            index=single_styles.find('{')
            ii=index-1
            #the variable to check whether it is the last class before the style block 
            is_valid=True

            class_name=''
            class_name_list=[]
            #from the end to the start loop through each charater find the class name list which can contain at least one class 
            while ii>=0:
                #if it is the space skip it 
                if is_space(single_styles[ii]):
                    ii-=1
                    continue
                c=single_styles[ii]
                if c==',':
                    is_valid=True
                    ii-=1
                    continue
                if is_valid:
                    if c=='.':
                        is_valid=False
                        #because this is the reverse class name so make it forward 
                        l=list(class_name)
                        l.reverse()
                        class_name=''.join(l)
                        class_name_list.append(class_name)
                        #empty the class name in order to reuse next loop
                        class_name=''
                    else:
                        class_name=class_name+c
                ii-=1
            #find the style block and strip the empty the \r\n charater
            style_block=single_styles[index+1:end_index]
            style_block=style_block.strip().replace('\r','').replace('\n','')
            #put the element of the class name list to the dictionary
            for tmp in class_name_list:
                self.style_dict[tmp]=style_block
            inner_styles=inner_styles[end_index+1:]
            end_index=inner_styles.find('}')

        for key in self.style_dict:
            print(key+' : '+self.style_dict[key])
    def generate(self,filename):
        #find the body 
        body=self._fg_find_style('body')
        for key in self.style_dict:
            body=body.replace('class="'+key+'"','style="'+self.style_dict[key]+'"')
        f=open(filename,'w',encoding='UTF-8')
        f.write(body)
        f.close()


def main():
    t=ConvertInnerStyle(str(sys.argv[1]))
    t.generate(str(sys.argv[2]))



if __name__ == "__main__":
    main()

使用方法：

1、通過(guò)命令行工具 python converter.py 需要轉(zhuǎn)換的文件 最后生成的內(nèi)聯(lián)樣式文件

這個(gè)工具還不支持跳過(guò)注釋，有興趣的同學(xué)可以自己去修正

.header .hr,
.header .content-wrap .content,
.header .content-wrap .icon,
.header,
.header .content-wrap {
width: 100%;
height: 40px;
display: flex;
align-items: flex-end;
justify-content: flex-start;
}

原始html里面的內(nèi)部樣式

content-wrap : width: 100%; height: 40px; display: flex; align-items: flex-end; justify-content: flex-start;
header : width: 100%; height: 40px; display: flex; align-items: flex-end; justify-content: flex-start;
icon : width: 100%; height: 40px; display: flex; align-items: flex-end; justify-content: flex-start;
hr : width: 100%; height: 40px; display: flex; align-items: flex-end; justify-content: flex-start;

通過(guò)python代碼提取的對(duì)應(yīng)類名 ： 樣式的字典