近很長(zhǎng)一段時(shí)間，都在研究釘釘微應(yīng)用的開(kāi)發(fā)，從weex，h5，到現(xiàn)在的E應(yīng)用，爬過(guò)不短的路，踩過(guò)不少的坑。6月份的時(shí)候，釘釘正式發(fā)布了E應(yīng)用的開(kāi)發(fā)模式，能通過(guò)簡(jiǎn)潔的前端語(yǔ)法寫(xiě)出Native級(jí)別的性能體驗(yàn)。眼看著微應(yīng)用的H5前端開(kāi)發(fā)方式就要被拋棄時(shí)，寫(xiě)這篇文章就當(dāng)是一個(gè)緬懷吧。

Demo見(jiàn)github

• DingDemo
• DingDemoApi

第一步：官方文檔

如圖可以看到官方提供的API，基本上常用的就是紅框中的內(nèi)容，要仔細(xì)研究一下。

官方提供的api.png

第二步：配置環(huán)境和工具

我用的工具是NowaGUI和VSCode(webStorm等等也可以)，nowa工具很方便集成了很多要配置的環(huán)境，一鍵安裝就可以了。我用的是第一個(gè)模板，其實(shí)模不模板都無(wú)所謂(模板是用native寫(xiě)的，我不是太懂就沒(méi)用，懂得童鞋直接用native也行)，反正里面的內(nèi)容我都不用的，只是用nowa提供的便捷功能就行了。

nowa創(chuàng)建項(xiàng)目模板1.png

然后填寫(xiě)信息，依賴(lài)安裝就可以了。具體操作，nowa的官方文檔寫(xiě)的很詳細(xì)，我就不贅述啦。

nowa創(chuàng)建項(xiàng)目模板2.png

nowa創(chuàng)建項(xiàng)目模板3.png

第三步：開(kāi)始寫(xiě)代碼

其實(shí)也就紅框部分的內(nèi)容最重要，其他文件沒(méi)時(shí)間就不用看了。H5代碼寫(xiě)在html文件夾里面就可以啦。

代碼結(jié)構(gòu).png

第四步：常見(jiàn)問(wèn)題處理

本想寫(xiě)在一起，但是開(kāi)發(fā)過(guò)程中遇到的問(wèn)題太多，寫(xiě)在一起就顯得比較繁瑣了。那么開(kāi)發(fā)過(guò)程中遇到的問(wèn)題就見(jiàn)下一篇《釘釘H5微應(yīng)用開(kāi)發(fā)常見(jiàn)問(wèn)題》。