1、新增“投票”营销插件；

2、新增集赞活动可直接购买商品；

3、一个应用支持授权多个微信小程序；

4、活动推送、消息推送增加模板消息链接，用户点击模板消息可直接进入活动页面；

5、新零售小程序端“我的”我的订单提示数量；

6、点击事件增加“客服聊天”；

7、点击事件增加“意见反馈”；

8、使用买单功能增加会员成长值，1元增加1成长值；

9、会员卡新增会员卡号；

10、插件市场新增支持第三方插件；

如开发者所开发的插件需上传至多多客插件市场，请联系青妹（微信号：qfxcx66）；

更新预告
多多客（doodooke.com）本月将全面支持百度、支付宝小程序。

前言

uni-app是一个开放的、支持多种开发工具的多端开发框架。

目前前端界，主流开发工具有4个，vscode、HBuilderX、webstorm、sublime text。其中前2个市占率更高。（vscode公布的全球月活是500万，没有单独公布中国区数字。HBuilder只服务中国开发者，月活是100万+，在中国的市占率应该相近）

HBuilderX和uni-app，同属一个公司，即DCloud出品。HBuilderX团队为uni-app做了大量的优化和定制。

当然uni-app团队也为其他开发工具提供了良好的支持，尤其是对vscode，比其他多端框架做的更多。

也就是说：

1. 如果你选择了uni-app，在此基础上，希望得到最大化的效率工具支持，那么HBuilderX是你的首选。
2. 如果你坚持使用vscode，以此为原则选择开发框架，那uni-app仍然是你首选，因为它为vscode做的优化，比其他小程序或多端框架（wepy、mpvue、taro）做的更多，比如组件的语法提示。有些开发者误以为使用vscode的话，不如选其他开发框架，这是错误的。
3. HBuilderX菜单-工具里，可以切换vscode、sublime text、webstorm的快捷键方案。以减少新用户的陌生感。

本文重点是HBuilderX为uni-app做了具体什么优化。至于uni-app为其他ide做的优化，另见：

• 当vscode遇到uni-app
• webstorm下开发uni-app

HBuilderX为uni-app做了什么优化?

uni-app支持cli模式，可以用npm命令安装和构建。
其实HBuilderX中的uni-app插件，也是调用了uni-app的cli。

1. App的真机运行、日志显示、云打包只能在HBuilderX中使用
也就是使用其他ide，只能做uni-app的h5和各端小程序开发。做app开发还得使用HBuilderX。
尤其是云打包，涉及需要注册DCloud账户，必须登录HBuilderX才能使用。
当然，你也可以同时开多个编辑器，在其他编辑器里写代码，在HBuilderX里运行和打包App。

2. 代码提示
HBuilder系列是以代码提示强大著称的。自然uni-app里的代码提示是很强的。
uni-app是vue语法+小程序api。

• 首先在vue支持方面，HBuilderX是最好的。抛开uni-app不谈，即便开发普通的vue项目，其他开发工具也远不如HBuilderX，详见：https://ask.dcloud.net.cn/article/19601
• 然后在小程序api的提示方面，不管是组件、属性、方法、参数...HBuilderX都提供了完善的提示。由于这是中国特色的api，其他开发工具都没有良好支持。
• 最后在pages.json里，开发者要高频编辑，但其他任何工具都没有语法提示，而HBuilderX可以无死角提示pages.json。
  小程序的api真的很多，如果你不想一边切文档一边敲代码，如果你不想把大小写拼错，那么一定要用HBuilderX。
  好的代码助手能极大提高开发效率，敲几下键盘就能写出大段代码且不会出错，不让手速拖了脑速的后腿。

3. 条件编译的支持
多端开发中，条件编译至关重要，在组件、js、css、json中都大量用到条件编译。
条件编译其实本来是c语言里面的概念，在其他前端开发工具里，uni-app的条件编译无法高亮、无法提示，甚至可能报json语法错误。
在HBuilderX的工具里，一切自然使用，敲ifdef代码块，或者选中一段代码按ctrl+alt+/，都能方便输入条件编译，还支持条件编译的语法提示、折叠、智能双击选中整段......
详见uni-app的条件编译

注意如果一定要用其他开发工具写uni-app，那么编辑pages.json和manifest.json时请使用jsonc编辑器打开，使用json编辑器会报错。
json的条件编译，如不同平台的key名称相同，cli项目下开发者自己安装的校验器会报错，需自行关闭这些校验器对json相同key的校验规则。如果使用HBuilderX的校验器，无需在意此问题，HBuilderX的语法校验器为此优化过。

4. rpx的支持
rpx是全端通用的动态宽度。但这个中国人发明的宽度单位，在老外的编辑器里都无法正常。
其他编辑器无法高亮rpx的单位着色。
如果你的设计稿宽度不是750px，HBuilderX还提供px转rpx的单位换算神器，详见：https://ask.dcloud.net.cn/article/35445

5. 新建页面优化
在HBuilderX里新建页面，可以选择是否在pages.json里注册，选择注册的分包，自动创建页面目录和目录下的vue文件。而其他工具则需要大量手工操作。

6. manifest可视化配置
编辑json配置很容易出错且不友好，可视化的配置轻松而不会出错。

7. 免命令行开发
有人觉得在cli下敲命令很酷，也有很多人不习惯cli。但从客观效率来看，cli确实没有可视化界面搭配快捷键更高效、易掌握。
比如vue官方cli也做了可视化界面，不然复杂操作会很难用。
HBuilderX里开发uni-app可以免命令行，ctrl+n新建项目、ctrl+r运行项目、ctrl+u发布项目...虽然底层仍调用了命令行，但便利性更高，比敲终端命令更快。

8. 转到定义
其他工具只能简单跳转js变量的定义，HBuilderX的转到定义(alt+鼠标单击，或F12)可以精准跳转到每个环节，css的定义、组件中对变量引用的定义、还能在文件和pages.json之间方便切换。

9. 插件市场便捷导入
uni-app插件市场有数千款丰富插件，如果使用HBuilderX，则可以快捷的导入到项目下。如下图：

如果不用HBuilderX，只能下载zip包自行解压使用。当然如果插件作者提供了npm使用方式，那么用终端安装也可以。

10. easycom组件支持
传统vue组件需要先import引用、然后在components下注册才能使用。
uni-app支持easycom，只要工程下有这个组件文件，就可以随时在任何页面里直接用，不用引用也不用注册。打包时还会自动过滤未使用的组件。
HBuilderX完好的支持了easycom，可以对组件进行良好提示、转到定义、及查看vuedoc里的帮助。
在HBuilderX新建项目时选择uni ui模板的话，在任意页面里敲u，会拉出大量组件，比如ulist，回车就可生成一个列表组件。开发效率提升数倍。
easycom详见：https://uniapp.dcloud.io/collocation/pages?id=easycom

11. 使用uniCloud只能用HBuilderX
uniCloud是DCloud提供的serverless云开发服务，用js完成服务器开发，内置云端资源管理。它对安全性要求极高，只能在HBuilderX的使用。

除了uni-app优化，HBuilderX本身也有非常多优点，比如：

• 代码块：HBuilderX预置了大量uni-app的代码，敲个u，会列出大量代码块，可方便的完成开发。
• 中文输入法免干扰：国人经常会把半角符号敲成全角符号导致报错。HBuilderX会自动识别，在你敲下全角符号时，识别当前位置语法区，根据情况自动把全角转半角。
• json提示优化：vue的js开发，小程序的api方法参数，几乎都是json，多个逗号少个逗号经常出错。HBuilderX可以在回车时自动补齐上一行漏敲的逗号，也会在保存时自动清除末尾多余的逗号。开发json更轻松。
• F1直接查语法文档：按下F1，光标所处位置的语法会被自动识别，然后自动在右侧打开该api对应的语法帮助，包括vue的语法和uni-app的api，非常方便。
• 重构或选择相同语法词，详见https://ask.dcloud.net.cn/article/35732

更多高效极客操作见：https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/13191

当然HBuilderX相对其他工具也有它的缺点：

1. 对react、angular框架的支持不如其他工具，因为HBuilderX的重心在于把vue开发体验做到极致。
2. 插件总数没有vscode多。但在vue、uni-app相关领域，不会因为缺少什么插件而影响开发效率。HBuilderX也提供了插件API，基本兼容vscode插件API。HBuilderX还有用户开放平台，这是vscode也没有的功能，非常有利于为开发者服务的公司使用。插件API详见：https://hx.dcloud.net.cn/，开放平台详见：http://open.dcloud.net.cn/

综合来看，HBuilderX优势多于劣势，是更值得陪伴你的优秀开发工具。
而且HBuilder系列有900多万开发者，月活百万级，一直是国人骄傲。
让中国人的开发工具，拥有更多用户，支持它做的比国外工具更好，甚至反向对外输出，这对发展中国人的技术，预防无可避免的中美争端影响，有更大的帮助。

vscode用户常见不适应的地方

1. 快捷键其实可以选择vscode方案，主题也有雅蓝、酷黑等暗系风格。
2. HBuilderX默认是多项目，vscode默认是单项目。但HBuilderX其实也支持单窗体单项目，对项目点右键选在新窗体打开，详见：https://hx.dcloud.net.cn/Tutorial/UserGuide/multi-window

后记：
很多开发者仍然提希望uni-app为vscode做插件，其实DCloud已经做了https://ask.dcloud.net.cn/article/36286，在vscode里开发uni-app，体验绝对超过在vscode里开发其他小程序或跨端框架。只不过，还是没有HBuilderX用的那么顺。

对HBuilderX有任何需求，欢迎到需求墙投票：http://dev.dcloud.net.cn/wish/

基于MUI开发了一个APP。
效果如下：

详细介绍及源码地址https://www.jianshu.com/p/89fae6aa143f

uniapp第四个作品分享展示
仅供学习，如果你喜欢也可以继续留着，
后期可能新增雷达功能，扫描大家分享的电影......
咳咳，下面是下载地址和图片展示
下载地址 https://www.lanzous.com/i2s91za
也可以进群交流 757988036

uni-app 使用 upx 作为默认尺寸单位， upx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。
但如果设计稿不是750px，那换算单位可头疼了。
莫急，能让计算机算的，不会让人算。

1. 在HBuilderX 【设置】【编辑器设置】中进行配置
   
   
2. 启用px转upx后，就可以愉快的在uniapp中使用了。如下图：
   
   

关于upx尺寸单位，更多见：upx尺寸单位

当然，在普通web开发中，也是支持px转rem的。

简单的MUI框架手机app城市首字母分类跳转实例，含当前定位、最近访问城市、热门城市、全部城市选择等功能。

实例下载：
https://www.sucaihuo.com/templates/3804.html
签个到就够积分下载了

iconfont文件里面包含 iconfont.ttf、iconfont.css， 将 iconfont.ttf文件转位 base64。
推荐转换工具地址：https://www.giftofspeed.com/base64-encoder/

然后打开 iconfont.css文件，修改 @font-face 部分，将转换好的 base64代码粘贴到对应位置，并且设置 代码如下：

@font-face {  
  font-family: "iconfont";  
  src: url(data:font/truetype;charset=utf-8;base64,转换的base64内容) format('truetype');  
}  
.iconfont {  
  display: inline-block;  
}

最后则再项目中App.vue中引入iconfont.css文件

<style>  
@import "./font/iconfont.css";  
</style>

在任意组件中使用方法：

<view class="iconfont icon-XXX"></view>

经测试在H5及小程序中可以正常使用

备注：
iconfont文件是使用的阿里图标库： https://www.iconfont.cn

1. 创建模板文件index.html，在模版内引用video.js

<!DOCTYPE html>  
<html lang="zh-CN">  
    <head>  
        <meta charset="utf-8">  
        <meta http-equiv="X-UA-Compatible" content="IE=edge">  
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
        <title>  
            <%= htmlWebpackPlugin.options.title %>  
        </title>  
        <script>  
            document.addEventListener('DOMContentLoaded', function() {  
                document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'  
            })  
        </script>  
        <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.baseUrl %>static/index.css" />  
        <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">  
        <script src="https://unpkg.com/video.js/dist/video.min.js"></script>  
    </head>  
    <body>  
        <noscript>  
            <strong>Please enable JavaScript to continue.</strong>  
        </noscript>  
        <div id="app"></div>  
        <!-- built files will be auto injected -->  
    </body>  
</html>

1. 在manifest.json内配置index.html路径
2. 在vue文件内使用video.js初始化播放器

<template>  
    <view class="content">  
        <view class="video-js" ref="video">  

        </view>  
    </view>  
</template>  

<script>  
    export default {  
        onReady() {  
            // #ifdef H5  
            var video = document.createElement('video')  
            video.id = 'video'  
            video.style = 'width: 300px;height: 150px;'  
            video.controls = true  
            var source = document.createElement('source')  
            source.src = 'http://yf.ugc.v.cztv.com/cztv/ugcvod/2018/04/14/A98CD7B26B06D94A5CEA56AA7D723572/h264_800k_mp4.mp4_playlist.m3u8'  
            video.appendChild(source)  
            this.$refs.video.$el.appendChild(video)  
            videojs('video')  
            // #endif  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  

</style>

注意事项

1. 示例工程见附件
2. 如果视频源格式为m3u8，m3u8文件可能遇到跨域问题，请自行百度

uni-app 将已经将可以跨平台兼容处理的组件及 API 等进行了封装，但是部分平台的特性无法跨平台。
由此，uni-app 提供了条件编译的方案，来处理不同平台的特定或差异。

语法

• ifdef：if defined 正向条件，也就是说在 XX 平台下生效。

• ifndef：if not defined 反向条件，在 XX 平台不生效。即除了 XX 平台，其它平台都生效。

• endif：条件结束

• %PLATFORM%：平台名称

%PLATFORM% 可取值

• APP-PLUS
• APP-PLUS-NVUE
• H5
• MP-WEIXIN
• MP-ALIPAY
• MP-BAIDU
• MP

示例

以下这段代码，只会在 5+App 环境下生效/存在。

// #ifdef APP-PLUS  
const uuid = plus.device.uuid;  
// #endif

除了支持单个平台的条件编译外，还支持使用 || 来满足多平台条件编译。

这个组件会在微信小程序及百度小程序环境下生效：

<!-- #ifdef MP-WEIXIN || MP-BAIDU -->  
<button @getuserinfo="getUserInfo">获取用户信息</button>  
<!-- #endif -->

不同文件或语言中，注释的方式有所不同。在实际使用中一定要注意，不要随意复制导致语法错误。

组件

组件的注释，就是 HTML 标签的注释语法。

<!-- #ifdef MP-WEIXIN -->  
<ad unit-id="123456789"></ad>  
<!-- #endif -->

CSS

在 CSS 中使用条件编译，往往是因为某些平台的内置组件的样式，会影响到一血界面的渲染。

/* #ifdef MP-ALIPAY*/  
input {  
    padding: 0;  
}  
/* #endif */

还有一种场景就是不同平台下，页面的样式的确会有设计上的差异。
这种情况，可以使用 CSS 的条件编译来处理，也可以配合组件的条件编译来处理。

.app-text {  
    color: #007AFF;  
}  
.weixin-text {  
    color: #FF3333;  
}

<!-- #ifdef APP-PLUS -->  
<text class="app-text">text</text>  
<!-- #endif -->  
<!-- #ifdef MP-WEIXIN -->  
<text class="weixin-text">text</text>  
<!-- #endif -->

这样的话，在 5+App 上这个文字的颜色是蓝色，在微信小程序上就是红色。

这个方案还可以进一步调整，就是在计算属性中使用条件编译，动态绑定组件的 class。

JavaScript

平台特有的 API 或功能，需要使用条件编译来处理。

// #ifdef APP-PLUS  
plus.speech.startRecognize(options, function (result) {  
    console.log('语音识别成功');  
}, function (error) {  
    console.log('语音识别失败');  
});  
// #endif

pages.json

除了在页面内容的代码中支持条件编译外，uni-app 还支持在 pages.json 中通过条件编译来组织多平台的页面。
这样做可以大幅减少生成的代码体积，尤其是在小程序平台。

当然，普通的 json 文件中是不支持注释的。pages.json 中条件编译的校验以及代码提示等，是由 HBuilderX 来支持完成的。

{  
    "globalStyle": {  
        "navigationBarBackgroundColor": "#FF3333"  
    },  
    "pages": [{  
            "path": "pages/index/index"  
        }  
        // #ifdef APP-PLUS  
        , {  
            "path": "pages/speech/speech"  
        }  
        // #endif  
    ]  
}

在 pages.json 中使用条件编译，需要注意以下几个点：

• 如果页面是 pages 的最终一项，那么分隔符逗号需要在花括号前。上面例子，就是这种场景。
• globalStyle 的条件编译，推荐使用平台节点来处理。

{  
    "globalStyle": {  
        "navigationBarBackgroundColor": "#FF3333",  
        "mp-weixin": {  
            "backgroundColor": "#FFFFFF"  
        },  
        "mp-alipay": {  
            "titleBarColor": "#FFFFFF"  
        }  
    },  
    "pages": [{  
            "path": "pages/index/index"  
        }  
    ]  
}

平台节点下面的配置，建议参考特定平台的配置说明，直接使用平台的特有属性。

static

为了进一步减少应用的包体积，用于存放静态资源的 static 目录同样支持了条件编译。

支持的目录名

• app-plus
• h5
• mp-weixin
• mp-alipay
• mp-baidu

具体的使用，可以参考下 hello-uniapp 中在 static/app-plus 下存放 location@3x.png。
hello-uniapp 中这样处理，解决了两个问题：

• iOS 平台地图的覆盖物，使用高清图时，文件名称需要以 @2x/@3x 结尾。
• 支付宝小程序，项目中不能出现 @ 等特殊符号命名的文件。

结束

uni-app 中的条件编译，就分享到这里。大家在使用的过程中，如果有问题或者更好的想法，欢迎在下方进行讨论。

1，手机桌面(暂只支持Android)
2，微信搜索
3，线下扫码
4，微信菜单“发现”——“小程序”
5，小程序识别码
6，好友分享小程序
7，公众号关联推送
8，附近的小程序
9，小程序列表(历史记录)
10，公众号菜单直达
11，聊天窗口
12，群资料页-群小程序
13，微信支付入口
14，微信支付结果页
15，公众号底部菜单
16，小程序跳转
17，通过APP打开小程序
18，公众号详情页
19，卡券页面
20，朋友圈
21，通讯录
22，微信群的分享
23，通过图片打开链接小程序
24，通过文字链接打开小程序
25，小程序与新媒体
26，小程序与广告推广
27，关键词搜索
28，“搜一搜”里面
29，小程序置顶
30，星标小程序
31，门店小程序跳转服务小程序
32，小程序与立减金
33，聊天小程序
34，公众号广告
35，LBS推广
36，qq浏览器
37，朋友圈广告
38，微信搜索出现小程序入口
39，第三方应用小程序
40，腾讯系pc入口

烦啊，为了能在nvue中使用sass，我将hx安装包研究了个透，怎么做都不行，尽管找到了nvue的webpack，添加了sassloader一样不行。
后来没想到这么简单............

----右键项目根目录
----打开命令行
----npm init -y （初始化项目）
----npm install sass-loader -D （安装sass）

这样nvue中style标签就可以lang=scss啦
虽然还是不能嵌套书写，但是能继承已经很好了，配合上uni.scss（nvue需要手动@import），最大程度的可以跟vue文件公用样式

less stylus 应该无差异

录音时报这个错误，
No implementation found for void io.dcloud.feature.audio.mp3.SimpleLame.init(int, int, int, int, int)
把下面的文件添加上就好了