uni-app开发钉钉小程序

最近接触到小程序开发，之前通过网课学过微信小程序的开发并实现过一个小的demo，但是这次的开发是钉钉小程序，而且考虑到之后的拓展性，考察了集中技术栈之后决定用uniapp开发，然后再编译成钉钉小程序，这样以后再移植到其他平台就方便很多

一、相关文档连接

1、uniapp : https://uniapp.dcloud.io/
2、Hbuilder开发工具 : https://www.dcloud.io/hbuilderx.html
3、Vue : https://cn.vuejs.org/
4、uView : https://uviewui.com/
5、编译与发行：https://ask.dcloud.net.cn/article/36353
6、引入iconfont字体图标：https://www.jianshu.com/p/7fc08b1b4d85
7、flex布局：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
8、sass： https://www.sass.hk/

二、开发技术栈简介

小程序使用uniapp作为框架进行开发，uniapp使用vue的语法+小程序的标签和API，整个架构使用uniapp搭建，UI框架使用uView进行开发，uView是uniapp生态最优秀的UI框架，提供了丰富的UI组件，uView是使用vue语法开发的，引入iconfont对项目中的图标进行管理，提高页面渲染性能，sass是uniapp默认支持的css扩展语言，可以使用变量存储颜色等信息，方便全局配置

三、Hbuilder开发工具下载

到Hbuilder下载页面下载开发工具，一定要下载App开发版，App开发版已集成相关插件，开箱即用

下载之后可以使用Hbuilder打开uniapp项目，uniapp项目目录与微信小程序的开发目录一致，相关说明在uniapp官方文档有介绍

四、运行配置说明

{
  "uni-app": {
      "scripts": {
          "mp-dingtalk": {
              "title":"钉钉小程序", 
              "env": {
                  "UNI_PLATFORM": "mp-alipay"   
              },
              "define": {
                  "MP-DINGTALK": true
              }
          }  
      }  
  }
}

在项目package.json文件的配置如上代码(gitlib中的代码已经配置过，无需在配置)

配置完之后在Hbuilder中会显示运行钉钉小程序，如下图

点击运行钉钉小程序后，Hbuilder会将uniapp项目编译成钉钉下程序并放到相应文件目录中，之后会自动打开钉钉小程序开发工具，但需要配置钉钉小程序开发工具路径，配置方法如下：选择运行配置

设置钉钉小程序开发工具路径

五、通过Hbuilder把uniapp项目编译成钉钉小程序

1、选中uniapp项目，选择运行钉钉小程序

2、编译成功后会自动打开钉钉小程序开发工具，编译过程会在控制台中打印，打印内容包括钉钉小程序所在的文件目录及如何使用钉钉小程序开发工具打开

3、在钉钉小程序中打开钉钉小程序

开发过程中修改Hbuilder中的文件会自动编译并在钉钉小程序中呈现修改，是热更新，无需反复运行