mui | 易学教程

移动端常用UI框架

阅读更多关于移动端常用UI框架

作为一个前端人员来说，总结几款相对来说不错的用于移动端开发的UI框架是非常必要的，以下几种移动端UI框架就能基本满足工作中开发需要，根据项目需求，选用合适的框架搭建项目，更能容易提高开发效率。一、MUI 最接近原生APP体验的高性能前端框架，追求性能体验，是我们开始启动MUI项目的首要目标，轻量必然是重要特征 MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K，鉴于之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标，MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件官方链接： http://dev.dcloud.net.cn/mui/ 二、Frozen UI 由腾讯团队开发，适用于使用手Q规范设计的Web页面，而针对非手Q规范的页面，可通过修改变量定制界面主题。可以按需选择需要的组件，也可以采用cdn和combo的方式按需加载。使用iconfont展示图标，包含了按钮，列表，表单，提示，弹窗等常用组件，新增文本，布局，1px， rem，文字截断，占位，两端留白，两端对齐等解决方案，同时解决了移动端屏幕适配问题。CSS使用模块化的样式命名和组织规范，使用sass编写css代码。官方链接： http://frozenui.github.io/ 三、Amaze

MUI 打包android app

阅读更多关于 MUI 打包android app

自有证书生成方法 manifest配置（2）、图标配置：所有图片格式必须是png，且严格符合分辨率要求。使用其他图片格式重命名为png会导致打包失败。配置图标时选择自动生成所有适用图标，选择一个大图标然后点击生成并替换即可。（3）、SDK配置：根据项目需求选择需要的SDK并进行配置，要实现功能需要到第三方开发平台申请应用后获取相关配置参数，例如微信登录需要申请appid和appSecret，appid：微信开放平台申请应用的AppID值；appSecret：微信开放平台申请应用的AppSecret值。（4）、模块授权配置：根据项目需求添加模块，部分模块必须进行SDK配置，例如地图、登录授权等。 2、Android发布对于Android平台，可以选择使用DCloud生成的公用证书或自己生成的证书，两者不影响安装包的发布，唯一的差别就是证书中开发者和企业信息不同。（1）、使用DCloud公用证书通过菜单栏中的“发行”->“发行为原生安装包”，打开“App云端打包”对话框提交。注意只有移动App项目才可以打包。选择Android和使用Dcloud公用证书，点击打包即可。可以查看APP打包状态，开始时制作状态显示为“正在队列中”。如果“制作状态”栏显示“打包成功，下载完成”则表示云端打包完成，可点击“打开下载目录”查看下载的安装包。已经打好的安装包

MUI 图片上传实现

阅读更多关于 MUI 图片上传实现

HTML代码 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>信息修改</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="css/mui.min.css" rel="stylesheet" /> <link rel="stylesheet" href="css/mui.picker.min.css" /> <link rel="stylesheet" href="css/common.css" /> <link rel="stylesheet" href="css/personInfor.css" /> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">信息修改</h1> <a class="mui-icon mui-icon-more mui

MUI判断网络连接以及监听网络变化JS

阅读更多关于 MUI判断网络连接以及监听网络变化JS

来源： netChange问题；怎么判断网络状态 MUI用于获取当前设备的网络类型 1 function plusReady(){ 2 3 　　 var types = {}; 4 5 　　 types[plus.networkinfo.CONNECTION_UNKNOW] = "Unknown connection"; 6 7 　　 types[plus.networkinfo.CONNECTION_NONE] = "None connection"; 8 9 　　 types[plus.networkinfo.CONNECTION_ETHERNET] = "Ethernet connection"; 10 11 　　 types[plus.networkinfo.CONNECTION_WIFI] = "WiFi connection"; 12 13 　　 types[plus.networkinfo.CONNECTION_CELL2G] = "Cellular 2G connection"; 14 15 　　 types[plus.networkinfo.CONNECTION_CELL3G] = "Cellular 3G connection"; 16 17 　　 types[plus.networkinfo.CONNECTION_CELL4G] = "Cellular

mui监听多个下拉刷新当前处于哪个选项卡

阅读更多关于 mui监听多个下拉刷新当前处于哪个选项卡

1.滑动触发 <div id="slider" class="mui-slider mui-fullscreen"> <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"> <div class="mui-scroll" style="width: 100%;"> <a class="mui-control-item check_out_title wait_repay mui-active " href="#item1mobile">持有中</a> <a class="mui-control-item check_out_title repaied" href="#item2mobile">已完结</a> </div> </div>  </div> document.querySelector('.mui-slider').addEventListener('slide', function(event) { console.log(event.detail.slideNumber) }) 如下图所示：持有中为0，已完结为1

mui监听多个下拉刷新当前处于哪个选项卡

阅读更多关于 mui监听多个下拉刷新当前处于哪个选项卡

在VUE引入mui

阅读更多关于在VUE引入mui

1，在mui的gethub地址中下载：点击download 2,下载后，解压mui-master，复制里面dist里面的三个文件到项目中：在项目中起名lib是外部的库 3，在main引入：import mui from './lib/mui/js/mui' 4，打开我们的mui.js文件，找到如下代码，去掉window.mui的注释: 5，运行发现报错：明显是严格模式的问题，我们可以安装插件：npm i babel-plugin-transform-remove-strict-mode -d 然后在babelrc配置：发现还会报错，再配置这个ignore：运行好了： 6，用个按钮测试一下：结果所以还要再引入样式：import mui from './lib/mui/css/mui.min.css' 来源： https://www.cnblogs.com/lvqiupingboke-2019/p/12242517.html

vue中使用mui中的滑动组件时报错TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed

阅读更多关于 vue中使用mui中的滑动组件时报错TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed

Uncaught TypeError: ‘caller’, ‘callee’, and ‘arguments’ properties may not be accessed on strict mode functions or the arguments objects for calls to them 出现这个报错是因为mui中的tab-top-webview-main 滑动组件中的js，使用了非严格模式的语法，然而在webpack打包中默认使用了严格模式去打包解决方法： 1.一号坑：取消掉webpack默认的严格模式打包：下载： npm install babel-plugin-transform-remove-strict-mode --save-dev 在bablerc文件中添加：“plugins”: { "plugins": ["transform-remove-strict-mode"] } 2.使用mui中的横向滑动组件: tab-top-webview-main 注意：二号坑取消掉第一个div#slider 的fullscreen样式，否则会以全屏展示 <div id="slider" class="mui-slider"> <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui

基于Vue的WebApp项目开发（二）

阅读更多关于基于Vue的WebApp项目开发（二）

利用webpack解析和打包.vue组件页面相关知识： vue项目中的每个页面其实都是一个.vue的文件，这种文件，Vue称之为组件页面，必须借助于webpack的vue-loader才能运行，所以必须安装相关的包。【注意】从webpack2.0开始，在webpack.config.js中添加babel:{}是不认识的，需要在项目根目录下新建.babelrc文件，内容填写如下： { presets:['es2015'], //这句代码就是为了解决打包.vue文件不报错 plugins:['transform-runtime'] } View Code 好了，接下来看让一个Vue项目跑起来所需要的步骤：步骤一：需要安装以下几个包 vue：vue.js核心包 vue-loader：.vue文件编译loader vue-template-compiler：.vue模板编译，被vue-loader所依赖 babel-plugin-transform-runtime：es6实时转换成es5语法安装vue相关的依赖包（--save-dev意思是将包安装到开发环境下）接着安装vue核心包（--save意思将包安装到运行环境下）最终package.json文件内容 { "name": "vue", "version": "1.0.0", "description": "",

HTML5 & MUI 界面样式

阅读更多关于 HTML5 & MUI 界面样式

什么？这是要做前端的节奏吗？只要公司有需要，我分分钟变身、前端、美工、UI、交互、后端、数据库管理员......快速学习、快速响应，快速适应。公司需要我干啥，我就干啥，而我存在于公司的意义就是利用所学的东西帮公司解决问题......事实上，如果让一个人来搞定整个项目包括移动端、PC端等等，那你还不是被逼得啥都会。垂直居中+自动换行样式效果如下所示，当文字没有超出一行时，显示如“备注信息”，当文字超出一行时，显示如“维修地点” HTML代码如下： <div class="mui-input-row multi-line"> <div class="box label-right"> <div class="div-leftauto">维修地点</div> <div class="wrap">广东省深圳市南山区西丽街道桃源路1001号</div> </div> </div> css样式如下： /*不固定高宽div垂直居中的方法：其它页用*/ .box {width: 100%;height: 40px;border: 1px solid #FFF;display: table;margin-right:5px;} .wrap{display: table-cell; vertical-align: middle; width: 100%;padding: 6px 0px;line

订阅 mui