這(zhè)段時(shí)間需要(yào / yāo)爲(wéi / wèi)公司編輯公衆号，需要(yào / yāo)做一些效果漂亮的(de)布局（圖片，按鈕，标題），但是(shì)默認微信官方并不(bù)能用原生的(de)HTML編寫公衆号，所以(yǐ)需要(yào / yāo)借助第三方來(lái)編輯，壹伴還不(bù)錯，可以(yǐ)直接把html 源代碼放到(dào)微信公衆号網頁裏。但是(shì)微信公衆号内的(de)HTML是(shì)沒有像原生那樣，有style标簽的(de)，隻有包含在(zài)body标簽裏面的(de)代碼。而(ér)且body标簽裏面的(de)代碼樣式是(shì)内聯樣式，這(zhè)個(gè)還特意查看了(le／liǎo)網頁鏈接的(de)公衆号，進行調試，發現确實隻能是(shì)内聯樣式，（PS：可能更容易讓用戶圖形化操作吧）。内聯樣式看着維護很難，很難去區分那個(gè)标簽是(shì)什麽作用的(de)。

解決方法：所以(yǐ)可以(yǐ)用python（PS：或者其他(tā)代碼，例如nodejs,個(gè)人(rén)喜歡python的(de)風格，write less code do more thing）來(lái)讀取一個(gè)html文件，然後提取style标簽裏面的(de)内容 和(hé / huò) body标簽裏面的(de)内容，再進行類型匹配，替代爲(wéi / wèi)内聯樣式，下面是(shì)python的(de)源代碼：

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、通過命令行工具 python converter.py 需要(yào / yāo)轉換的(de)文件 最後生成的(de)内聯樣式文件

這(zhè)個(gè)工具還不(bù)支持跳過注釋，有興趣的(de)同學可以(yǐ)自己去修正

.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裏面的(de)内部樣式

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;

通過python代碼提取的(de)對應類名 ： 樣式的(de)字典