
解决了ios云打包位置描述的问题
在manifest.json 文件夹下边
plus->apple,添加
,
"plistcmds":[
"Set :NSContactsUsageDescription 说明读取用户通讯录的原因",
"Set :NSMicrophoneUsageDescription 说明使用麦克风的原因",
"Set :NSPhotoLibraryUsageDescription 上传图片需要访问相册权限",
"Set :NSCameraUsageDescription 上传图片需要访问相机权限",
"Set :NSPhotoLibraryAddUsageDescription 保存图片需要访问相册权限",
"Set :NSLocationWhenInUseDescription 这儿是xcode9之前使用的,估计云打包的时候就是使用的xcode9之前的版本",
"Set :NSLocationWhenInUseUsageDescription xcode9之后",
"Set :NSLocationAlwaysUsageDescription xcode9之后",
"Set :NSLocationAlwaysAndWhenInUseUsageDescription xcode9之后"
]
亲测可用
在manifest.json 文件夹下边
plus->apple,添加
,
"plistcmds":[
"Set :NSContactsUsageDescription 说明读取用户通讯录的原因",
"Set :NSMicrophoneUsageDescription 说明使用麦克风的原因",
"Set :NSPhotoLibraryUsageDescription 上传图片需要访问相册权限",
"Set :NSCameraUsageDescription 上传图片需要访问相机权限",
"Set :NSPhotoLibraryAddUsageDescription 保存图片需要访问相册权限",
"Set :NSLocationWhenInUseDescription 这儿是xcode9之前使用的,估计云打包的时候就是使用的xcode9之前的版本",
"Set :NSLocationWhenInUseUsageDescription xcode9之后",
"Set :NSLocationAlwaysUsageDescription xcode9之后",
"Set :NSLocationAlwaysAndWhenInUseUsageDescription xcode9之后"
]
亲测可用

WebSocket跨域问题解决
uniapp websocket体验demo:https://ext.dcloud.net.cn/plugin?id=1334
WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信,同时允许跨域通讯,是server push技术的一种很好的实现。我们使用Socket.io,它很好地封装了webSocket接口,提供了更简单、灵活的接口,也对不支持webSocket的浏览器提供了向下兼容。
项目中遇到javascript跨域问题,父页面和子页面要通信,并且父子页面跨域,怎么办?
项目中要保证父子页面通信是点对点,需要在服务端建立对父子页面WebSocket的对应关系,即父页面发的消息只被子页面收到,子页面的消息也只被父页面收到我们做了以下工作,严格保证了
WebSocket通信是点对点:
一是建立WebSocket链接的URL加上时间戳保证通信会话是唯一的;
二是在服务端保证父子页面WebSocket一一对应关系。父子页面的WebSocket在Open时都会向服务端发出消息进行注册,建立Senssion之间的对应关系。然后父子页面就可通过双方约束的通信协议进行通信了。
这里我们写个demo:
var p = document.getElementsByTagName(‘p’)[0];
var io = io.connect(‘http://127.0.0.1:3001’);
io.on(‘data’,function(data){
alert(‘2S后改变数据’);
p.innerHTML = data
});
服务器端
var io = require(‘socket.io’)(server);
io.on(‘connection’,function(client){
client.emit(‘data’,’hello WebSocket from 3001.’);
});
今天就说到这里,希望对大家有所帮助,同时大家如果不想太花时间去做WebSocket这块,可以尝试使用三方WebSocket,类似GoEasy 极光之类的。
这里推荐GoEasy,简单易用 www.goeasy.io 还是免费的,可以尝试一下。
uniapp websocket体验demo:https://ext.dcloud.net.cn/plugin?id=1334
WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信,同时允许跨域通讯,是server push技术的一种很好的实现。我们使用Socket.io,它很好地封装了webSocket接口,提供了更简单、灵活的接口,也对不支持webSocket的浏览器提供了向下兼容。
项目中遇到javascript跨域问题,父页面和子页面要通信,并且父子页面跨域,怎么办?
项目中要保证父子页面通信是点对点,需要在服务端建立对父子页面WebSocket的对应关系,即父页面发的消息只被子页面收到,子页面的消息也只被父页面收到我们做了以下工作,严格保证了
WebSocket通信是点对点:
一是建立WebSocket链接的URL加上时间戳保证通信会话是唯一的;
二是在服务端保证父子页面WebSocket一一对应关系。父子页面的WebSocket在Open时都会向服务端发出消息进行注册,建立Senssion之间的对应关系。然后父子页面就可通过双方约束的通信协议进行通信了。
这里我们写个demo:
var p = document.getElementsByTagName(‘p’)[0];
var io = io.connect(‘http://127.0.0.1:3001’);
io.on(‘data’,function(data){
alert(‘2S后改变数据’);
p.innerHTML = data
});
服务器端
var io = require(‘socket.io’)(server);
io.on(‘connection’,function(client){
client.emit(‘data’,’hello WebSocket from 3001.’);
});
今天就说到这里,希望对大家有所帮助,同时大家如果不想太花时间去做WebSocket这块,可以尝试使用三方WebSocket,类似GoEasy 极光之类的。
这里推荐GoEasy,简单易用 www.goeasy.io 还是免费的,可以尝试一下。

周报(20180727):uni-app 它来了
热门话题
uni-app 它来了,详见uni-app开始公测!基于vue,一套代码,运行到iOS、Android、微信小程序。
欢迎大家积极参与公测,反馈问题及建议。
问题清单
- 二维码云打包后闪退:云打包的权限问题,按照文中的说明,勾选权限后再打包即可。
- 二维码扫描位置偏移:初始化时机的问题,需要稍微加一点延时。
- mui init初始化预加载preloadPages无效:在一个通过 preload 预加载的页面中,继续使用 preloadPages 进行预加载是不可行的。
- 在实现微信分享功能时出现华为手机安装解析错误问题:包名需要全部小写,部分 SDK 对于包名的校验会更加严格。
- 官方演示feedback.html能改进成多图选择吗?:简单调整下逻辑即可,详见问题最佳回复。
- push本地消息需要配置push模块吗:需要配置模块,SDK 配置信息随便填写一下就行。
- 全面屏手机 splash 被拉伸 该如何适配?:可以使用.9格式的图片来避免拉伸问题,网上找个相应的工具生成。
- 使用云端打包Android应用安装到手机后,mui.toast("xxx")会带应用名称:这个和 ROM 有关,可以用 richtext 方案处理。
- Hbuilder生成app IOS苹果回到桌面时app图标缩小过程有黑色阴影:logo 图不要用圆角。
- 这样把私钥也填写再app中,安全吗:针对此类问题,如果大家有更好的方案和想法,欢迎提出来。
iOS 近期问题
- iOS云打包修改权限提示语:部分权限需要添加提示语,如果按照文档说明填写,云打包后依旧没有生效,请单独发帖详细说明并提供应用的 appid 即 manifest.json->id。这个 appid 是 DCloud 云服务的,而非 AppStore 中 App 的 Appid。
- iOS被拒,消息推送:详见问题中的回复。
云服务
- 云端打包校验应用属主权限:为规范应用管理,云端打包会检验 appid 属主及协作者权限,详见文章。
广告联盟
许多小伙伴一遇到广告,就会认为是 DCloud 广告联盟的,这个锅真的背不了。如果你的应用中出现了非预期的广告,请先仔细阅读《广告误开原因汇总及解决办法》中的说明,确认下广告的来源然后再查找相应的对策。如果不能确认广告的来源,请单独发帖提供截图(这个必须得有)以及 manifest.json->id 等信息,方便协助处理。
- 广告开通状态显示是关闭状态,为什么在打包的时候还是显示开通了广告:之前勾选过就会提示,实际状态以 DCloud 开发者中心应用信息中显示的状态为准。
- 广告收入是不是太少了?:要更多的 App 加入进来,量上去了自然就可能和广告主谈更好的价格。
- 云打包时勾选广告,只有账号通过实名认证且财务信息审核通过,才会显示广告。因此打包时勾选了的不要太过惊慌,还可以登录 DCloud 开发者中心确认一下。
广告不是洪水猛兽,合理地运用是为了带来更好的推广效果及收益。DCloud 不会做恶意捆绑等行为,希望各位小伙伴在这个问题上不要太敏感,有疑惑的地方请发帖咨询。
商务合作,请发送邮件到 marketing@dcloud.io 沟通。
关于社区
使用 DCloud 产品过程中,遇到问题或有不满意的地方,可以在社区发帖交流。提问时,请先阅读《如何正确高效地在社区提问》,按照文章中的说明描述清楚问题,提供必要的信息以及测试 demo。希望大家能够认真对待,尽量不要发“一句话”问题,那样的话别人很难帮助到你。
良好的社区氛围,需要大家共同参与进来。如果你对于社区的建设有自己的想法或建议,欢迎留言或单独发帖陈述。
最后
本周的报告就是这些,希望能对大家有所帮助。同时,也希望更多的小伙伴在社区分享自己的经验心得,交流学习。
祝大家周末愉快。
热门话题
uni-app 它来了,详见uni-app开始公测!基于vue,一套代码,运行到iOS、Android、微信小程序。
欢迎大家积极参与公测,反馈问题及建议。
问题清单
- 二维码云打包后闪退:云打包的权限问题,按照文中的说明,勾选权限后再打包即可。
- 二维码扫描位置偏移:初始化时机的问题,需要稍微加一点延时。
- mui init初始化预加载preloadPages无效:在一个通过 preload 预加载的页面中,继续使用 preloadPages 进行预加载是不可行的。
- 在实现微信分享功能时出现华为手机安装解析错误问题:包名需要全部小写,部分 SDK 对于包名的校验会更加严格。
- 官方演示feedback.html能改进成多图选择吗?:简单调整下逻辑即可,详见问题最佳回复。
- push本地消息需要配置push模块吗:需要配置模块,SDK 配置信息随便填写一下就行。
- 全面屏手机 splash 被拉伸 该如何适配?:可以使用.9格式的图片来避免拉伸问题,网上找个相应的工具生成。
- 使用云端打包Android应用安装到手机后,mui.toast("xxx")会带应用名称:这个和 ROM 有关,可以用 richtext 方案处理。
- Hbuilder生成app IOS苹果回到桌面时app图标缩小过程有黑色阴影:logo 图不要用圆角。
- 这样把私钥也填写再app中,安全吗:针对此类问题,如果大家有更好的方案和想法,欢迎提出来。
iOS 近期问题
- iOS云打包修改权限提示语:部分权限需要添加提示语,如果按照文档说明填写,云打包后依旧没有生效,请单独发帖详细说明并提供应用的 appid 即 manifest.json->id。这个 appid 是 DCloud 云服务的,而非 AppStore 中 App 的 Appid。
- iOS被拒,消息推送:详见问题中的回复。
云服务
- 云端打包校验应用属主权限:为规范应用管理,云端打包会检验 appid 属主及协作者权限,详见文章。
广告联盟
许多小伙伴一遇到广告,就会认为是 DCloud 广告联盟的,这个锅真的背不了。如果你的应用中出现了非预期的广告,请先仔细阅读《广告误开原因汇总及解决办法》中的说明,确认下广告的来源然后再查找相应的对策。如果不能确认广告的来源,请单独发帖提供截图(这个必须得有)以及 manifest.json->id 等信息,方便协助处理。
- 广告开通状态显示是关闭状态,为什么在打包的时候还是显示开通了广告:之前勾选过就会提示,实际状态以 DCloud 开发者中心应用信息中显示的状态为准。
- 广告收入是不是太少了?:要更多的 App 加入进来,量上去了自然就可能和广告主谈更好的价格。
- 云打包时勾选广告,只有账号通过实名认证且财务信息审核通过,才会显示广告。因此打包时勾选了的不要太过惊慌,还可以登录 DCloud 开发者中心确认一下。
广告不是洪水猛兽,合理地运用是为了带来更好的推广效果及收益。DCloud 不会做恶意捆绑等行为,希望各位小伙伴在这个问题上不要太敏感,有疑惑的地方请发帖咨询。
商务合作,请发送邮件到 marketing@dcloud.io 沟通。
关于社区
使用 DCloud 产品过程中,遇到问题或有不满意的地方,可以在社区发帖交流。提问时,请先阅读《如何正确高效地在社区提问》,按照文章中的说明描述清楚问题,提供必要的信息以及测试 demo。希望大家能够认真对待,尽量不要发“一句话”问题,那样的话别人很难帮助到你。
良好的社区氛围,需要大家共同参与进来。如果你对于社区的建设有自己的想法或建议,欢迎留言或单独发帖陈述。
最后
本周的报告就是这些,希望能对大家有所帮助。同时,也希望更多的小伙伴在社区分享自己的经验心得,交流学习。
祝大家周末愉快。

HBuilderX对json的优化有多强
> 本帖文档已集成到: hx产品文档
json是一种对计算机友好,对人不友好的文件格式。
以前都是服务器生成json,前端程序员很少手写json。
但现代前端开发里,json的应用范围越来越多,各种配置文件、js的export里,全是json,写起来让人倍感痛苦,遍地是坑。
比如半角符号错输成全角,比如少了逗号或结尾多了逗号,比如没有语法提示和代码块,比如键值对的选中和复制很低效...
HBuilderX提供了多项优化技巧,达到最好的json编辑体验。学会这些,效率翻倍!
中文符号免干扰输入
在HBuilderX里写json,不用管输入法状态,如果光标位置应该是半角符号,即使你按下全角符号也会自动变成半角。
当然在字符串里,按下全角符号不会被转换半角。
舒畅书写,不用分神,不用紧张。
其实中文符号免干扰输入是HBuilder多年来一直的亮点,不止是json,在html、js、css、vue里都支持中文符号免干扰输入。
我们深切体会中国程序员的痛苦,并动手做出改进。
回车时自动补行尾逗号
不用担心回车时什么时候该输入行尾逗号,什么时候不输入。
HBuilderX会自动识别是否需要逗号,并在回车时把缺失的逗号自动补齐。
保存时自动删除数组或键值对结尾的多余逗号
我们复制一段json时,经常把行尾的逗号也复制过来,但最后一行其实是不能用逗号的,还得记得手动删除。
HBuilderX在保存时会自动清理这些不合法的逗号,无需操心太多。
KeyValue代码块,像写excel那样写键值对
在js的json里敲kv,会出现KeyValue代码块,

回车后生成这样的键值对
此时敲完key的文字,然后按tab,就可以把光标自动转到value那里并选中value,然后继续敲value的内容即可。
不用再被敲冒号逗号打断,专注于写KeyValue内容,就像用excel。
注:此功能在纯json文件中不生效,仅在js中使用json时生效。
智能双击,快速选中数组或键值对
当我们想选中一段数组或键值对,不管是准备复制还是删除,过去都需要拖动。
而拖动选择其实是一个极其低效又损伤手的行为:按下食指鼠标或触摸板,不能松开继续拖动到结尾,这个过程缓慢且食指神经一直紧张。
HBuilderX提供了强大的智能双击来解决这个问题,具体在json中:
- 双击逗号左部,是选中逗号以前的键值对或数组
- 双击逗号右部,是选中逗号以后的键值对或数组
- 双击行尾,选中整行
- 双击括号内侧,选中括号内的内容
- 按下Alt同时双击括号内侧,选中括号内的内容(包含括号)
- 双击引号内侧,选中引号内的内容
- 按下Alt同时双击引号内侧,选中引号内的内容(包含引号)
了解更多智能双击,点HBuilderX的选择菜单。
所有双击都支持搭配Ctrl实现多选
HBuilderX完善的多光标支持让操作效率如虎添翼。快速重复插入
当你想重复插入一段键值对或数组时,最快捷的方式不是复制然后找新位置粘贴,而是使用快速重复插入功能。
windows上是Ctrl+Insert或Ctrl+Shift+r,mac上是Command+Shift+r。语法提示
很多js方法把多个参数合并为一个json对象,那么这些参数的语法提示怎么办?
HBuilderX也有完美的json参数语法提示支持。
如果参数里有回调函数,还可以在回车时自动生成匿名函数,如下:
多想业务,少为形式浪费时间,这是HBuilderX要帮助开发者做到的事。
另外某些特殊的配置文件,比如uni-app里的pages.json,也支持语法提示,以提升编程效率。
保存时自动校验语法
json和js的校验是HBuilderX内置的,都是在保存时会校验语法,每处错误会标记红色波浪线,按F4可跳转到下个错误。
掌握这些技巧,开启你的高效之旅!
> 本帖文档已集成到: hx产品文档
json是一种对计算机友好,对人不友好的文件格式。
以前都是服务器生成json,前端程序员很少手写json。
但现代前端开发里,json的应用范围越来越多,各种配置文件、js的export里,全是json,写起来让人倍感痛苦,遍地是坑。
比如半角符号错输成全角,比如少了逗号或结尾多了逗号,比如没有语法提示和代码块,比如键值对的选中和复制很低效...
HBuilderX提供了多项优化技巧,达到最好的json编辑体验。学会这些,效率翻倍!
中文符号免干扰输入
在HBuilderX里写json,不用管输入法状态,如果光标位置应该是半角符号,即使你按下全角符号也会自动变成半角。
当然在字符串里,按下全角符号不会被转换半角。
舒畅书写,不用分神,不用紧张。
其实中文符号免干扰输入是HBuilder多年来一直的亮点,不止是json,在html、js、css、vue里都支持中文符号免干扰输入。
我们深切体会中国程序员的痛苦,并动手做出改进。
回车时自动补行尾逗号
不用担心回车时什么时候该输入行尾逗号,什么时候不输入。
HBuilderX会自动识别是否需要逗号,并在回车时把缺失的逗号自动补齐。
保存时自动删除数组或键值对结尾的多余逗号
我们复制一段json时,经常把行尾的逗号也复制过来,但最后一行其实是不能用逗号的,还得记得手动删除。
HBuilderX在保存时会自动清理这些不合法的逗号,无需操心太多。
KeyValue代码块,像写excel那样写键值对
在js的json里敲kv,会出现KeyValue代码块,
回车后生成这样的键值对
此时敲完key的文字,然后按tab,就可以把光标自动转到value那里并选中value,然后继续敲value的内容即可。
不用再被敲冒号逗号打断,专注于写KeyValue内容,就像用excel。
注:此功能在纯json文件中不生效,仅在js中使用json时生效。
智能双击,快速选中数组或键值对
当我们想选中一段数组或键值对,不管是准备复制还是删除,过去都需要拖动。
而拖动选择其实是一个极其低效又损伤手的行为:按下食指鼠标或触摸板,不能松开继续拖动到结尾,这个过程缓慢且食指神经一直紧张。
HBuilderX提供了强大的智能双击来解决这个问题,具体在json中:
- 双击逗号左部,是选中逗号以前的键值对或数组
- 双击逗号右部,是选中逗号以后的键值对或数组
- 双击行尾,选中整行
- 双击括号内侧,选中括号内的内容
- 按下Alt同时双击括号内侧,选中括号内的内容(包含括号)
- 双击引号内侧,选中引号内的内容
- 按下Alt同时双击引号内侧,选中引号内的内容(包含引号)
了解更多智能双击,点HBuilderX的选择菜单。
所有双击都支持搭配Ctrl实现多选
HBuilderX完善的多光标支持让操作效率如虎添翼。快速重复插入
当你想重复插入一段键值对或数组时,最快捷的方式不是复制然后找新位置粘贴,而是使用快速重复插入功能。
windows上是Ctrl+Insert或Ctrl+Shift+r,mac上是Command+Shift+r。语法提示
很多js方法把多个参数合并为一个json对象,那么这些参数的语法提示怎么办?
HBuilderX也有完美的json参数语法提示支持。
如果参数里有回调函数,还可以在回车时自动生成匿名函数,如下:
多想业务,少为形式浪费时间,这是HBuilderX要帮助开发者做到的事。
另外某些特殊的配置文件,比如uni-app里的pages.json,也支持语法提示,以提升编程效率。
保存时自动校验语法
json和js的校验是HBuilderX内置的,都是在保存时会校验语法,每处错误会标记红色波浪线,按F4可跳转到下个错误。
掌握这些技巧,开启你的高效之旅!
收起阅读 »
【分享】在 5+App 中监听“返回”按钮
5+App 中,以下情况均触发 backbutton 事件。
- Android 物理返回键
- 原生 titleNView 左上角的 backbutton
下面是一个监听 backbutton 的最简示例:
var plusReady = function (callback) {
if (window.plus) {
callback();
} else {
document.addEventListener('plusready', callback);
}
};
plusReady(function () {
var firstBack = 0;
var handleBack = function () {
var currentWebview = plus.webview.currentWebview();
var topWebview = plus.webview.getTopWebview();
var now = Date.now || function () {
return new Date().getTime();
};
currentWebview.canBack(function (evt) {
/**
* 有可后退的历史记录,则后退。
* 否则,关闭当前窗口。
* 如果当前窗口是入口页,那么执行退出的逻辑。
*/
if (currentWebview.id === plus.runtime.appid) {
if (!firstBack) {
firstBack = now();
plus.nativeUI.toast('再按一次退出应用');
setTimeout(function () {
firstBack = 0;
}, 2000);
} else if (now() - firstBack < 2000) {
plus.runtime.quit();
}
} else {
if (evt.canBack) {
history.back();
} else {
currentWebview.close('auto');
}
}
});
};
plus.key.addEventListener('backbutton', handleBack);
});
该示例适用于 C/S 结构的 5+App,并且每个窗口都加载这段 JS。
如果是 Vue.js 等构建的 SPA 页面,那么需要根据当前的路径信息,判定是后退还是退出,例如:
// 模式不同,需要取的值也不一样,这里仅做示例,非真实场景。
var path = location.path;
var hash = location.hash;
if (path === '/') {
// 入口页了,执行退出。
plus.runtime.quit();
} else {
// 根据实际需求选择相应的方法
router.go(-1);
history.back();
}
参考文档
5+App 中,以下情况均触发 backbutton 事件。
- Android 物理返回键
- 原生 titleNView 左上角的 backbutton
下面是一个监听 backbutton 的最简示例:
var plusReady = function (callback) {
if (window.plus) {
callback();
} else {
document.addEventListener('plusready', callback);
}
};
plusReady(function () {
var firstBack = 0;
var handleBack = function () {
var currentWebview = plus.webview.currentWebview();
var topWebview = plus.webview.getTopWebview();
var now = Date.now || function () {
return new Date().getTime();
};
currentWebview.canBack(function (evt) {
/**
* 有可后退的历史记录,则后退。
* 否则,关闭当前窗口。
* 如果当前窗口是入口页,那么执行退出的逻辑。
*/
if (currentWebview.id === plus.runtime.appid) {
if (!firstBack) {
firstBack = now();
plus.nativeUI.toast('再按一次退出应用');
setTimeout(function () {
firstBack = 0;
}, 2000);
} else if (now() - firstBack < 2000) {
plus.runtime.quit();
}
} else {
if (evt.canBack) {
history.back();
} else {
currentWebview.close('auto');
}
}
});
};
plus.key.addEventListener('backbutton', handleBack);
});
该示例适用于 C/S 结构的 5+App,并且每个窗口都加载这段 JS。
如果是 Vue.js 等构建的 SPA 页面,那么需要根据当前的路径信息,判定是后退还是退出,例如:
// 模式不同,需要取的值也不一样,这里仅做示例,非真实场景。
var path = location.path;
var hash = location.hash;
if (path === '/') {
// 入口页了,执行退出。
plus.runtime.quit();
} else {
// 根据实际需求选择相应的方法
router.go(-1);
history.back();
}
参考文档
收起阅读 »
微信小程序开发简单吗?有些问题需要知道
对于开发微信小程序来说,很多投资者关注的重点方面要么是价格,要么是质量,不过不管是哪一方面,其实都是和一家好的微信小程序开发公司分布开的,但是对于以后小程序能不能盈利,就需要投资者在开发的时候,避免出现一些问题才行,那么企业想要做微信小程序,需要注意哪些问题呢?下面就跟大家分析解答一下吧。
1、一些软件公司利用低价吸引客户,软件系统不稳定。随着市场上软件开发公司数量越来越多,竞争越来越激烈,于是不少软件公司就打起了价格战。有个别公司竟然打出极低价格包干的宣传口号,这种明显低于市场价的肯定是不可相信的。因为这样的软件开发公司做出来的小程序或软件系统要么是不能满足功能需求的,要么是不稳定的,也就是质量不过关。因为开发一套系统软件是一项复杂的工作,即便对于专业的软件开发公司来说,要花费的人力成本、时间成本等都是很明显的,如果软件报价过低,开发出来的小程序质量可想而知。如果做出来的小程序不能满足您的需求,那么再少的钱也是浪费。
2、搞清楚软件开发公司为您提供的是否是小程序模板。当前市场上有不少第三方平台,大力宣传说自己开发的小程序性价比非常高,号称只要使用这套模板,自己就能根据需求简单设置好自己的微信小程序,价格比市场上其他小程序类低得多。对于没有软件系统开发技术的企业来说很有吸引力,一方面价格不高可以接受,另一方面自己简单操作就能实现功能需求。这里启动科技提醒您的是,很多这样的软件公司,以小程序模板少收费或免费,而代管或维护费非常高,因此对企业来说,实际上是被软件公司间接控制,以后如要调整模板或修改部分功能等,需要支付更高的费用。
3、要警惕小程序开发的另一个陷阱,也就是高价开发却为开发公司作嫁衣。不少小程序开发公司,自己先组建了一个框架平台,然后找其他客户入驻自己的平台后台。这样的小程序,从表面上看不出来有什么异样,实际上是缺乏完整性的,其不能离开开发公司母体而单独开发,也就是说,企业高价开发的微信小程序,只是嫁接在别人的主程序上,所有权并不归自己。
当下,微信小程序开发如此火,要做好小程序开发必须要注意以上讲到的三点。近两年,移动应用开发广受欢迎,特别是微信小程序发展势头非常快,小程序开发需求量大幅增加。不少企业、政府单位等都着手微信小程序开发,也正是在这一形势下,找到一家专业有实力且可靠的软件开发公司是多么的重要。信息来源由微信小程序开发公司燚轩科技整理编辑,如需转载,请注明出处。
对于开发微信小程序来说,很多投资者关注的重点方面要么是价格,要么是质量,不过不管是哪一方面,其实都是和一家好的微信小程序开发公司分布开的,但是对于以后小程序能不能盈利,就需要投资者在开发的时候,避免出现一些问题才行,那么企业想要做微信小程序,需要注意哪些问题呢?下面就跟大家分析解答一下吧。
1、一些软件公司利用低价吸引客户,软件系统不稳定。随着市场上软件开发公司数量越来越多,竞争越来越激烈,于是不少软件公司就打起了价格战。有个别公司竟然打出极低价格包干的宣传口号,这种明显低于市场价的肯定是不可相信的。因为这样的软件开发公司做出来的小程序或软件系统要么是不能满足功能需求的,要么是不稳定的,也就是质量不过关。因为开发一套系统软件是一项复杂的工作,即便对于专业的软件开发公司来说,要花费的人力成本、时间成本等都是很明显的,如果软件报价过低,开发出来的小程序质量可想而知。如果做出来的小程序不能满足您的需求,那么再少的钱也是浪费。
2、搞清楚软件开发公司为您提供的是否是小程序模板。当前市场上有不少第三方平台,大力宣传说自己开发的小程序性价比非常高,号称只要使用这套模板,自己就能根据需求简单设置好自己的微信小程序,价格比市场上其他小程序类低得多。对于没有软件系统开发技术的企业来说很有吸引力,一方面价格不高可以接受,另一方面自己简单操作就能实现功能需求。这里启动科技提醒您的是,很多这样的软件公司,以小程序模板少收费或免费,而代管或维护费非常高,因此对企业来说,实际上是被软件公司间接控制,以后如要调整模板或修改部分功能等,需要支付更高的费用。
3、要警惕小程序开发的另一个陷阱,也就是高价开发却为开发公司作嫁衣。不少小程序开发公司,自己先组建了一个框架平台,然后找其他客户入驻自己的平台后台。这样的小程序,从表面上看不出来有什么异样,实际上是缺乏完整性的,其不能离开开发公司母体而单独开发,也就是说,企业高价开发的微信小程序,只是嫁接在别人的主程序上,所有权并不归自己。
当下,微信小程序开发如此火,要做好小程序开发必须要注意以上讲到的三点。近两年,移动应用开发广受欢迎,特别是微信小程序发展势头非常快,小程序开发需求量大幅增加。不少企业、政府单位等都着手微信小程序开发,也正是在这一形势下,找到一家专业有实力且可靠的软件开发公司是多么的重要。信息来源由微信小程序开发公司燚轩科技整理编辑,如需转载,请注明出处。
收起阅读 »
slide(轮播组件)销毁
slide组件文档中只提及了最基础的部分,实际开发时下拉刷新时需要更新slide,这时就需要销毁slide。
网上资料和文档中都没有提及,在mui源码中找到了destroy()函数。
具体调用方法:gallery.slider().destroy();
slide组件文档中只提及了最基础的部分,实际开发时下拉刷新时需要更新slide,这时就需要销毁slide。
网上资料和文档中都没有提及,在mui源码中找到了destroy()函数。
具体调用方法:gallery.slider().destroy();

解决 Hbuilder 使用高德地图 POI 搜索一直报错: Uncaught ReferenceError: AMapUI is not defined
前提:在使用Hbuilder+高德JS,开发APP的时候,希望在使用高德地图的POI检索地址,并在地图上定位,当中使用了高德地图的js文件,
参考高德官网提供 demo,发现js一直报错 【 AMapUI is not defined】,按照网上搜索的调整 AMapUI所使用的js文件位置,即时把所需的js文件放置在HTML的最后面,发现然并卵,并不能解决这个错误。
问题猜想:出现 【 AMapUI is not defined】,很大一部分原因是 AMapUI这个js对象没加载完成。
问题解决方案:
1)既然可能是js引用的问题导致出错,可以尝试加入 window.onload=function(){};方式试一试:
链接手机测试,发现还是一直报错:【 AMapUI is not defined】,很是奇怪,window.onload=function(){}并不能解决问题。
2)继续寻找解决放方法:采用 对象为 undefined判断,并采用懒加载的模式:
经过真机测试,ok,问题已完美解决,可以正常出发下拉搜索,加载了。
前提:在使用Hbuilder+高德JS,开发APP的时候,希望在使用高德地图的POI检索地址,并在地图上定位,当中使用了高德地图的js文件,
参考高德官网提供 demo,发现js一直报错 【 AMapUI is not defined】,按照网上搜索的调整 AMapUI所使用的js文件位置,即时把所需的js文件放置在HTML的最后面,发现然并卵,并不能解决这个错误。
问题猜想:出现 【 AMapUI is not defined】,很大一部分原因是 AMapUI这个js对象没加载完成。
问题解决方案:
1)既然可能是js引用的问题导致出错,可以尝试加入 window.onload=function(){};方式试一试:
链接手机测试,发现还是一直报错:【 AMapUI is not defined】,很是奇怪,window.onload=function(){}并不能解决问题。
2)继续寻找解决放方法:采用 对象为 undefined判断,并采用懒加载的模式:
经过真机测试,ok,问题已完美解决,可以正常出发下拉搜索,加载了。
收起阅读 »
WebSocket原理
uniapp websocket体验demo:https://ext.dcloud.net.cn/plugin?id=1334
今天来讲一下WebSocket的原理,能让你更深入的去了解WebSocket,深知其原理,才能更好的去使用它。
WebSocket是HTML5出的协议,也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连接,循环连接的不算)。
首先HTTP有 1.1 和 1.0 之说,也就是所谓的 keep-alive ,把多个HTTP请求合并为一个,但是 Websocket 其实是一个新协议,跟HTTP协议基本没有关系,只是为了兼容现有浏览器的握手规范而已,也就是说它是HTTP协议上的一种补充。有交集,但是并不是全部。
另外Html5是指的一系列新的API,或者说新规范,新技术。Http协议本身只有1.0和1.1,而且跟Html本身没有直接关系。通俗来说,你可以用HTTP协议传输非Html数据,就是这样。再简单来说,层级不一样。
WebSocket的协议是持久化的,而HTTP是非持久化的协议。
首先我们来看个典型的 Websocket 握手
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com
这段类似HTTP协议的握手请求中,多了几个东西。我会顺便讲解下作用。
Upgrade: websocket
Connection: Upgrade
这个就是Websocket的核心了,告诉 Apache 、 Nginx 等服务器:注意啦,我发起的是Websocket协议,快点帮我找到对应的助理处理。
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
首先, Sec-WebSocket-Key 是一个 Base64 encode 的值,这个是浏览器随机生成的,告诉服务器:验证是不是真的是Websocke t助理。
然后, Sec_WebSocket-Protocol 是一个用户定义的字符串,用来区分同URL下,不同的服务所需要的协议。
最后, Sec-WebSocket-Version 是告诉服务器所使用的 Websocket Draft (协议版本)。
然后服务器会返回下列东西,表示已经接受到请求, 成功建立Websocket啦!
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept:HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat
这里开始就是HTTP最后负责的区域了,告诉客户端已经成功切换协议
Upgrade: websocket
Connection: Upgrade
依然是固定的,告诉客户端即将升级的是 Websocket 协议,而不是mozillasocket,lurnarsocket或者shitsocket。
然后, Sec-WebSocket-Accept 这个则是经过服务器确认,并且加密过后的 Sec-WebSocket-Key 。 服务器:返回ID CARD来证明。
后面的, Sec-WebSocket-Protocol 则是表示最终使用的协议。
至此,HTTP已经完成它所有工作了,接下来就是完全按照Websocket协议进行了。具体的协议就不在这阐述了。
关注GoEasy WebSocket 简单开发不迷路。
uniapp websocket体验demo:https://ext.dcloud.net.cn/plugin?id=1334
今天来讲一下WebSocket的原理,能让你更深入的去了解WebSocket,深知其原理,才能更好的去使用它。
WebSocket是HTML5出的协议,也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连接,循环连接的不算)。
首先HTTP有 1.1 和 1.0 之说,也就是所谓的 keep-alive ,把多个HTTP请求合并为一个,但是 Websocket 其实是一个新协议,跟HTTP协议基本没有关系,只是为了兼容现有浏览器的握手规范而已,也就是说它是HTTP协议上的一种补充。有交集,但是并不是全部。
另外Html5是指的一系列新的API,或者说新规范,新技术。Http协议本身只有1.0和1.1,而且跟Html本身没有直接关系。通俗来说,你可以用HTTP协议传输非Html数据,就是这样。再简单来说,层级不一样。
WebSocket的协议是持久化的,而HTTP是非持久化的协议。
首先我们来看个典型的 Websocket 握手
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com
这段类似HTTP协议的握手请求中,多了几个东西。我会顺便讲解下作用。
Upgrade: websocket
Connection: Upgrade
这个就是Websocket的核心了,告诉 Apache 、 Nginx 等服务器:注意啦,我发起的是Websocket协议,快点帮我找到对应的助理处理。
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
首先, Sec-WebSocket-Key 是一个 Base64 encode 的值,这个是浏览器随机生成的,告诉服务器:验证是不是真的是Websocke t助理。
然后, Sec_WebSocket-Protocol 是一个用户定义的字符串,用来区分同URL下,不同的服务所需要的协议。
最后, Sec-WebSocket-Version 是告诉服务器所使用的 Websocket Draft (协议版本)。
然后服务器会返回下列东西,表示已经接受到请求, 成功建立Websocket啦!
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept:HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat
这里开始就是HTTP最后负责的区域了,告诉客户端已经成功切换协议
Upgrade: websocket
Connection: Upgrade
依然是固定的,告诉客户端即将升级的是 Websocket 协议,而不是mozillasocket,lurnarsocket或者shitsocket。
然后, Sec-WebSocket-Accept 这个则是经过服务器确认,并且加密过后的 Sec-WebSocket-Key 。 服务器:返回ID CARD来证明。
后面的, Sec-WebSocket-Protocol 则是表示最终使用的协议。
至此,HTTP已经完成它所有工作了,接下来就是完全按照Websocket协议进行了。具体的协议就不在这阐述了。
关注GoEasy WebSocket 简单开发不迷路。

关于如何在vue-cli中引入mui.js和相关扩展
一、静态资源引入
如果只用到mui.js可以通过静态资源引入的方式,直接在index.html中通过script标签引入。
二、通过webpack引入
我项目中需要用到picker扩展,所以需要用到picker.js和poppicker.js。如果用静态资源引入的方式在调用new mui.PopPicker()的时候会报mui.PopPicker is not a constructor
参照vue-cli引入jq的方式配置webpack
const webpack = require('webpack');
const path = require('path');
resolve: {
alias: {
'src': path.resolve(__dirname, '../src'),,
// 2. 定义别名和插件位置
'mui': path.resolve(__dirname, '../src/assets/mui/js/mui.js')
}
},
plugins: [
new webpack.ProvidePlugin({
mui: "mui",
"window.mui": "mui"
})
]
最新的vue-cli3.0配置vue.config.js
// vue.config.js
const webpack = require('webpack');
const path = require('path');
chainWebpack: (config) => {
config.resolve.alias
.set('@', path.resolve(__dirname, './src'))
.set('mui', path.resolve(__dirname, './src/assets/mui/js/mui.js'))
},
configureWebpack: {
// 增加一个plugins
plugins: [
new webpack.ProvidePlugin({
mui: "mui",
"window.mui": "mui"
})
]
},
然后在需要用到的组件中就可以按需引入了
test.vue
import mui from '@/assets/mui/js/mui.js';
require('@/assets/mui/js/mui.picker.js');
require('@/assets/mui/js/mui.poppicker.js');
也可以在main.js中全局引入mui然后扩展部分按需引入
main.js
import mui from '@/assets/mui/js/mui.js';
// 可以顺便绑定到Vue实例
Vue.prototype.$mui = mui;
test.vue
require('@/assets/mui/js/mui.picker.js');
require('@/assets/mui/js/mui.poppicker.js');
一、静态资源引入
如果只用到mui.js可以通过静态资源引入的方式,直接在index.html中通过script标签引入。
二、通过webpack引入
我项目中需要用到picker扩展,所以需要用到picker.js和poppicker.js。如果用静态资源引入的方式在调用new mui.PopPicker()的时候会报mui.PopPicker is not a constructor
参照vue-cli引入jq的方式配置webpack
const webpack = require('webpack');
const path = require('path');
resolve: {
alias: {
'src': path.resolve(__dirname, '../src'),,
// 2. 定义别名和插件位置
'mui': path.resolve(__dirname, '../src/assets/mui/js/mui.js')
}
},
plugins: [
new webpack.ProvidePlugin({
mui: "mui",
"window.mui": "mui"
})
]
最新的vue-cli3.0配置vue.config.js
// vue.config.js
const webpack = require('webpack');
const path = require('path');
chainWebpack: (config) => {
config.resolve.alias
.set('@', path.resolve(__dirname, './src'))
.set('mui', path.resolve(__dirname, './src/assets/mui/js/mui.js'))
},
configureWebpack: {
// 增加一个plugins
plugins: [
new webpack.ProvidePlugin({
mui: "mui",
"window.mui": "mui"
})
]
},
然后在需要用到的组件中就可以按需引入了
test.vue
import mui from '@/assets/mui/js/mui.js';
require('@/assets/mui/js/mui.picker.js');
require('@/assets/mui/js/mui.poppicker.js');
也可以在main.js中全局引入mui然后扩展部分按需引入
main.js
import mui from '@/assets/mui/js/mui.js';
// 可以顺便绑定到Vue实例
Vue.prototype.$mui = mui;
test.vue
require('@/assets/mui/js/mui.picker.js');
require('@/assets/mui/js/mui.poppicker.js');
收起阅读 »

如何有效解决微信支付时支付授权目录出错问题
在对接微信支付的时候,不管是公众号支付,还是扫码支付,都会遇到各种各样复杂的问题,这些问题说复杂,有时候也挺简单,只是让人不容易察觉,一个很简单的小问题有时候会遇到大麻烦。那么今天跟大家分享一下如何解决微信支付时支付授权目录出错问题,估计这也是许多开发者经常会遇到的一个问题,下面就为大家详细讲解一下。
代码如下:
public function wxpay(){
header("Content-type:text/html;charset=utf-8");
$order_sn=I("order_sn");
$fa_need=M('fa_need');
$list=$fa_need->where("order_sn=$order_sn")->find();
$type=$list['type'];
$price=$list['need_salary'];
ini_set('date.timezone','Asia/Shanghai');
$time = date('Y-m-d');
vendor("WxPayPubHelper.lib.WxPay#Api");
$uid=session("uid");
$user=M("user");
$userinfo=$user->where("uid=$uid")->find();
$openid=$userinfo['openid'];
$data=$type.';'.'1'.';'.$order_sn;
//②、统一下单
$input = new \WxPayUnifiedOrder();
// dump($input);die;
$input->SetBody('XXXX');
$input->SetAttach($data);
$input->SetOut_trade_no($order_sn); //商户号加上年月日十分秒 订单号
$input->SetTotal_fee($price);
// $input->SetTotal_fee(1);
$input->SetTime_start(date("YmdHis"));
$input->SetTime_expire(date("YmdHis", time() + 600));
$input->SetGoods_tag($data);
$input->SetNotify_url("网址链接");
$input->SetTrade_type("JSAPI");
$input->SetOpenid($openid);
$order = \WxPayApi::unifiedOrder($input);
$jsApiParameters = $this->GetJsApiParameters($order);
// var_dump($jsApiParameters);exit;
$this->assign('price',$price);
$this->assign('order_sn',$order_sn);
$this->assign('openid',$openid);
$this->assign('jsApiParameters',$jsApiParameters);
$this->display();
}
现在这个问题解决之后,大家在开发小程序接入微信支付就不用发愁了,如果还是存在未能得到有效解决方法的话,或者存在其他问题的话,大家可以留言讨论,我们共同学习进步。
本文由专业的微信小程序开发公司燚轩科技整理发布,原创不易,如需转载请注明出处!
在对接微信支付的时候,不管是公众号支付,还是扫码支付,都会遇到各种各样复杂的问题,这些问题说复杂,有时候也挺简单,只是让人不容易察觉,一个很简单的小问题有时候会遇到大麻烦。那么今天跟大家分享一下如何解决微信支付时支付授权目录出错问题,估计这也是许多开发者经常会遇到的一个问题,下面就为大家详细讲解一下。
代码如下:
public function wxpay(){
header("Content-type:text/html;charset=utf-8");
$order_sn=I("order_sn");
$fa_need=M('fa_need');
$list=$fa_need->where("order_sn=$order_sn")->find();
$type=$list['type'];
$price=$list['need_salary'];
ini_set('date.timezone','Asia/Shanghai');
$time = date('Y-m-d');
vendor("WxPayPubHelper.lib.WxPay#Api");
$uid=session("uid");
$user=M("user");
$userinfo=$user->where("uid=$uid")->find();
$openid=$userinfo['openid'];
$data=$type.';'.'1'.';'.$order_sn;
//②、统一下单
$input = new \WxPayUnifiedOrder();
// dump($input);die;
$input->SetBody('XXXX');
$input->SetAttach($data);
$input->SetOut_trade_no($order_sn); //商户号加上年月日十分秒 订单号
$input->SetTotal_fee($price);
// $input->SetTotal_fee(1);
$input->SetTime_start(date("YmdHis"));
$input->SetTime_expire(date("YmdHis", time() + 600));
$input->SetGoods_tag($data);
$input->SetNotify_url("网址链接");
$input->SetTrade_type("JSAPI");
$input->SetOpenid($openid);
$order = \WxPayApi::unifiedOrder($input);
$jsApiParameters = $this->GetJsApiParameters($order);
// var_dump($jsApiParameters);exit;
$this->assign('price',$price);
$this->assign('order_sn',$order_sn);
$this->assign('openid',$openid);
$this->assign('jsApiParameters',$jsApiParameters);
$this->display();
}
现在这个问题解决之后,大家在开发小程序接入微信支付就不用发愁了,如果还是存在未能得到有效解决方法的话,或者存在其他问题的话,大家可以留言讨论,我们共同学习进步。
本文由专业的微信小程序开发公司燚轩科技整理发布,原创不易,如需转载请注明出处!
收起阅读 »
HBuilderX和uni-app正式发布
更新:uni-app已开源,欢迎star鼓励https://github.com/dcloudio/uni-app
更新:uni-app最新官方培训视频,见腾讯课堂:https://ke.qq.com/course/343370
看完视频,你会对uni-app有更深入的认识。
HBuilderX正式发布
从年初发布新一代HBuilderX公测版起,经历了50个版本迭代,HBuilderX终于发布了正式版!
虽然HBuilderX并不是100%覆盖老HBuilder的功能,从整体来看,HBuilderX已经是比HBuilder更好的开发工具。
HX比HB有五大优势:更流畅、更高效、更现代、更漂亮、更稳定。
- 更流畅:由于基于C++架构而非eclipse或webkit架构,HX在启动速度、大文档打开速度方面远超HB,并在众多开发工具中傲视群雄。
- 更高效:HX在多光标、无拖动选择、markdown、json、vue开发优化上,有大量的独创新特色,这些优化过的工具使得工作效率提升数倍,同样领先于业内其他工具。
- 更现代:HX内置node,插件体系大量基于node插件,提供内置终端,对vue、预编译器、webpack、npm命令运行都有良好的支持,这些现代技术栈同样能对开发效率、工程化管理项目有更多帮助。
- 更漂亮:HX拥有更漂亮简洁的界面,黑色主题也是全屏沉浸的黑色。
- 更稳定:如果几个月前说HX更稳定肯定是笑话,但今非昔比。老HB经常会在eclipse、java层面爆出一些错误,我们无力解决。但HX上我们可以控制每个环节,不再出现莫名的java错误。同时HX提供了更完善的代码保护,崩溃、断电都能有效保护代码。
从HBuilderX1.2起,所有App开发者需要的功能在HBuilderX里均已补齐(有些操作方式可能有变化,但功能是一样的)。
HX对于偏老的技术栈如jquery的支持确实不如HB,对于后端语言的支持也不如HB。
对于这些环节开发者仍然可以使用HB。
但我们仍然可以认为,HX是更值得前端工程师拥有的利器。
同时HB将逐渐减少更新频率,明年会正式停止更新。
HBuilder系列诞生来,服务了260多万开发者,我们深感荣幸,并终于打破中国人做不好开发工具的魔咒。
未来我们还将继续努力,把HBuilderX打造的更优秀,让中国的前端工程师,开发效率高于全世界!
HBuilderX的下载链接http://www.dcloud.io/hbuilderx.html
uni-app迎来里程碑突破
uni-app,是终极的跨平台框架。因为
- 跨的平台更多(Android、iOS、小程序、H5)
- 性能体验更好(小程序技术框架和weex加持)
- 三方扩展生态更丰富
即支持小程序sdk又支持原生sdk,大部分sdk厂商都有小程序sdk,也就是大部分sdk都可以直接用于uni-app的扩展生态,而且是原SDK厂商来维护。这意味着uni-app拥有了所有跨平台方案中最丰富的三方生态。开发者不用找原生工程师去封装环信、网易云信等im的原生sdk了,直接用他们的小程序sdk即可。 - 开发方式更现代
vue数据绑定、npm、webpack、各种预处理器 - 公有技术,学习成本更低
掌握uni-app需要学习的是vue的语法,小程序的api,学会这些是理所应当,并不为uni-app额外增加学习成本。
没有其他跨平台方案在这5方面可以与uni-app相提并论!
任何Hybrid方案都不是万能的,选择一种,总是会受到一些限制。
uni-app也有限制,但综合看仍然是最好的跨平台开发方案。
- 对于开发者个人:不用学习众多轮子,学好一个,什么都会做
- 对于外包公司:开发一次,给客户交付iOS、Android、小程序、H5多个平台,赚的更多,客户满意度更高
- 对于自研开发商:做小程序去拉新,转到App里实现留存和高arpu运营,是最精益的创业之道。uni-app可以以最低成本实现日活和arpu值的最大化,并可以覆盖更多流量入口。
而且这些都是免费产品,就更没有不拥抱的理由了。
uni-app开发欢迎加入QQ群,交流学习,向我们反馈意见。由于qq群满的太快,本文不再直接列最新的qq群号,请去uni-app官网左下角查看。
uni-app的官网地址:http://uniapp.dcloud.io/
最后再说下DCloud的文档、技服体系的优化
过去DCloud一些文档做的不够好,已经吸取经验,uni-app的文档比较完善,搜索也更好用。
uni-app的qq群每日数万条消息记录,高度活跃。
DCloud投入专人支持uni-app的技服工作。
官方出品的免费视频教程上线已到腾讯课堂https://ke.qq.com/course/343370。
DCloud的插件市场也已上线。
做这些产品和服务不容易,也请多支持我们。
最大的支持,当然是转发本文给朋友喽。让小伙伴们赶紧用起来HBuilderX和uni-app这样的利器!
FAQ
-
Q:uni-app的手机端用户体验怎么样?
打包成App后的体验和微信小程序一样好,在某些场景下更好。
其体验优于使用HTML开发的5+app。虽然uni-app使用了vue文件,但vue文件编译到手机上都是js,并且框架层做了自动预载和更快的联网机制,实现了更高的性能体验,尤其是联网的新页面加载速度非常快。
uni-app还支持nvue,这其实是引入了weex并在js api层面上被uni统一了。nvue的渲染效率更高。
使用uni-app开发的app,可以发现加载新页面速度极快,动画还没结束时,需要联网下的资源就可以显示了。
使用uni-app开发的微信小程序,和直接开发微信小程序相比性能没有差别,因为uni-app输出到微信时也是编译为wxml格式。 -
Q:不同平台有自己的特色,uni-app如何在一套代码里兼容?大量写if else吗
常用api都被uni-app统一了,个性化特色有优雅的条件编译方案。详见
所有平台的所有能力,都可以在uni-app中使用,不受限制。 -
Q:既然uni-app的App端使用5+引擎,是不是5+的所有强大能力都可以调用?
是的,包括Native.js、原生sdk扩展都可以用。但注意uni-app的窗体管理是在pages.json里做,不能自己管理窗体,plus.webview的api只有一些webview样式修饰的api可以使用,新建、关闭窗体的api不能用。 -
Q:uni-app支持自己扩展原生功能和离线打包吗?
支持,同5+sdk。更提供插件云打包。 -
Q:不跨端,只做App或小程序,适合用uni-app吗?或者说uni-app开发和5+App/mui开发有什么区别
新项目强烈推荐使用uni-app。
uni-app相比5+App有如下优势:- 性能体验更好,微信小程序的Hybrid方案性能是经得起考验的,支撑起一线开发商用这个技术架构获取了数亿用户。而uni-app的性能比微信小程序整体更好。
- 可跨端发布。未来是多端时代,uni-app现在已经覆盖了Android、iOS、微信小程序、H5、百度小程序、支付宝小程序、今日头条小程序。学习和使用uni-app是面向未来的正确选择。
- 使用uni-app开发App,由于基于模板和数据绑定,开发代码量比纯5+或mui更小,有更快的开发效率。
- 多了weex、小程序生态丰富的sdk等重要部分。
- DCloud在全力打造uni-app,这很关键。老项目可以暂不迁移,新项目就不要选5+App了。
-
Q:uni-app支持的手机版本最低到多少?
Android4.4、iOS8是官方会保障兼容的。
更低版本其实也能用,但官方发布时不会测试更低版本。另外如果使用flex布局,更低版本不支持的,只能使用传统css布局。 -
Q:uni-app学习难度比mui怎么样?
vue的语法+小程序的api,都是必备的通用技术。
如果你不会vue的话,需要学习了解vue。如果你开发过小程序,那组件和api基本不用再学,否则需要学一遍。如果你会vue和小程序开发,那基本没有学习成本。
没学过vue的同学,也不用掌握vue的全部,只需了解vue基础语法、虚拟dom、数据绑定、组件、vuex,其中关键是理解虚拟dom和数据绑定的思路,不要再沿袭找一个dom元素的id然后js api操作它的思路。
其他如路由、loader 不用学,cli、node.js、webpack也不需要学。但编译报错时,经常是webpack报错,需要百度查webpack报错信息。 -
Q:uni-app怎么不支持HTML的dom操作?
uni-app的web-view组件支持load本地HTML页面,所以也是支持dom的。但vue页面里不支持dom。
如无必要,我们也不推荐使用HTML。
因为现实是整个前端技术发展在去dom化,微信小程序不支持dom,vue、react也是虚拟dom。
之所以会这样是因为2点:- 性能。虚拟dom的性能更高。
- 开发效率。基于数据绑定的开发,代码量会比操作dom少很多。
所以作为前端工程师,拥抱和学习新技术是必然趋势,个人习惯应该经常update,活到老学到老。
至于基于dom的三方库用不了的问题,一方面小程序生态已经起来了,周边的三方库非常多,这些都在uni-app里可直接使用,并且兼容到了app侧。另外确实有必须使用dom的三方库,那就用web-view组件load HTML吧。
-
Q:uni-app使用的flex布局很不习惯
flex布局是更先进、更通用的布局模式,比如垂直居中,以前写起来很麻烦。
flex布局还是web和原生通吃的通用布局,使用flex布局做的界面,可以在react native、weex、快应用等平台运行,传统web布局做不到。
当然如果你不想学flex,还希望使用传统布局,也可以,把app.vue里的全局flex设置去掉就行。
另注意nvue由于是基于weex的,只支持flex布局。 -
Q:HBuilder会支持uni-app吗?
uni-app只会在HBuilderX里支持。HBuilder不会新增功能了。并且今年底会停止更新。请开发者尽快完成向HBuilderX的升级。 -
Q:是不是DCloud以后的重点是uni-app,不再演进5+和mui了?
DCloud重点是uni-app,但uni-app编译到iOS、Android时仍使用了5+引擎,5+引擎仍会积极演进。
5+引擎近期提供了原生视频、直播、指纹、ibeacon,后续还会继续强化能力。其实5+引擎也已经内置了weex渲染器,只是传统5+app开发模式下无法编译weex代码,只有uni-app里内置的编译器才能正常使用。
mui作为一个开源ui库,手机上常见的ui控件均已支持,没有什么需要新增的ui控件,本身也许久未更新了。mui过去的一个较大问题是不支持组件化和数据绑定,这部分被挪入了uni-app中。 -
Q: mpvue项目或组件是否可快速迁移到uni-app下?
是的。详细指南参考http://ask.dcloud.net.cn/article/34945 -
Q:既然uni-app有了nvue,引入了weex,假使只做app不发小程序,是否可以不用vue,所有界面都使用nvue?
理论上所有界面都可以用nvue,但不建议这么用。
首先vue页面没那么糟。只有个别场景用nvue作为补充更合适。比如左右拖来拖去的长列表。
其次weex并没有那么完善,作为局面补充使用更合理,大面积使用时也会遇到很多weex的坑。
所以各取其优势,避其短处,结合使用是最优方案。 -
Q:uni-app的成熟度怎么样?
更新:已经十几万案例了。
最后,请认真通读一遍uni-app官网,以及善用uni-app官网的搜索,你的大部分问题都会在文档里。
更新:uni-app已开源,欢迎star鼓励https://github.com/dcloudio/uni-app
更新:uni-app最新官方培训视频,见腾讯课堂:https://ke.qq.com/course/343370
看完视频,你会对uni-app有更深入的认识。
HBuilderX正式发布
从年初发布新一代HBuilderX公测版起,经历了50个版本迭代,HBuilderX终于发布了正式版!
虽然HBuilderX并不是100%覆盖老HBuilder的功能,从整体来看,HBuilderX已经是比HBuilder更好的开发工具。
HX比HB有五大优势:更流畅、更高效、更现代、更漂亮、更稳定。
- 更流畅:由于基于C++架构而非eclipse或webkit架构,HX在启动速度、大文档打开速度方面远超HB,并在众多开发工具中傲视群雄。
- 更高效:HX在多光标、无拖动选择、markdown、json、vue开发优化上,有大量的独创新特色,这些优化过的工具使得工作效率提升数倍,同样领先于业内其他工具。
- 更现代:HX内置node,插件体系大量基于node插件,提供内置终端,对vue、预编译器、webpack、npm命令运行都有良好的支持,这些现代技术栈同样能对开发效率、工程化管理项目有更多帮助。
- 更漂亮:HX拥有更漂亮简洁的界面,黑色主题也是全屏沉浸的黑色。
- 更稳定:如果几个月前说HX更稳定肯定是笑话,但今非昔比。老HB经常会在eclipse、java层面爆出一些错误,我们无力解决。但HX上我们可以控制每个环节,不再出现莫名的java错误。同时HX提供了更完善的代码保护,崩溃、断电都能有效保护代码。
从HBuilderX1.2起,所有App开发者需要的功能在HBuilderX里均已补齐(有些操作方式可能有变化,但功能是一样的)。
HX对于偏老的技术栈如jquery的支持确实不如HB,对于后端语言的支持也不如HB。
对于这些环节开发者仍然可以使用HB。
但我们仍然可以认为,HX是更值得前端工程师拥有的利器。
同时HB将逐渐减少更新频率,明年会正式停止更新。
HBuilder系列诞生来,服务了260多万开发者,我们深感荣幸,并终于打破中国人做不好开发工具的魔咒。
未来我们还将继续努力,把HBuilderX打造的更优秀,让中国的前端工程师,开发效率高于全世界!
HBuilderX的下载链接http://www.dcloud.io/hbuilderx.html
uni-app迎来里程碑突破
uni-app,是终极的跨平台框架。因为
- 跨的平台更多(Android、iOS、小程序、H5)
- 性能体验更好(小程序技术框架和weex加持)
- 三方扩展生态更丰富
即支持小程序sdk又支持原生sdk,大部分sdk厂商都有小程序sdk,也就是大部分sdk都可以直接用于uni-app的扩展生态,而且是原SDK厂商来维护。这意味着uni-app拥有了所有跨平台方案中最丰富的三方生态。开发者不用找原生工程师去封装环信、网易云信等im的原生sdk了,直接用他们的小程序sdk即可。 - 开发方式更现代
vue数据绑定、npm、webpack、各种预处理器 - 公有技术,学习成本更低
掌握uni-app需要学习的是vue的语法,小程序的api,学会这些是理所应当,并不为uni-app额外增加学习成本。
没有其他跨平台方案在这5方面可以与uni-app相提并论!
任何Hybrid方案都不是万能的,选择一种,总是会受到一些限制。
uni-app也有限制,但综合看仍然是最好的跨平台开发方案。
- 对于开发者个人:不用学习众多轮子,学好一个,什么都会做
- 对于外包公司:开发一次,给客户交付iOS、Android、小程序、H5多个平台,赚的更多,客户满意度更高
- 对于自研开发商:做小程序去拉新,转到App里实现留存和高arpu运营,是最精益的创业之道。uni-app可以以最低成本实现日活和arpu值的最大化,并可以覆盖更多流量入口。
而且这些都是免费产品,就更没有不拥抱的理由了。
uni-app开发欢迎加入QQ群,交流学习,向我们反馈意见。由于qq群满的太快,本文不再直接列最新的qq群号,请去uni-app官网左下角查看。
uni-app的官网地址:http://uniapp.dcloud.io/
最后再说下DCloud的文档、技服体系的优化
过去DCloud一些文档做的不够好,已经吸取经验,uni-app的文档比较完善,搜索也更好用。
uni-app的qq群每日数万条消息记录,高度活跃。
DCloud投入专人支持uni-app的技服工作。
官方出品的免费视频教程上线已到腾讯课堂https://ke.qq.com/course/343370。
DCloud的插件市场也已上线。
做这些产品和服务不容易,也请多支持我们。
最大的支持,当然是转发本文给朋友喽。让小伙伴们赶紧用起来HBuilderX和uni-app这样的利器!
FAQ
-
Q:uni-app的手机端用户体验怎么样?
打包成App后的体验和微信小程序一样好,在某些场景下更好。
其体验优于使用HTML开发的5+app。虽然uni-app使用了vue文件,但vue文件编译到手机上都是js,并且框架层做了自动预载和更快的联网机制,实现了更高的性能体验,尤其是联网的新页面加载速度非常快。
uni-app还支持nvue,这其实是引入了weex并在js api层面上被uni统一了。nvue的渲染效率更高。
使用uni-app开发的app,可以发现加载新页面速度极快,动画还没结束时,需要联网下的资源就可以显示了。
使用uni-app开发的微信小程序,和直接开发微信小程序相比性能没有差别,因为uni-app输出到微信时也是编译为wxml格式。 -
Q:不同平台有自己的特色,uni-app如何在一套代码里兼容?大量写if else吗
常用api都被uni-app统一了,个性化特色有优雅的条件编译方案。详见
所有平台的所有能力,都可以在uni-app中使用,不受限制。 -
Q:既然uni-app的App端使用5+引擎,是不是5+的所有强大能力都可以调用?
是的,包括Native.js、原生sdk扩展都可以用。但注意uni-app的窗体管理是在pages.json里做,不能自己管理窗体,plus.webview的api只有一些webview样式修饰的api可以使用,新建、关闭窗体的api不能用。 -
Q:uni-app支持自己扩展原生功能和离线打包吗?
支持,同5+sdk。更提供插件云打包。 -
Q:不跨端,只做App或小程序,适合用uni-app吗?或者说uni-app开发和5+App/mui开发有什么区别
新项目强烈推荐使用uni-app。
uni-app相比5+App有如下优势:- 性能体验更好,微信小程序的Hybrid方案性能是经得起考验的,支撑起一线开发商用这个技术架构获取了数亿用户。而uni-app的性能比微信小程序整体更好。
- 可跨端发布。未来是多端时代,uni-app现在已经覆盖了Android、iOS、微信小程序、H5、百度小程序、支付宝小程序、今日头条小程序。学习和使用uni-app是面向未来的正确选择。
- 使用uni-app开发App,由于基于模板和数据绑定,开发代码量比纯5+或mui更小,有更快的开发效率。
- 多了weex、小程序生态丰富的sdk等重要部分。
- DCloud在全力打造uni-app,这很关键。老项目可以暂不迁移,新项目就不要选5+App了。
-
Q:uni-app支持的手机版本最低到多少?
Android4.4、iOS8是官方会保障兼容的。
更低版本其实也能用,但官方发布时不会测试更低版本。另外如果使用flex布局,更低版本不支持的,只能使用传统css布局。 -
Q:uni-app学习难度比mui怎么样?
vue的语法+小程序的api,都是必备的通用技术。
如果你不会vue的话,需要学习了解vue。如果你开发过小程序,那组件和api基本不用再学,否则需要学一遍。如果你会vue和小程序开发,那基本没有学习成本。
没学过vue的同学,也不用掌握vue的全部,只需了解vue基础语法、虚拟dom、数据绑定、组件、vuex,其中关键是理解虚拟dom和数据绑定的思路,不要再沿袭找一个dom元素的id然后js api操作它的思路。
其他如路由、loader 不用学,cli、node.js、webpack也不需要学。但编译报错时,经常是webpack报错,需要百度查webpack报错信息。 -
Q:uni-app怎么不支持HTML的dom操作?
uni-app的web-view组件支持load本地HTML页面,所以也是支持dom的。但vue页面里不支持dom。
如无必要,我们也不推荐使用HTML。
因为现实是整个前端技术发展在去dom化,微信小程序不支持dom,vue、react也是虚拟dom。
之所以会这样是因为2点:- 性能。虚拟dom的性能更高。
- 开发效率。基于数据绑定的开发,代码量会比操作dom少很多。
所以作为前端工程师,拥抱和学习新技术是必然趋势,个人习惯应该经常update,活到老学到老。
至于基于dom的三方库用不了的问题,一方面小程序生态已经起来了,周边的三方库非常多,这些都在uni-app里可直接使用,并且兼容到了app侧。另外确实有必须使用dom的三方库,那就用web-view组件load HTML吧。
-
Q:uni-app使用的flex布局很不习惯
flex布局是更先进、更通用的布局模式,比如垂直居中,以前写起来很麻烦。
flex布局还是web和原生通吃的通用布局,使用flex布局做的界面,可以在react native、weex、快应用等平台运行,传统web布局做不到。
当然如果你不想学flex,还希望使用传统布局,也可以,把app.vue里的全局flex设置去掉就行。
另注意nvue由于是基于weex的,只支持flex布局。 -
Q:HBuilder会支持uni-app吗?
uni-app只会在HBuilderX里支持。HBuilder不会新增功能了。并且今年底会停止更新。请开发者尽快完成向HBuilderX的升级。 -
Q:是不是DCloud以后的重点是uni-app,不再演进5+和mui了?
DCloud重点是uni-app,但uni-app编译到iOS、Android时仍使用了5+引擎,5+引擎仍会积极演进。
5+引擎近期提供了原生视频、直播、指纹、ibeacon,后续还会继续强化能力。其实5+引擎也已经内置了weex渲染器,只是传统5+app开发模式下无法编译weex代码,只有uni-app里内置的编译器才能正常使用。
mui作为一个开源ui库,手机上常见的ui控件均已支持,没有什么需要新增的ui控件,本身也许久未更新了。mui过去的一个较大问题是不支持组件化和数据绑定,这部分被挪入了uni-app中。 -
Q: mpvue项目或组件是否可快速迁移到uni-app下?
是的。详细指南参考http://ask.dcloud.net.cn/article/34945 -
Q:既然uni-app有了nvue,引入了weex,假使只做app不发小程序,是否可以不用vue,所有界面都使用nvue?
理论上所有界面都可以用nvue,但不建议这么用。
首先vue页面没那么糟。只有个别场景用nvue作为补充更合适。比如左右拖来拖去的长列表。
其次weex并没有那么完善,作为局面补充使用更合理,大面积使用时也会遇到很多weex的坑。
所以各取其优势,避其短处,结合使用是最优方案。 -
Q:uni-app的成熟度怎么样?
更新:已经十几万案例了。
最后,请认真通读一遍uni-app官网,以及善用uni-app官网的搜索,你的大部分问题都会在文档里。
收起阅读 »