MUI多端发布开发指南(终于把MUI的使用场景说清楚了)
MUI官方给的文档很分散，不系统。遇到问题解决找文档浪费了很多时间，终于弄清楚了，MUI的使用场景和处理方式。
一套代码，实现wap、微信公众号、iOS和Android的App以及流应用，并且保证在App平台上有更好的体验，这对于提升开发效率有巨大的帮助。
实现多端发布，需要处理平台差异，尤其是HTML5+规范扩展的浏览器并不支持的API，需要兼容降级或动态去除方案。
本文详细讲述了mui的多端发布功能，能做什么，不能做什么，能做的怎么做。
运行环境识别
多端发布首先需要识别在不同的运行环境，有几种判断环境的方式。
5+app环境下，ua是包含html5plus字符串的，流应用环境下还会再包含streamapp字符串。
2. plus对象是否存在
可以在js里判断plus对象是否存在，但需要注意一种情况，如果你的js代码里恰好还定义了一个名为plus的js对象，则这种方法将无法准确判断运行环境。
所以一般推荐采取UA判断的方式处理。
UI部分的多端发布
mui在所有ui组件上都提供纯HTML实现方案，在HTML效果不佳的ui组件上补充了5+的原生强化。mui的窗体切换、父子页面、长列表滚动、下拉刷新、弹出框、ajax，这些功能在5+App环境下可以调用原生api实现增强体验，但在非5+环境下也可以按照普通HTML的做法跑通业务。
1. 窗体切换mui.openWindow在5+下执行的动画是plus.webview的原生动画，拥有更高的性能。而在非5+环境下执行的是普通网页跳转。mui虽然有SPA单页方案，但mui.openWindow并不会在非5+环境下降级为SPA的div窗体切换。如果使用spa固然可以一套代码多处使用，但无法在5+环境下自动升级为原生view切换动画。官方的推荐是常规页面使用mui.openWindow，只有部分很小的页面使用spa实现，比如设置界面，即原则是div渲染也不会有太大压力的场景才使用spa。不了解mui的spa方案的，可以看Hello mui示例的setting模板里，需要单独引入mui.view.js。2. 父子页面和长列表滚动长div滚动在Android4.4以下很卡。为解决标题固定顶部，下面内容区超长时也可以滚动流畅，5+引入了双webview的父子页面结构，通过webview的body滚动来替代div滚动，以达到原生体验。mui的subpages在5+环境下是双webview，而在非5+环境下会自动切为iframe。mui虽然也提供了div滚动控件，但适用于局部滚动，比如popover、picker等，subpages并不能在非5+下自动切为div。3. 下拉刷新基于div的下拉刷新在Android4.4以下也不流畅，5+扩展了原生的下拉刷新控件。mui的下拉刷新，在Android的5+ App环境下会调用5+扩展的双webview下拉刷新，而在iOS 的5+环境和非5+环境下，则会调用基于div的下拉刷新。4. 弹出框mui.alert，mui.confirm，mui.prompt，mui.toast，这些弹出框都是在5+环境下调用nativeUI，而在非5+环境下调用div模拟的框。actionsheet控件在Hello mui里提供了原生和div两种方式，目前这两种方式并不能自动切换。popover没有原生方式，只有div方式，不存在跨端障碍。5. 侧滑菜单mui提供了原生和div两种侧滑菜单。目前使用了原生侧滑菜单后并不能在非5+环境下自动切换为div模式。推荐的做法是把侧滑菜单做简单做小，直接使用div方式的侧滑菜单。6. tab选项卡mui并没有独立的选项卡控件，而是在Hello mui示例里做了基于原生和div两个不同的选项卡代码示例。目前使用了原生侧滑选项卡后并不能在非5+环境下自动切换为div模式。从性能角度而言，div选项卡很难承载太多内容，实际使用量也偏少。所以开发者使用了webview的选项卡后，为了实现多端发布，需要在tab的点击事件做判断处理，发现是非5+环境，建议把webview切换改为网页跳转。7. ajaxmui.ajax在5+下为跨域而使用了5+的plus.net的api，而在非5+环境下会自动切换为普通的ajax。8. 语音输入控件Hello mui的input里有语音输入控件，在HBuilder里敲mspeech回车也给直接生成该控件。在非5+环境下，该控件的麦克风图标不会显示出来，变成普通的输入框。
能力方面的多端发布：plusto互转
除了ui相关，5+还扩展了大量的JS API，这些API有的在手机浏览器或微信浏览器里有类似功能，有的没有。
处理这方面的问题无非两种思路，裁掉或兼容降级。
1. 对于非5+环境不存在的功能：
调5+的api前判断下是不是在5+的ua环境下。不是5+环境则不执行plus代码。
2. 对于可降级的功能：
定位、拍照、录音、相册功能其实HTML5规范里也有，只是因为体验不佳所以5+进行了扩展。
处理这类问题又有2种思路：
2.1 开发者可以在不同的运行环境下引入不同的js，实现这些业务逻辑。比如在浏览器下引入h5camera.js，而在5+下引入pluscamera.js。
2.2 也可以通过重定义js的方式实现标准化替换。
DCloud建立了一个开源项目plusto，，这个提供了一个定位转换的例子。
HTML5写的定位代码，载入示例的js后，该js会自动判断当前的运行环境，发现在5+环境下会重定义HTML5标准的定位对象，改成plus.geolocation对象。
重定义也有2种做法，一种是使用HTML5的方式写，引入js重定义为plus。一种是使用plus写，然后引入js重新为普通浏览器或微信对象。
重定义的执行性能低于分条件判断。
plus.to的开源库还不完整，也欢迎网友积极贡献，提供更多plus、浏览器、微信的互转库文件。
条件编译，加强项目管理，提升执行性能
涉及5+App的js文件，可以独立为单独js，通过条件编译工具在打包时动态引入。
条件编译比运行期动态判断的效率要高，推荐开发者使用。
glup、grunt都是业内成熟的前端构建工具，相关教程本文不介绍，请自行搜索。
DCloud的mui及Hello mui示例是使用grunt构建的，grunt相关配置也都开源在
Hello mui作为一个Android、iOS、浏览器里都能使用的多端发布示例，其中同时涉及条件编译、动态UA判断等技术。
write once，run anywhere，这是程序员的梦想，也是生产效率发展的必然方向，让我们一起为之努力。
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！MUI移动开发框架——微信支付(android部分)
MUI移动开发中的微信支付分两部分，一部分在服务端，一部分在客户端
--------------------------------------------------------------服务端部分--------------------------------------------------------------:
& &&我们客户端向服务器请求参数，服务器直接生成预支付单号并返回给我们，返回给客户端的参数应该有appid、partnerid、prepayid、package、noncestr、timestamp、sign共七个参数，可以到微信支付官网上验证sign值是否正确:&;
注意，这里的商户key是在(这tm居然是商户平台里设置的!)里面设置密钥设置的值，这个值是自定义的，最好是随机数，负责这块的同事说如果不是随机数可能验证不通过,将商户key也填入，然后点击&生成签名&，查看生成的sign值和服务器返回的sign值是否相同，如果相同则说明参数没有问题.参考微信官方文档，以上6个参数(另外还有sign)是必选参数,少了不行
--------------------------------------------------------------客户端部分--------------------------------------------------------------:&
***生成带应用签名(主要是keystore问题)
1.用eclipse生成keystore
做android不知道keystore实在惭愧，今天遇到了，生成keystore的方式是:(不用eclipse的话 也可以用dos 网上可以找到)&
如果要生成一个新的keystore，随意选择一个项目，来到下一步，创建一个新的keystore文件，指定生成到的路径和文件名，并设置密码
填写信息，这里一定要记下Alias(别名)和密码
最后成功生成keystore文件
2.用这个keystore文件导出android项目的apk,步骤与生成新的keystore基本相同
3.生成应用签名
(1)下载Gen_Signature_Android221cbf.apk
&(2)将用keytore签名过的apk装到安卓手机上，把Gen_Signature_Android221cbf也装上
(3)打开&Gen_Signature_Android221cbf，输入项目的包名，这个程序会根据你输入的包名找到当前手机上安装的对应程序，然后根据程序的keystore签名和包名，生成一个字符串，这个字符串就是应用签名，所以应用签名与包名和keystore文件有关
这段文字不能复制，蛋疼的敲到电脑上吧,登录开放平台(操蛋的腾讯做个支付搞两个平台)，到管理中心下面创建创建移动应用，
这里要用到包名和应用签名，加上就好了，keystore的作用有一半就在这里，在微信服务器上作为应用签名
4.MUI代码部分
mui.init();
mui.plusReady(function() {
//定义支付通道
var channel =
//获取支付通道
getChannels();
//获取支付通道的方法
function getChannels() {
plus.payment.getChannels(function(channels) {
for (var i = 0; i & channels. i++) {
if (channels[i].id == &wxpay&) {
channel = channels[i];
plus.ui.toast(&使用支付方式:& + channel.id);
}, function(e) {
plus.ui.toast(&获取支付通道失败!&);
console.log(&获取支付通道失败!&);
//发起微信支付请求的方法
function pay(){
//获取微信支付参数的url
var basic_url=&&;
mui.ajax(basic_url,{
dataType:&json&,
type:&get&,
success:ajax_success_callback,
error:ajax_error_callback
//获取微信支付参数成功的回调函数
function ajax_success_callback(resObj){&
console.log(&请求微信支付参数成功,返回的json:&);
var res_str=JSON.stringify(resObj);
console.log(res_str);
//用返回参数 发起微信支付请求
plus.payment.request(channel,res_str,wxpay_success,wxpay_error);
//获取微信支付参数失败的回调函数
function ajax_error_callback(e){
console.log(&ajax获取参数失败&);
//微信支付成功回调
function wxpay_success(result){
plus.ui.alert(&支付成功!&,function(){
//微信支付失败回调
function wxpay_error(error){
plus.ui.alert(&支付失败!&);
plus.ui.alert(JSON.stringify(error));
console.log(JSON.stringify(error));
//微信支付按钮 发起微信支付
document.getElementById(&btn_pay&).addEventListener(&tap&,function(){
关键代码也就这一句，拿到公司服务器返回带有七个参数的json后，&plus.payment.request(channel,res_str,wxpay_success,wxpay_error);
这里有问题的，可以参考mui官方文档，一般没什么问题
6.manifest配置
我用的是云打包，配置很方便，都不用开manifest的代码模式，开个面板模式就行,只要加上appid就可以了，其它的在打包的时候加上
注意，要调起微信支付，必须要打包成apk并安装才能使用,不要死命的试了(MUI官方demo可以不打包)
证书别名:keystore中的Alias
私钥密码:keystore中的密码
证书文件:keystore的所在路径
打包完成 测试成功
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！输入关键字或相关内容进行搜索
如题，可以作为微信小程序的ui库吗？
赞助DCloud可免广告，
要回复问题请先或
最新活动: 3 天前
赞助DCloud可免广告，
赞助DCloud可免广告，我用mui框架搭建的微信页面，为什么点击input瞬间input消失，之后马上又出现_百度知道
我用mui框架搭建的微信页面，为什么点击input瞬间input消失，之后马上又出现
我用mui框架搭建的微信页面，为什么点击input瞬间input消失，之后马上又出现，这个input瞬间消失的小bug该如何去除
您的回答被采纳后将获得：
系统奖励15（财富值+成长值）+难题奖励10（财富值+成长值）+提问者悬赏80（财富值+成长值）
我有更好的答案
有链接看看?
应该是你用了a标签的空链接问题。我的就是这个问题
为您推荐：
其他类似问题
语文的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。输入关键字或相关内容进行搜索
每天上午十点 ，下午三点，晚上八点，直播课程H5混合开发,框架MUI-H5+,微信小程序，Vue.js,PHP,JavaScript,ReactNative,
赞助DCloud可免广告，
要回复问题请先或
赞助DCloud可免广告，