背景
2020年2月8日，著名跨端开发技术框架uniapp发布小程序SDK。借用官方的一句话来解释这个SDK的功能：
“uni小程序SDK，是一个用于原生App中集成的SDK，它可以帮助原生App快速实现小程序的能力”
作为一个已经被业界认可的跨端开发技术框架，uniapp又在跨端开发的道路上向前迈进了一大步。
此次小程序sdk的发布，标志着小程序技术领域的全面竞争时代来临。
它可以让众多原生app以极低的技术成本，构建自己的小程序生态（注意，是自己的）。它从技术端解决了小程序生态构建的基础设施问题。
笔者长年从事软件开发行业，于19年开始入坑uniapp，用于替代传统的vue的技术方案。在生产环境下，实现了h5，小程序，app的多端快速低成本的开发。
技术驱动革新
未来基于uniapp的应用将会获得一个全新的应用场景——无缝嵌入各种原生app，这是一种挑战h5集成难易度的方案。
总所周知，传统app集成大多采用SDK封装、webview内嵌、接口对接这3种方案。然而这些方案往往在开发成本、使用体验方面都难以得到比较好的平衡。
1.SDK封装方式。适合偏底层的业务，比如各种直播SDK、IMSDK、推送SDK。然而对于一些重业务的应用来说，SDK方式集成存在比较大的缺陷，不同的终端需要开发不同的SDK。能否抽出业务层是开发者比较关心的问题。以往面对比较大的业务应用，封装成SDK显然不合适。
2.Webview内嵌形式，体验糟糕，网页的体验终归是在服务端，即便是采用了vue构建SPA单页应用，仍然难以解决与原生的相互调用问题。受制于webview的能力，很多页面切换的效果都不理想。
3.接口对接方式，无疑是可以获得最佳的体验，但是也是最高成本的，目前app开发，很大一部分工作均在业务前端，如果通过接口对接，那么对于app的开发者来说，其存在的意义仅限于节省后端开发人力。
综合上述三种常见的集成方式，一种体验优秀，成本低廉的集成模式一直被业界需求，单也一直未被满足。
uniapp小程序SDK似乎就是捕捉到了这种需求，顺势而为，推出小程序SDK。目前开源程度仅限于大厂商单独获取源码。
实践
笔者在从业早期，也学习过安卓应用的开发，所以自己动手搭建了一套安卓的开发环境。多年未从事安卓开发，搭建环境的过程也是非常坎坷。不过最终还是成功运行了uniapp提供的项目示例。
先上一个官方的示例：

下面是笔者进行改造后，将一个自己公司的产品进行对接。通过判断勾选的单选框，设置不同的appid，从而打开不同的界面。

可以看到，我们成功打开了自己开发的应用。并且还可以直接启动至对应的子页面。
这边再讲一下直接打开子页面的应用场景。
在进行业务对接的过程中。比如开发者的应用场景是自己原有的业务app上对接一个社区，来做社区化运营，那么这个时候，我们往往会做一个应用场景就是他需要在app原有的界面内，植入一个发布按钮。点击该按钮，可以直接打开社区，并跳转到发布界面。
这样的体验是非常棒的。
对应的启动代码：

如何夹带启动参数？

上面这段代码是设置一个参数a，值为1，在启动的时候作为启动参数。
在uniapp当中，只需要通过对应的api获取到这个参数。
在开发当中，开发者很关心宿主程序如何与内嵌的应用进行交互。尤其是我们在做用户免登陆这个需求的时候，h5 webview方式只需要在url当中，夹带当前用户的token，即可实现免登陆。那么uniapp这边可以通过启动参数的形式优雅地实现这个需求。
除此之外，官方还提供了一套完整的小程序SDK的api文档，供开发者查阅。笔者初步看了一下，可以实现一些常规性的界面UI的调整。满足不同的业务场景使用。同时也提供了一些关闭、触发的回调函数。基本可以满足业务需求。
缺点？
经过笔者真机测试。将我们的产品短说社区系统1.9.0完整版本实际置入后。得到了一个较为不错的表现，但是仍有不足。
首先是v3编译器，uniapp近期推出的最新的编译器，官方称提升了性能等等，由于历史原因，短说社区基于老的编译器开发，在真机测试中，在V3下存在一点样式兼容问题。导致了些许错位。
在打包资源后，置入演示demo，发现小程序SDK环境下运行后，同样存在样式错位问题。但是所幸整体交互还算可以。运行较为流畅，主干功能未受影响。
实战下来，总体感觉uniapp目前提供的小程序SDK有以下几个不足之处：
1.编译测试较为麻烦，目前只能在开发环境下，模拟运行小程序版本，测试无大问题后，将资源包导出后放进app。再进行真机调试。如果编译差异不存在，那么这样的调试也基本可以接受。就怕存在一些编译差异，导致一些摸不到头脑的坑。
2.V3编译器自身的向下兼容问题。相信一些基于v3开发的应用不存在这个问题，但是对于一些有些积累的APP，譬如笔者公司的产品来说，就比较头疼了。需要逐个调试，进行调整修复。笔者测试了老版本编译器，错位极其严重。而使用v3后，有所改观。证明编译器和sdk本身就是在一个完善过程中。
3.包的大小问题，由于笔者手上的是官方提供的演示案例。所以无法进行前后比较。但是从官网评论来看，有开发者发现集成这个小程序SDK后，包体积大了48MB，也有人通过缩减功能只增加了12MB。倒是导出的资源包体积还可接受，基本可以忽略。
4.动态下载和加载资源包的问题，目前官网还未有明确的文档说明。如果可以实现动态下载资源包并且运行，意味着可以实现像微信小程序这样的生态。想象空间非常大。尤其对于有千万级用户的app来说，吸引力巨大。
5.API目前虽然还不错，但是还需给一些发展时间。对于复杂的应用场景，还需要更多的API支撑。
6.目前由于官方的开源策略，需要app厂家自行与官方沟通获得小程序SDK源码，官方注明是没有费用的。
最后
目前国内互联网市场，增量难以获得，且成本高昂，在存量市场下，如何开拓更多的业务场景，以更低成本更轻快的速度集成现成的软件厂商提供的应用是未来几年的一个重要应用场景。
Uniapp此番推出的小程序SDK，如果能够坚持做下去，终有一天走出实验室，投入到生产环境中。
未来已来，技术问题解决了，剩下的就是比拼运营实力的时候了。国内app厂商，是时候考虑一下未来的方向了。
作者：奕潇（微信号yixiao100），短说OSX社区论坛系统产品总监，5年社交社区类产品管理经验。想天软件创始人。

问题描述

这个错误iPhone或H5可以正常随机生成钱包，仅Android会出现这个问题（不能正常生成随机钱包）

区块链异步异常捕捉  
_error:Error: platform missing String.prototype.normalize  
 (operation="String.prototype.normalize", form="missing NFKD", version=4.0.27)  

解决方案【运行环境为Hbuilder X2.4.6】

官方解释：这个ES6的API存在兼容问题，使用es6时需注意兼容性

解决方式参考：
https://ext.dcloud.net.cn/plugin?id=955

完整步骤

1. 下载normalize-demo
2. 解压后在项目中 App.vue 引入 unorm.js
3. 直接连接Android手机调试即可
4. 如有帮助，感谢点赞

小程序分享时候，不能分享自定义图片。每次分享得都是整个页面，而不是自定义的图片。求解决。。

目前uni-app已经支持云开发了，但是遗憾的是目前只支持阿里云。如果项目主要是微信小程序，其实首选还是腾讯云。但是我又想很方便的使用uni-app进行小程序开发，所以今天就尝试了一下，然后初步试了一下，结论是：很爽！

第一步：使用微信开发者工具新建小程序项目a，选择云开发

假设项目目录为：D:\mini-app

第二步：在HBuilderX里新建一个uni-app项目b，注意不要勾选云开发，因为目前uni-app只支持阿里云。

假设项目目录为：D:\uni-app

第三步：将小程序根目录D:\mini-app\a下的所有文件复制到uni-app项目根目录D:\uni-app\b下（其实反过来将uni-app项目复制到小程序项目理论上也行，只是第五步的操作会变成将小程序项目拖入到Hbulderx中，只是不确定HBuilderX能否正确识别项目类型，未尝试）

第四步：复制完成后，修改uni-app项目D:\uni-app\b\project.config.json中的miniprogramRoot配置项

"miniprogramRoot": "unpackage/dist/dev/mp-weixin/",  

原来的miniprogram目录就可以删除了

第五步：删除微信开发者工具中刚创建的项目a，然后导入小程序，目录为D:\uni-app\b

这样，你就可以在HBuilderX中畅快的编写代码了，每次保存代码后微信开发者工具会自动更新重新加载！

Over！

刚开发完的自定义取景相机uniapp插件，可定义取景框大小，有需要的可以私信我 5+也可以，但是需要离线打包

内置浏览器新功能

HBuilderX 2.6.10+版本，内置浏览器 增加 “查找代码中对应的DOM节点” 和 “高亮浏览器内对应元素” 功能

• 在内置浏览器，右键菜单，点击查找代码中对应的DOM节点,即可跳转到编辑器相应位置
• 在编辑器内，右键菜单，点击高亮浏览器内对应元素, 即可在内置浏览器显示相应元素

示例

引言

移动互联网的初期，囿于设备硬件性能限制，流量以原生App为主，iOS、Android是当时两大平台。

随着硬件及OS的更新换代，H5可承载的体验逐步完善，为提高开发效率、节约资源（复用代码）以及热更新等目的，Hybrid模式成为主流；以及轻应用、服务号等平台的助推，H5网页流量暴涨，成为第三大平台。

2017年1月9日，微信发布小程序，历经3年发展，在今年主题为”未完成 Always Beta“的微信公开课 PRO上，微信团队披露，2019年小程序日活跃用户超过 3 亿，全年累计成交额达8000亿，同比增长超160%。

看到小程序如此惊人的增长力，我们有理由相信，有中国特色的小程序互联网时代已经到来，微信小程序也已成为继iOS、Android、H5之后的第四大流量平台。

平台分裂，为不同平台编写相同的业务代码，是件无趣的事情。

有追求的程序员，一直在探索代码复用的方案，Hybrid App即是代表。

而在如今的小程序时代，对于同样基于WEB技术的H5和小程序，如何实现代码复用，是很多前端工程师探索的方向。业内也已有不少成熟方案，从场景上来说，大致分为三类：

1. 基于跨端框架，从头开发，一套代码，发行多个平台，比如DCloud出品的uni-app、京东凹凸实验室的taro
2. 复用H5代码，转换H5代码在小程序环境中执行；适用于有H5平台沉淀，未开发小程序或小程序完善度较低的开发者；
   • 美团的mpvue框架是早期探索解决这个问题的代表，但因小程序不支持dom操作，故mpvue适用于vue的无dom操作的H5代码转换；

• 最近微信官方推出的kbone，也是为了解决“把 Web 端的代码挪到小程序环境内执行”；不过，kbone 相比 mpvue 前进了一步（当然也有了新的性能缺陷），因为：

  kbone实现了一个适配器，在适配层里模拟出了浏览器环境，让 Web 端的代码可以不做什么改动便可运行在小程序里。

  1. 复用小程序代码，转换小程序代码在web环境中运行；适用于有小程序代码沉淀，未开发H5或H5平台完善度较低的开发者；这个方向业内成熟的方案还比较少。

uni-app近期支持了小程序自定义组件运行到H5平台，是对如上第三种场景的一种探索。

需求场景

鉴于小程序的低成本获客特征，很多厂商选择先开发小程序，验证业务模式后，再扩展至H5、App等其它平台。

开发者虽可借助转换器将小程序代码转换为uni-app项目（或其它跨端框架项目），快速实现多平台发行；但不少开发者是不敢轻易决策将跨端版本替换之前线上的小程序版本的，毕竟线上版本已稳定运行了一段时间。

常选的方案是：让原生小程序版本和uni-app跨端版本并行一段时间，微信平台继续使用原生版本，其它平台使用uni-app跨端版本；经过一段时间验证uni-app版本稳定后，再使用uni-app版替换掉原生小程序版本。

在这段并行的时间内，开发者需要同时维护微信原生、uni-app两个版本，新增业务需编写两份逻辑相同的代码，重复劳动，成本叠加，如何改善？

借助uni-app 支持将微信小程序组件运行到H5平台的特性，我们给出一种思路：

• 开发者在原生小程序项目中，将新增业务以自定义组件的方式开发，优先上线小程序；
• 拷贝小程序组件的wxml/wxss/js/json文件到uni-app 项目下，通过uni-app的编译器及运行时，保证小程序自定义组件在H5平台的正确运行。

这个方案的好处是：

• 优先小程序开发，毕竟小程序早已上线，有存量用户

• 复用小程序组件，新增业务仅需开发一套代码即可，降低开发成本

不止自己开发的小程序组件，业内开源的三方小程序组件，均可复制到uni-app项目项目中，运行到H5平台。

另外，部分公司的产品经理，会要求不同平台有不同的交互，但核心业务逻辑是相同的，开发者常会通过维护不同项目的方式来满足产品经理需求。此时，采取如上方案，同样可满足多个项目复用相同业务逻辑的诉求。

实际上，uni-app之前已支持将小程序自定义组件运行到App平台，对于有小程序组件沉淀或优先小程序的开发者来说，这是个好消息，一套业务组件，快速运行到iOS、Android、H5、微信小程序这四大流量平台（实际上也可运行到QQ小程序平台）。

uni-app 引用小程序组件演示

uni-app项目中使用自定义组件的方法很简单，分为三步：

1、拷贝小程序自定义组件到uni-app项目根目录下的wxcomponents文件夹下

2、在 pages.json 对应页面的 style -> usingComponents引入组件，如：

{  
    "pages": [  
        {  
            "path": "index/index",  
            "style": {  
                "usingComponents": {  
                     "custom": "/wxcomponents/custom/index"  
                }  
            }  
        }  
    ]  
}

3、在页面中使用自定义组件，如：

<!-- 页面模板 (index.vue) -->  
<view>  
    <!-- 在页面中对自定义组件进行引用 -->  
    <custom name="uni-app"></custom>  
</view>

方案实现思路

简单介绍下uni-app的多端发行原理。

uni-app基于Vue.js runtime，页面文件遵循Vue.js 单文件组件 (SFC) 规范，天然对H5的支持比较好，发行到H5平台时，先通过vue-loader解析.vue文件，导出Vue.js 组件选项对象，然后在运行时补充规范实现：

• 组件：框架提供内置组件（view/swiper/picker等）的实现，保证平台UI及交互的一致性
• 接口：在H5平台封装框架接口，比如路由跳转，showToast等界面交互
• 生命周期：Vue.js的理念是一切皆为组件，没有应用和页面的概念；框架需创造出应用及页面的概念，模拟onLaunch、onShow等钩子

uni-app发行到小程序平台时，逻辑又有不同，主要工作有2块：

• 编译器：将.vue文件拆分成wxml/wxss/js/json4个原生页面文件
• 运行时：Vue.js和小程序都是逻辑视图层框架，都有数据绑定功能；运行时会实现Vue.js到小程序的数据同步，及小程序到Vue.js的事件代理

小程序自定义组件类似小程序原生的页面开发，一个自定义组件同样由wxml/wxss/js/json 4个文件组成，另有单独的组件规范（如Component 构造器、Behaviors特性等）。

所以，小程序自定义组件运行到H5平台，可借助uni-app已有平台功能快速实现：

• 编译阶段：将wxml/wxss/js/json4个文件合并为.vue文件（类似 uni-app 发行到小程序的逆过程），然后调用uni-app发行H5平台的编译过程，通过vue-loader解析.vue文件，导出 Vue.js 组件选项对象
• 运行阶段：实现 Component 构造器、Behaviors特性，模拟自定义组件特有的生命周期

编译：转换文件（mp2vue）

小程序自定义组件发行到H5平台，在编译环节主要有2项工作：

1. 将自定义组件的wxml/wxss/js/json 4个文件组成，编译转换成.vue文件，即小程序转vue，可简写为mp2vue

2. 通过vue-loader解析.vue文件，导出 Vue.js 组件选项对象

其中，步骤2是Vue.js项目的标准编译过程，略过不提；我们重点阐述步骤1。

mp2vue将4个独立wxml/wxss/js/json 的文件合并成一个.vue文件，并组装成template、script、style 这种三段式的结构，流程包括：

1. wxml文件生成template节点，同时完成指令、事件等模板语法转换
2. js/json文件生成script节点，同时完成组件注册过
3. wxss文件生成style节点，自动转换部分css兼容语法
4. 合并为.vue文件

具体实现上，uni-app编译前先扫描wxcomponents目录，若存在则认为有小程序自定义组件，启动文件转换工作(uni-migration插件来完成)：

//加载转换器  
const migrate = require('@dcloudio/uni-migration')   
//扫描wxcomponents目录  
const wxcomponents = path.resolve(process.env.UNI_INPUT_DIR, 'wxcomponents')   
if (fs.existsSync(wxcomponents)) {   
  migrate(wxcomponents, false, {  
    silent: true   
  }) // 转换 mp-weixin 小程序组件  
}

接着开始对wxml/wxss/js/json文件逐个解析，并合并为一个.vue文件：

module.exports = function transformFile(input, options) {  
    //首先转换json文件，判断是否为组件  
  const [jsCode, isComponent] = transformJsonFile(filepath + '.json', deps)  
  options.isComponent = isComponent  
    //转换 wxml 文件  
  const [templateCode, wxsCode = '', wxsFiles = []] = transformTemplateFile(filepath + templateExtname, options)  
    //转换wxss文件  
  const styleCode = transformStyleFile(filepath + styleExtname, options, deps) || ''  
  //转换js文件  
  const scriptCode = transformScriptFile(filepath + '.js', jsCode, options, deps)  
    // 生成合并后的.vue文件源码  
  return [  
    `${commentsCode}<template>  
${templateCode}  
</template>  
${wxsCode}  
<script>  
${scriptCode}  
</script>  
<style platform="mp-weixin">  
${styleCode}  
</style>`,  
    deps,  
    wxsFiles  
  ]  
}

进一步细节说明，wxml文件转为template节点时，需完成各项指令、事件等模板语法的转换，例如：

将一个最简自定义组件，按照如上流程转换，结果示意如下：

运行时：模拟小程序组件环境

uni-app的编译器并不转换小程序组件的 JS 代码，依然保留Component构造器的写法，甚至其中的API依然是wx.开头的方式，这些都依赖uni-app在H5平台的运行时来解决，主要有如下几部分内容：

• Component构造器：解析小程序组件的各种选项配置，转换为Vue组件定义，包括变通实现其中的差异部分，如小程序组件特有的”组件所在页面的生命周期“
• Behaviors特性：转换为Vue的混入（mixin）
• 数据响应：在H5平台实现setData接口及this.data.xx = yy的数据通讯机制
• API前缀：可在运行时通过代理机制，自动将wx.xx替换为uni.xx，这个比较简单，不详述

Component构造器

uni-app在H5平台定义了一个Component函数，执行到小程序的Component构造器函数后，开始循环解析其属性，并转换成Vue组件属性，流程示意代码如下：

export function Component (options) {  
  const componentOptions = parseComponent(options)  
  componentOptions.mixins.unshift(polyfill)  
  componentOptions.mpOptions.path = global['__wxRoute']  
  initRelationsHandler(componentOptions)  
  global['__wxComponents'][global['__wxRoute']] = componentOptions  
}  

export function parseComponent (mpComponentOptions) {  
  const {  
    data,  
    options,  
    methods,  
    behaviors,  
    lifetimes,  
    observers,  
    relations,  
    properties,  
    pageLifetimes,  
    externalClasses  
  } = mpComponentOptions  

  const vueComponentOptions = {  
    mixins: [],  
    props: {},  
    watch: {},  
    mpOptions: {  
      mpObservers: []  
    }  
  }  

    // 开始逐个解析所有属性  
  parseData(data, vueComponentOptions)  
  parseOptions(options, vueComponentOptions)  
  parseMethods(methods, vueComponentOptions)  
  parseBehaviors(behaviors, vueComponentOptions)  
  parseLifetimes(lifetimes, vueComponentOptions)  
  parseObservers(observers, vueComponentOptions)  
  parseRelations(relations, vueComponentOptions)  
  parseProperties(properties, vueComponentOptions)  
  parsePageLifetimes(pageLifetimes, vueComponentOptions)  
  parseExternalClasses(externalClasses, vueComponentOptions)  
  parseLifecycle(mpComponentOptions, vueComponentOptions)  
  parseDefinitionFilter(mpComponentOptions, vueComponentOptions)  
    // 返回 Vue 组件  
  return vueComponentOptions  
}

在这个过程中，需处理小程序自定义组件和 Vue组件的属性对应关系及细节差异，如小程序组件的lifetimes：

Behaviors特性的实现过程，类似Component构造器，不再赘述。

数据响应

Vue和小程序都有一套数据绑定系统，但机制不同，比如在Vue体系下，数据赋值是这样的：

this.a = 1

但在小程序中，数据赋值方式则是这样的：

this.setData({  
    a:1  
}) //响应式  
this.data.a = 2 //非响应式

另外，小程序和Vue在数据的properties、observer等方面都存在不少差异，经过我们评估，若将小程序的数据响应用法直接映射到Vue体系下，复杂度较高且有性能压力，故uni-app在H5平台按照微信的语法规范，单独实现了一套数据响应系统。

// 小程序的setData在H5平台的实现  
function setData (data, callback) {  
  if (!isPlainObject(data)) {  
    return  
  }  
  Object.keys(data).forEach(key => {  
    if (setDataByExprPath(key, data[key], this.data)) {  
      !hasOwn(this, key) && proxy(this, SOURCE_KEY, key);  
    }  
  });  
  this.$forceUpdate();//数据变化，强制视图更新（响应式）  
  isFn(callback) && this.$nextTick(callback);  
}

将setData挂载到 vm 对象上，可通过this.setData这种小程序的方式调用；同时将数据绑定到data属性上，支持this.data.xx的访问方式。

export function initState (vm) {  
  const instanceData = JSON.parse(JSON.stringify(vm.$options.mpOptions.data || {}))  
  vm[SOURCE_KEY] = instanceData  

  //vm对象上挂载 setData 方法，实现小程序方法  
    vm.setData = setData   

  const propertyDefinition = {  
    get () {  
      return vm[SOURCE_KEY]  
    },  
    set (value) {  
      vm[SOURCE_KEY] = value  
    }  
  }  
    //小程序用法，可通过this.data.xx访问  
  Object.defineProperties(vm, {  
    data: propertyDefinition,  
    properties: propertyDefinition  
  })  

  Object.keys(instanceData).forEach(key => {  
    proxy(vm, SOURCE_KEY, key)  
  })  
}

虽然数据响应是uni-app自己实现的，但渲染依然使用了Vue框架的render函数，此时需小程序规范中的this.data.xx和Vue规范中的this.xx保持一致，通过代理的方式实现：

// mp/polyfill/state/proxy.js  
const sharedPropertyDefinition = {  
  enumerable: true,  
  configurable: true  
};  

function proxy (target, sourceKey, key) {  
  sharedPropertyDefinition.get = function proxyGetter () {  
    return this[sourceKey][key]  
  };  
  sharedPropertyDefinition.set = function proxySetter (val) {  
    this[sourceKey][key] = val;  
  };  
  Object.defineProperty(target, key, sharedPropertyDefinition);  
}

这里仅列出了主要的几步，中间涉及细节很多；部分无法通过Vue扩展机制实现的功能，只好修改Vue.js的内核源码，比如updateProperties支持、小程序wxs、externalClasses等功能在H5平台的支持，都需要定制部分 Vue.js runtime 源码。

结语

本文分享了uni-app将微信小程序自定义组件发行到H5平台的实现思路，希望对大家有所启发。

但这种方案，归根到底是为了解决多套项目并存时的业务重复开发的问题。

如果你是从头开发，我们建议直接选择业内成熟的跨端框架，既可以保持一套代码，更省力的维护，还可以借助框架的成熟生态（如跨端UI库及插件市场），基于成熟轮子，快速完成业务的上线开发；

uni-app框架代码，包括小程序组件发行到H5平台的代码，全部开源在github，如果大家对本文逻辑有疑问，欢迎提交issue交流。

其实样式出现问题基本上是有地方给了样式，为什么v3下有一些样式会乱掉呢，那是因为和其它库里面的一下样式class类名重复了，这时候修改你的class名称就可以了，为什么v2不会，v3会这样子，具体问官方吧

{  
"editor.caretWidth" : 1,  
"editor.colorScheme" : "Default",  
"editor.wordWrap" : false,  
"explorer.autoReveal" : true,  
"explorer.iconTheme" : "vs-seti",  
"workbench.colorCustomizations": {  
"[Default]": {  
"sideBar.background":"#bde2fa", //文件项目管理器颜色  
"sideBar.border":"#2369cb",    //文件资源管理器边框颜色  
"editor.background":"#d7ebfd", //编辑区域背景颜色  

"toolBar.background":"#e4f0fd",//工具栏背景颜色  
"toolBar.hoverBackground":"#93befd",//工具栏上图标被选中时的背景颜色  
"toolBar.border":"#1b2154",//工具栏边框颜色  

"tab.activeBackground":"#53d3fa",//标签卡  选中时的背景颜色  
"tab.activeForeground":"#341703",//选中时的前景颜色  
"tab.inactiveBackground":"#a4d9fa",//未选中时的背景颜色  
"tab.inactiveForeground":"#938D8B",//未选中时的前景颜色  
"tab.hoverBackground":"#fab86d",//鼠标滑过时的背景颜色  
"tab.unfocusedHoverBackground":"#4671fd",//未选中分栏里鼠标滑过未选中标签的背景颜色  
"tab.unfocusedActiveForeground":"#242227",//未选中分栏里选中标签的前景颜色  
"tab.unfocusedInActiveForeground":"#FDF0ED",//未选中分栏里未选中标签的前景颜色  
"editorGroupHeader.tabsBackground":"#9dedfd",//tabs背景颜色  

"editorSuggestWidget.selectedBackground":"#53d3fa",//代码助手 弹窗选中条目时背景颜色  
"editorSuggestWidget.background":"#a5e3f0",//助手弹窗背景颜色  
"editorSuggestWidget.border":"#cee0fa",//助手弹窗边框颜色  
"editor.wordWrap": true,// 是否自动换行。  

"input.background":"#75dbfa",//文本框背景颜色  
"inputValidation.infoBackground":"#e8fafd",//下拉框背景颜色  
"inputList.hoverBackground":"#a3e7fa",//鼠标滑过item背景颜色  
"inputList.border":"#75dbfa",//下拉框边框颜色  

"list.foreground":"#5f936c",//前景颜色  
"list.highlightForeground":"#139556",//高亮时前景颜色  
"list.activeSelectionBackground":"#faab49",//选中条目背景颜色  
"list.activeSelectionForeground":"#18b46b",//选中条目前景颜色  
"list.hoverBackground":"#fab86d",//鼠标滑过背景颜色  

"outlineBackground":"#FDF0ED",//文档结构背景颜色  
"scrollbarSlider.background":"#4b7cd6",//滚动条背景颜色  
"scrollbarSlider.hoverBackground":"#2656bd",//鼠标滑过滚动条背景颜色  

"extensionButton.prominentBackground":"#d3f2fd",//预览按钮  背景颜色  
"extensionButton.prominentForeground":"#460e1c",//前景颜色  
"extensionButton.border":"#549fb4",// 边框颜色  
"extensionButton.prominentHoverBackground":"#facb89",//鼠标滑过时的背景颜色  
"extensionButton.checkColor":"#6285e4",//选中时的前景颜色  

"settings.textInputBorder":"#d4f5fa",//文本框边框颜色  
"inputOption.activeBorder":"#2f8de4",//文本框有焦点时边框颜色  
"settings.dropdownBorder":"#fadad1",// combobox下拉列表边框颜色  
"settings.dropdownListBorder":"#fadad1",//combobox item边框颜色  
"imageview.background":"#FDF0ED",//浅色方格颜色  
"imageview.foreground":"#fadad1",//深色方格颜色  
"statusBar.background":"#ecfbfd",//状态栏背景颜色  
"statusBar.foreground":"#938D8B",//状态栏前景颜色  
"minimap.handle.background":"#fadad1"//迷你地图滑块背景  
}  
},  
    "editor.minimap.enabled":false  

}

主要功能：
1、用户模块：登陆、注册
2、消息模块：单聊、群聊、客服（支持文字、图片、语音-针对app）
3、所有消息都是加密传输、支持消息离线（当用户不在线时）

功能展示：

注：

1. 即时通信后端采用spring boot 开发框架，按模块化开发的方式开发
2. 即时通信可以结合自己的用户体系，也就是，后端实现用户的相关接口，就可以接入自己的用户体系

体验地址
h5: http://114.67.115.15/h5/index.html（兼容ios,android的h5,pc端为chrome）
android 下载地址 : http://114.67.115.15/uploads/im/publish/chat_beta.apk
ios 下载地址 ：ios没有证书，暂不提供
联系人QQ：2624342267

前言：
因linux上没有itunes，无法真机运行App；linux上无法运行微信等小程序开发工具。这些问题暂时无法解决。所以DCloud暂时不会投入很多精力开发纯正的linux版，目前提供linux上的2个方案

1. linux的cli方案，可以调用HBuilderX的cli，适于在linux服务器上调用cli进行运行、发行等工程自动化方案。具体另见：https://ask.dcloud.net.cn/article/41469
2. wine环境的解决方案，如下：

1. Linux在wine上使用HBuilderX的注意事项

wine上运行HBuilderX, 优缺点如下：

• HBuilderX支持打开、编辑各种文本文件
• 支持web项目开发（web普通项目、vue项目等）
• 支持uniapp h5开发
• 不支持真机运行5+app、uniapp等项目，由于受第三方工具的影响（具体可参考5.1章节）
• 各种小程序工具，包含微信小程序、支付宝小程序等，既不支持linux，也不支持在wine下使用。

2. HBuilderX在wine上运行效果

先来看下，wine + HBuilderX的运行效果

3. wine环境安装

3.1 Linux环境说明

• HBuilderX在Linux wine上的运行，必须安装Linux桌面操作系统
• 以下所有的操作，都是基于ubuntu操作系统
• 如果您使用其它Linux发行版，如Redhat Fedora SUSE等，安装wine，请参考wine官方文档
• 如果您在其它Linux桌面操作系统使用wine + HBuilderX，遇到问题，可以反馈给我们。

3.2 wine文档

在安装wine过程中，可能遇到其它问题，请参考官方文档:

https://wiki.winehq.org

https://wiki.winehq.org/Ubuntu

3.3 wine安装

特别注意，下面操作使用到的apt相关的命令，只适用于ubuntu、deb等系统；并不是所有的linux发行版都有apt命令。 其它发行版安装wine，请参考wine官方文档

如果您使用的是 64 位系统，请开启 32 bit 架构支持（如果您之前没有开启的话）：

$ sudo dpkg --add-architecture i386 

下载添加仓库密钥：

$ wget -nc https://dl.winehq.org/wine-builds/winehq.key  
$ sudo apt-key add winehq.key

添加仓库:

$ sudo apt-add-repository 'deb https://dl.winehq.org/wine-builds/ubuntu/ bionic main'

更新安装包：

$ sudo apt update

然后安装 以下任一一个安装包：

稳定分支(选择):　

    sudo apt install --install-recommends winehq-stable  
    如果失败  
    sudo apt-get update  
    sudo apt install --install-recommends winehq-stable

开发分支:

$ sudo apt install --install-recommends winehq-devel

Staging 分支:

$ sudo apt install --install-recommends winehq-staging

（可能需要安装 wine-mono、wine-gecko，点击确定即可）

安装完成之后：

$ wine --version

3.4 wine配置（1)

配置wine:

$ winecfg

此命令会提示安装 wine-mono、wine-gecko，点击确定即可。
但这个安装过程可能会很慢，要看网速。

3.5 wine配置（2)

安装wine-gecko，请点击确定

3.6 wine配置（3)

wine配置，应用程序默认设置，如下图，请点击确定

4. HBuilderX：安装启动

4.1 HBuilderX下载、解压

1. 打开 HBuilderX官网 下载Windows HBuilderX安装包
2. HBuilderX安装包是一个压缩包，需要解压

4.2 HBuilderX 程序启动

wine上启动windows HBuilderX程序有以下几种方法：

• 在终端上，进入HBuilderX解压后的目录, 输入 wine HBuilderX.exe
• 直接双击exe程序
• 单击右键exe程序，选择打开方式也可以选择Wine打开。

4.3. HBuilderX启动后可能遇到的问题

使用wine启动HBuidlerX.exe后，可能会遇到无法显示顶部菜单的问题

解决方法：使用alt+t s 快捷键打开系统设置，选择使用原生windows窗口样式

5. 其它

5.1 问题：为什么5+app、uniapp项目，无法运行到真机和小程序？

原因：

• ios真机运行依赖于itunes
• 微信小程序开发者工具、以及其它小程序厂商本身也没有提供linux版本；并且各大windows小程序开发者工具在wine下运行也会出现各种错误