這(zhè)段時(shí)間(jiān)需要(yào)為(wèi)公司編輯公衆号&'♥δ#xff0c;需要(yào)做(zuò)一(yī)些(xiē)§Ω‌效果漂亮(liàng)的(de)布局（圖片，按鈕，标☆★題），但(dàn)是(shì)默認微(wēi)信官方并不(bù)能(n"↔ éng)用(yòng)原生(shēng)的(de)HTML編寫公衆号，♣♠α所以需要(yào)借助第三方來(lái)編輯ÿ☆α0c;壹伴還(hái)不(bù)錯(cuò)，可(kě)以β©直接把html 源代碼放(fàng)到(dào)微(wēi)信公衆号網頁裡↕€≥(lǐ)。但(dàn)是(shì)微(wēi)信公衆号內(nèi)的(de)HTML是(shì←‌δ)沒有(yǒu)像原生(shēng)那(nà)樣，$₩;有(yǒu)style标簽的(de)，隻¥×↔有(yǒu)包含在body标簽裡(lǐ)面的(de)代碼。↔ 而且body标簽裡(lǐ)面的(de)代碼樣式是(shì)內(nèi)聯樣式₹☆αf0c;這(zhè)個(gè)還(hái)特意查看(kàn)了(lα∞∏λe)網頁鏈接的(de)公衆号，進行(xíng)調試， ↑♦發現(xiàn)确實隻能(néng)是(shì)內(nèi↑₩)聯樣式，（PS：可(kě)能(néng)更↔₹↓♠容易讓用(yòng)戶圖形化(huà)操作(zuò)吧(ba)ÿ♦↑∑09;。內(nèi)聯樣式看(kàn)著(zhe)維護很(hěn)難，很(hěn) ♦σ§難去(qù)區(qū)分(fēn)那(nà)個(gè)标簽是(shì)什(shén)麽作(zuò)‌¥>α用(yòng)的(de)。

解決方法：所以可(kě)以用(yòng)pythonÿ∑‍α×08;PS：或者其他(tā)代碼，例如(rú)n≥‍≠♥odejs,個(gè)人(rén)喜歡python的(de)風(fēng)格，​ε✘∏;write less code do more thing）來(lái&✔λ¥)讀(dú)取一(yī)個(gè)html文(wén)件(jiΩ•£€àn)，然後提取style标簽裡(lǐ)&♦✔✘面的(de)內(nèi)容 和(hé) body标簽裡(lǐ)面的(d↓≥e)內(nèi)容，再進行(xíng)類型₹∞β匹配，替代為(wèi)內(nèi)聯樣§β>₽式，下(xià)面是(shì)python的(de)源代碼：λ↕

import sys

def is_space(s):
    return s "✘←=='\r' or s=&#  λ61;'\n' or s=='\t' or s&#™₹₹γ61;=' '

class ConvertInnerStyle:
  π±  """this class is to con→ vert 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"""
        sel≥★≠ f.total_content=''
        se >lf.style_dict={}
        self._fg★α_init(origin)

    def _fg_in↕™↔​it(self,origin):
        ""& "#34;initialize the resouces∞  that we provided """
        ✔→f=open(origin,'r',encoding="≠¥←;UTF-8")
        self.to₽&↔★talContent=f.read()
        f.close()
      Ωφ★γ  self._process_style()

    def _fδ↓g_find_style(self,tag):
   ÷≠      """this is the method that c↕×an generate the substring which match¶✔ the tag name of the html"" λ""
        preffix='<' ​;+tag+'>'
        suffix&$$#61;r'</'+tag&#↓÷43;'>'
        s=®♥★σself.totalContent.find(preffix)™​≤β
        e=self.totalContent.find(sαεuffix)
        return self.totalContent[s+‍↔♣len(preffix)-1:e]

    def _proce÷₩δss_style(self):
        """proce¶¶↓&ss the source code within t ₽>★he style tag ,generate the content wh♦☆♠$ich match the class name,(optional it can prα∑∏ocess the multiple classes which has tβ>♥he same styles)"""
       ¶↓∑§ #get the source code withα♣in the style tag of the html
        inn↔∑♥er_styles=self._fg_find_styl♥♦∞↕e('style')
       ¥↕✔ #print(inner_styles)
     £→   #for loop that find the index of the } c♥'÷ haracter
        end_index=i€¥↕nner_styles.find('}')
        print♥α(end_index)
        while end_in™∏‌πdex!=-1:
            #get the sub≠‍≈∞string of the single styles block
           α©σ★ #which contain .xxx{xxxx} ↔≥  .xxx,.yyy,.uuu {xxx;xxxx;}
           γ> single_styles=inner_styles[:e↑✔♥nd_index+1] #because the end_index is the↑₽< forward element of }
            print(single_s"σ​tyles)
            #first find λ♣↕the index of {
            index=→ Ω;single_styles.find('{')
            γ>ii=index-1
            #the variable to &Ωcheck whether it is the last claσ©←ss before the style block 
      ™¶∞↕      is_valid=True

     φ​       class_name=''
            clas<π§s_name_list=[]
        ★<₹    #from the end to the s↕αtart loop through each charater find theε★ε class name list which can contain at least o±™✘ne class 
            while ii>∞‍1;0:
                #if it is the space skip i'↓♣✔t 
                if is_space(single_styleβ×✔s[ii]):
                    ii-=1
       ∞πα∏             continue
       ±∑★☆         c=single_styles[ii]>✘∞
                if c==€Ω9;,':
                    is_vali<'d=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_na>"≠me=''.join(l)
   σγ                     class_name_list.append( <↓class_name)
                        #empty t★<he class name in order to r™↑¶euse next loop
           ∏γ♦             class_name=''
         €β           else:
           ♠δ÷             class_name=class_name"↔£δ3;c
                ii-=1
            #f₹ φind the style block and strip &★λ↑the empty the \r\n charater
        ×>↓✘    style_block=single_styles[in✔×dex+1:end_index]
            sty®∏αle_block=style_block.s ®&αtrip().replace('\r','').repl£₩<₩ace('\n','')
            #put t ‍±♠he element of the class name list to  $the dictionary
            for tmp i<↑n class_name_list:
                ‌¥♥self.style_dict[tmp]=style_b™¶★lock
            inner_styles=inner_stylε♠↔Ωes[end_index+1:]
      →≈≥      end_index=inner_styles.fin¶&α↓d('}')

        for key in self↕₽ .style_dict:
            pri$‍∏nt(key+' : '&#δλε43;self.style_dict[key])
    def generate≥↑(self,filename):
        #fin¥€ d the body 
        body=self._fg_find_s≤©☆tyle('body')
        for key in self.¥‍style_dict:
            body=body.re←÷place('class="'+keα₩→y+'"','style' 1;"'+self.style_dict[key]+'δλ₩↑;"')
        f=open(fi™  lename,'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__&♦γ≈#34;:
    main()

使用(yòng)方法：

1、通(tōng)過命令行(xíng)工(gōng)↔§® 具 python converter.py 需要(yào)轉換的(de)文(wén)件(j₩©α♣iàn) 最後生(shēng)成的(de)內(nèi)聯樣式文(wén)件(j↑→±iàn)

這(zhè)個(gè)工(gōng)具還(hái)不(bù)支§$持跳(tiào)過注釋，有(yǒu)興趣的γ♠(de)同學可(kě)以自(zì)己去(qù)修正

.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裡(lǐ)面的(de)內(nèi)部樣式

content-wrap : width: 100%; hei δght: 40px; display: flex;✔ε≥δ align-items: flex-end; j♥‍∏ustify-content: flex-start;
header : width: 100%; height: 4₹₩•♦0px; display: flex; aliγα"<gn-items: flex-end; justify-contenβ‍↑t: flex-start;
icon : width: 100%; height: ♠∑40px; display: flex; ✔¶β align-items: flex-end; ™± justify-content: flex-start;
hr : width: 100%; heig≈§♣ht: 40px; display: flex;↕‍‌ align-items: fεφ♣®lex-end; justify☆✔β-content: flex-start;

通(tōng)過python代碼提取的(de)對(duì)應類名 ®★： 樣式的(de)字典