最近接觸到小程序開發(fā)忱辅，之前通過網(wǎng)課學(xué)過微信小程序的開發(fā)并實(shí)現(xiàn)過一個(gè)小的demo呈昔，但是這次的開發(fā)是釘釘小程序顶捷，而且考慮到之后的拓展性，考察了集中技術(shù)棧之后決定用uniapp開發(fā)翰蠢，然后再編譯成釘釘小程序项乒，這樣以后再移植到其他平臺(tái)就方便很多
一、相關(guān)文檔連接
1梁沧、uniapp : https://uniapp.dcloud.io/
2檀何、Hbuilder開發(fā)工具 : https://www.dcloud.io/hbuilderx.html
3、Vue : https://cn.vuejs.org/
4廷支、uView : https://uviewui.com/
5频鉴、編譯與發(fā)行：https://ask.dcloud.net.cn/article/36353
6、引入iconfont字體圖標(biāo)：http://www.reibang.com/p/7fc08b1b4d85
7恋拍、flex布局：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
8垛孔、sass： https://www.sass.hk/
二、開發(fā)技術(shù)棧簡(jiǎn)介
小程序使用uniapp作為框架進(jìn)行開發(fā)芝囤，uniapp使用vue的語(yǔ)法+小程序的標(biāo)簽和API似炎，整個(gè)架構(gòu)使用uniapp搭建辛萍，UI框架使用uView進(jìn)行開發(fā)悯姊，uView是uniapp生態(tài)最優(yōu)秀的UI框架，提供了豐富的UI組件贩毕，uView是使用vue語(yǔ)法開發(fā)的悯许，引入iconfont對(duì)項(xiàng)目中的圖標(biāo)進(jìn)行管理，提高頁(yè)面渲染性能辉阶，sass是uniapp默認(rèn)支持的css擴(kuò)展語(yǔ)言先壕，可以使用變量存儲(chǔ)顏色等信息瘩扼，方便全局配置
三、Hbuilder開發(fā)工具下載
到Hbuilder下載頁(yè)面下載開發(fā)工具垃僚，一定要下載App開發(fā)版集绰，App開發(fā)版已集成相關(guān)插件，開箱即用
下載之后可以使用Hbuilder打開uniapp項(xiàng)目谆棺，uniapp項(xiàng)目目錄與微信小程序的開發(fā)目錄一致栽燕，相關(guān)說明在uniapp官方文檔有介紹
四、運(yùn)行配置說明
{
"uni-app": {
"scripts": {
"mp-dingtalk": {
"title":"釘釘小程序",
"env": {
"UNI_PLATFORM": "mp-alipay"
},
"define": {
"MP-DINGTALK": true
}
}
}
}
}
在項(xiàng)目package.json文件的配置如上代碼(gitlib中的代碼已經(jīng)配置過改淑，無需在配置)
配置完之后在Hbuilder中會(huì)顯示運(yùn)行釘釘小程序碍岔，如下圖
點(diǎn)擊運(yùn)行釘釘小程序后，Hbuilder會(huì)將uniapp項(xiàng)目編譯成釘釘下程序并放到相應(yīng)文件目錄中朵夏，之后會(huì)自動(dòng)打開釘釘小程序開發(fā)工具蔼啦，但需要配置釘釘小程序開發(fā)工具路徑，配置方法如下：選擇運(yùn)行配置
設(shè)置釘釘小程序開發(fā)工具路徑
五仰猖、通過Hbuilder把uniapp項(xiàng)目編譯成釘釘小程序
1捏肢、選中uniapp項(xiàng)目，選擇運(yùn)行釘釘小程序
2饥侵、編譯成功后會(huì)自動(dòng)打開釘釘小程序開發(fā)工具猛计，編譯過程會(huì)在控制臺(tái)中打印，打印內(nèi)容包括釘釘小程序所在的文件目錄及如何使用釘釘小程序開發(fā)工具打開
3爆捞、在釘釘小程序中打開釘釘小程序
開發(fā)過程中修改Hbuilder中的文件會(huì)自動(dòng)編譯并在釘釘小程序中呈現(xiàn)修改奉瘤，是熱更新，無需反復(fù)運(yùn)行
