现在有很多的打包工具可以选择,grunt,gulp,webpack等等。vue官方建议是使用webpack,而且webpack相对其他打包工具的好处是代码动态编译，可以根据需要提取出公共部分的代码。因此我们也选择webpack作为打包工具。

目录结构

开发目录 src

1. assets 静态资源，如图片等的保存
2. css 样式文件，css,less等
3. fonts 字体文件，根据需要添加自定义字体
4. js js框架，公共部分代码，自定义组件等
   5.view html页面文件,页面入口js文件

build 打包参数配置

主要用于对打包过程的控制

1. webpack.base.conf.js 基础配置参数,开发和生成代码打包共用
2. webpack.dev.conf.js 开发环境下的打包参数配置
3. webpack.prod.conf.js 生产环境的打包参数配置

config 打包模式配置

主要是打包相关的基础参数配置，如文件存放目录，打包后的访问根目录，是否压缩等

assets 生产环境下的js/css/图片等文件保存路径

可在config中指定

view 生产环境下的页面文件Html保存路径

和src/view下的html文件一一对应

package.json 打包的环境依赖配置

使用方式

1. 开发 npm run dev 开启本地web服务,方便调试页面和代码

2. 生产环境打包 npm run build 将src下的代码打包到根目录下的 assets和view目录下

功能

1. 支持vue开发的调试，支持webpack打包的调试和自动更新，不需要手动刷新代码

2. 支持代码和语法检查，可在根目录的.eslintrc下配置检查规则

3.支持webpack的多页面(多入口)开发，相比单入口模式，逻辑更清楚

使用说明

1.view下的页面必须放在view的下级目录，比如view/index/index.html,同时每个页面文件必须搭配一个同名的js文件作为页面入口，比如view/index/index.js

2.可根据需要配置本地调试服务器的端口，默认8000,
在config/index下配置

3.可配置打包路径等，同样在config/index下配置

初始化说明

1. 在根目录下执行 npm install (如果不是root用户的话，sudo npm install)

2. 打包或者调试时，如果npm 命令提示错误，一般是某个模块未安装，可执行 npm install ***(模块名称) 安装相关模块

3. npm run dev (调试)

4. npm run build (正式打包)

下载完整目录

原文链接:https://blog.betweenfriends.cn/post/howtodevwithvueandmui.html

布局容器

在NView模板中，<nview>标签是布局容器，其它控件都必须包裹在<nview>容器中；<nview>默认为块级元素（宽度为100%屏幕宽度），自上而下排列布局，现阶段必须声明nview的高度，不支持高度自适应。如下是一个示例

    <nviews cachemaxage="86400">  
        <nview id="nview1" style="height:50px;backgroundColor:#56C1FF"></nview>  
        <nview id="nview2" style="height:100px;backgroundColor:#61D836"></nview>  
        <nview id="nview3" style="height:50px;backgroundColor:#EF5FA7"></nview>  
    </nviews>

如上代码布局效果如下(顶部自带原生标题栏)：

除了默认的自上而下顺序布局，nview也支持绝对定位布局，如下示例中，将nview1设置为绝对定位，在窗口底部显示；

    <nviews cachemaxage ="86400">  
        <nview id="nview1" style="position:absolute;bottom:0;height:50px;backgroundColor:#56C1FF"></nview>  
        <nview id="nview2" style="height:100px;backgroundColor:#61D836"></nview>  
        <nview id="nview3" style="height:50px;backgroundColor:#EF5FA7"></nview>  
    </nviews>

设置nview1为绝对定位后，运行示意图如下：

从运行结果可以看出，nview1设置为绝对定位后，脱离文档流自行定位；但nview2、nview3继续使用默认的自上而下的布局方式。

在nview布局容器下，可以嵌套imageslider、list、canvas、richtext四个子标签，子标签默认和nview容器具备相同的宽高；其中：

• imageslider/list是封装好的组件，标签及布局方式固定；
• canvas/richtext是布局控件，分别表示绝对布局/流式布局

接下来重点介绍 richtext/canvas两种布局控件

布局控件

先看如下代码，有两个nview，分别嵌套流式布局的richtext和绝对布局的canvas：

    <nviews cachemaxage ="86400">  
        <nview id="nview_richtext" style="height:100px;backgroundColor:#56C1FF">  
            <richtext>  
                <font>Hello</font>  
                <font>World</font>  
            </richtext>  
        </nview>  
        <nview id="nview_canvas" style="height:100px;backgroundColor:#EF5FA7">  
            <canvas>  
                <font>Hello</font>  
                <font>World</font>  
            </canvas>  
        </nview>  
    </nviews>

运行结果如下：

从图中可以，richtext下的两个font流式排版，显示正常；但canvas下的两个font重叠在一起，这是因为canvas下的子标签默认为绝对定位，不进入文档流，多个子标签则会以多层的方式重叠排版；给canvas下子标签设置位置坐标即可正常布局，代码如下：

<nviews cachemaxage ="86400">  
    <nview id="nview_richtext" style="height:100px;backgroundColor:#56C1FF">  
        <richtext>  
            <font>Hello</font>  
            <font>World</font>  
        </richtext>  
    </nview>  
    <nview id="nview_canvas" style="height:100px;backgroundColor:#EF5FA7">  
        <canvas>  
            <!--设置坐标位置-->  
            <font style="left:5px;width:40px;">Hello</font>  
            <font style="left:45px;width:40px;">World</font>  
        </canvas>  
    </nview>  
</nviews>

对应运行结果如下：

canvas绝对布局

canvas是绝对布局的容器标签，具有以下特点：

• 支持a、font、img、button、input、hr子标签
• 子标签全部绝对定位，需要声明标签相对父元素的相对坐标值
• 子标签大小由坐标固定，不会随着内容自动变化，若内容过长则自动裁剪（超出部分不可见）

如若nview标签下仅有一个canvas子标签，则canvas和nview默认具有相同的的大小/宽高信息。 如下是一个代码示例，演示canvas子标签如何定位：

    <nviews cachemaxage ="86400">  
        <nview id="nview1" style="height:150px;background-color: #56C1FF;">  
            <canvas>  
                <font style="left:35px;top:35px;height:22px;align:left;font-size:17px;color:#ffffff">  
                    这里是文字  
                </font>  
                <img src="_www/logo.png" style="top:60px;right:60px;width:60px;height:60px"/>  
            </canvas>  
        </nview>  
        <nview id="nview2" style="height:150px;background-color: #EF5FA7;">  
            <canvas>  
                <button style="left:50px;right:50px;top:70px;height:30px;background-color:rgba(0,0,0,0);border-color:#ffffff;color:#ffffff;">按钮</button>  
            </canvas>  
        </nview>  
    </nviews>

运行结果如下（为方便理解，标注了每个元素的坐标值，坐标值对应上面代码中的left/right/top等定义）：

从上图可以看出：canvas布局控件下的元素，全部为精确定位，坐标值是相对于父容器的坐标（不是屏幕坐标）。

每个元素均需声明位置坐标

canvas布局控件下的每个子标签均需要声明坐标位置，否则每个标签将作为单独一层重叠绘制，如下是一个示例，创建两个nview，显示相同的元素，第一个不设置坐标位置，第二个设置坐标位置，示例代码如下：

    <nviews cachemaxage ="86400">  
        <nview id="nview1" style="height:100px;background-color: #56C1FF;">  
            <canvas>  
                <!--未设置坐标位置-->  
                <font style="height:20px;align:left;color:#ffffff;font-size:17px;">作者:CHB</font>  
                <button style="width:50px;height:25px;background-color:#007aff;color:#ffffff;border-color:#007aff;">关注</button>  
            </canvas>  
        </nview>  
        <nview id="nview2" style="height:100px;background-color: #EF5FA7;">  
            <canvas>  
                <!--设置坐标位置-->  
                <font style="left:10px;top:10px;height:20px;align:left;color:#ffffff;font-size:17px;">作者:CHB</font>  
                <button style="left:100px;top:10px;width:50px;height:25px;background-color:#007aff;color:#ffffff;border-color:#007aff;">关注</button>  
            </canvas>  
        </nview>  
    </nviews>

运行结果如下：

因为每个元素均需要声明位置信息，因此canvas布局适合精确定位的场景，比如：居右显示；

逐层渲染，非流式

另一方面，canvas布局不适合可变长度的场景，如上示例中，若将"作者:CHB"替换为“作者:George R.R. Martin”，默认就会和右侧关注按钮重叠，代码如下：

    <nviews cachemaxage ="86400">  
        <nview id="nview1" style="height:100px;background-color: #56C1FF;">  
            <canvas>  
                <font style="left:10px;top:10px;height:20px;align:left;color:#ffffff;font-size:17px;">作者:CHB</font>  
                <button style="left:100px;top:10px;width:50px;height:25px;background-color:#007aff;color:#ffffff;border-color:#007aff;">关注</button>  
            </canvas>  
        </nview>  
        <nview id="nview2" style="height:100px;background-color: #EF5FA7;">  
            <canvas>  
                <!--名字较长时，会重叠绘制-->  
                <font style="left:10px;top:10px;height:20px;align:left;color:#ffffff;font-size:17px;">作者:George R.R. Martin</font>  
                <button style="left:100px;top:10px;width:50px;height:25px;background-color:#007aff;color:#ffffff;border-color:#007aff;">关注</button>  
            </canvas>  
        </nview>  
    </nviews>

运行结果如下：

从上图可看出，关注按钮重叠在"George R.R. Martin”名字上方，这有如下两个原因：

• canvas下元素定位，类似于HTML5中的absolute定位，每个元素是按照坐标位置逐层绘制的，故关注按钮会和作者名字重叠，而不会像流式布局那样自动向右侧迁移；
• canvas下font标签默认宽度为100%，故可以将"George R.R. Martin”完整显示出来，而没有出现裁剪隐藏的情况；

richtext流式布局

richtext是流式布局的容器标签，有以下特点：

• 支持font、img、a、hr、br子标签；
• 各个子标签自左向右、自上向下流式排版；
• 子标签宽度和高度随内容自动变化，设置width/height属性无效（img标签例外），碰到较长文本时会自动换行；
• 支持通过空格（ ）来设置元素前后间距
• 设置位置坐标（left/top等）无效

如下是一个richtext示例：

    <nviews cacheMaxAge="86400">  
        <nview id="nview_richtext" style="height:250px;background-color: #56C1FF;">  
            <richtext style="left:10px;right:10px;width:340px;top:10px">  
                <font style="font-size:23px;color:#ffffff;font-weight: bold;">这是一级标题,内容较长时会自动换行</font>  
                <br/><br/>  
                <img src="_www/logo.png" width="20px" height="20px"></img>  
                <font style="font-size: 17px;color:#ffffff">&nbsp;&nbsp;&nbsp;&nbsp;作者:CHB&nbsp;&nbsp;&nbsp;&nbsp;</font>  
                <font style="font-size: 15px;color:#ffffff">2017-09-04</font>  
                <br/>  
                <hr style="border-color:#EF5FA7"/>  
                <br/>  
                <font style="font-size:14px;color:#ffffff">原文链接:</font><a style="font-size:14px;color:#ffffff">http://www.example.com</a>  
                <br/><br/>  
                <font style="font-size:14px;color:#ffffff">下面是详细内容,文字较长时会自动进行换行,可变长度的文字推荐使用richtext布局控件...</font>  
            </richtext>  
        </nview>  
    </nviews>

如上代码中，头像信息、作者信息、发布时间是顺序编写的，最终自动从左到右绘制在一行，运行结果如下：

因为设置位置坐标无效，故无法实现精确定位，比如要求发布时间居右显示，则在richtext中无法实现；

两种布局适用场景

通过如上分析，可以理解两种布局适用的场景不同：

• 需要多个元素自左向右显示，元素长度不固定，则使用richtext
• 文本长度不确定，需要自动换行，则使用richtext
• 图文混排，则使用richtext
• 需要精确定位（如右侧对齐），则使用canvas

官方文档上的解释如下：
方式一：通过mui.init方法中的preloadPages参数进行配置.

mui.init({
preloadPages:[
{
url:prelaod-page-url,
id:preload-page-id,
styles:{},//窗口参数
extras:{},//自定义扩展参数
subpages:[{},{}]//预加载页面的子页面
}
],
preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
});

方式二：通过mui.preload方法预加载.

var page = mui.preload({
url:new-page-url,
id:new-page-id,//默认使用当前页面的url作为id
styles:{},//窗口参数
extras:{}//自定义扩展参数
});

方式一多页面加载问题如下

解决横屏问题：
（转载）
真机运行时，manifest并不会实时生效，要打包才生效。
横屏有3个层级：

1. 手机禁止横屏
2. 手机允许横屏，但manifest禁止横屏
3. 手机允许横屏、manifest允许横屏，但页面代码禁止横屏。

js里控制：
//仅支持横屏显示
plus.screen.lockOrientation("landscape-primary");
//仅支持横屏反方向显示
plus.screen.lockOrientation('landscape-secondary');
//仅支持竖屏显示
plus.screen.lockOrientation("portrait-primary");
//仅支持竖屏反方向显示
plus.screen.lockOrientation("portrait-secondary");

或(该方式未经测试)
// 锁定屏幕为竖屏模式，不能设备如何旋转，屏幕都不会切换到横屏模式。
window.screen.lockOrientation([“portrait-primary”,“portrait-secondary”]);
// 锁定屏幕为横屏模式，无能设备如何旋转，屏幕都不会切换到竖屏模式。
window.screen.lockOrientation([“landscape-primary”,“landscape-secondary”]);
// 取消屏幕的锁屏，屏幕回到原始状态，
window.screen.unlockOrientation();

manifest.json里控制：
"orientation": [
"portrait-primary",
"portrait-secondary"
]
该文转载地址：http://ask.dcloud.net.cn/article/522

腾印网络致力于中小企业电商服务，软件开发，系统开发，提供一站式整体解决方案。
服务范围包括：网站建设，APP开发，微信开发，软件定制，系统定制 等

服务产品
PC端：网站建设，行业网站，电商平台
移动端：手机网站，手机APP
微信开发：微官网，微商城，公众号，小程序
系统开发：直播系统，点播系统，进销存系统 等

成功案例：电商类、视频类、在线教育类、生活服务类、游戏下载类等APP

QQ：1776609688

• 缘起
  需要在app里弄个定时提醒功能
• 过程
  在问答社区看到一个大佬分享的安卓插入日历提醒的按理
  点击这里过去看看???
• 但是
  看得有点晕,很多代码都不知道在干嘛(毕竟不懂原生)
  开始的时候就原样复制了一遍代码,也没怎么看,心想着能把项目完成了再说
• 后来发现
  没登录日历账号的手机不能设置提醒,反正就是各种报错
  好了,不说心路历程了
  直接上干货
  (html和引入date picker就省略了哈)

  (function($) {  
  var setcalendar = function() {  
      $.toast('功能加载中,请稍后', {  
          type: 'div',  
          duration: 1000  
      });  
  };  
  $.plusReady(function() {  
      var calanderURL = 'content://com.android.calendar/calendars',  
          ContentValues = plus.android.importClass("android.content.ContentValues"),  
          Uri = plus.android.importClass('android.net.Uri'),  
          Calendar = plus.android.importClass('java.util.Calendar'),  
          main = plus.android.runtimeMainActivity(),  
          userCursor = plus.android.invoke(main.getContentResolver(), 'query', Uri.parse(calanderURL), null, null, null, null),  
          userCursor_count = plus.android.invoke(userCursor, 'getCount'),  
          TimeZone = plus.android.importClass('java.util.TimeZone'),  
          TimeZone_str = plus.android.invoke(TimeZone.getDefault(), 'getID');  
      setcalendar = function(title, description, date_str) {  
          if(userCursor_count <= 0) {//如果没有日历账户  
              var account = new ContentValues(),  
                  buildUpon = plus.android.invoke(Uri.parse(calanderURL), 'buildUpon'),  
                  CalendarContract = plus.android.importClass('android.provider.CalendarContract');  
              plus.android.invoke(buildUpon, 'appendQueryParameter', CalendarContract.CALLER_IS_SYNCADAPTER, 'true');  
              plus.android.invoke(buildUpon, 'appendQueryParameter', 'account_name', 'someone@something.com');  
              plus.android.invoke(buildUpon, 'appendQueryParameter', 'account_type', 'com.android.exchange');  
              //设置账户信息  
              account.put('name', 'someone');  
              account.put('account_name', 'someone@something.com');  
              account.put('account_type', 'com.android.exchange');  
              account.put('calendar_displayName', 'someone_calendar');  
              account.put('visible', 1);  
              account.put('calendar_color', '-9206951');  
              account.put('calendar_access_level', '700');  
              account.put('sync_events', 1);  
              account.put('calendar_timezone', TimeZone_str);  
              account.put('ownerAccount', 'someone@something.com');  
              account.put('canOrganizerRespond', 0);  
              //保存账户信息  
              plus.android.invoke(main.getContentResolver(), 'insert', plus.android.invoke(buildUpon, 'build'), account);  
              //重新定义userCursor  
              userCursor = plus.android.invoke(main.getContentResolver(), 'query', Uri.parse(calanderURL), null, null, null, null);  
              //重新定义userCursor_count  
              userCursor_count++;  
          }  
          plus.android.invoke(userCursor, 'moveToLast');  
          var calId = plus.android.invoke(userCursor, 'getString', plus.android.invoke(userCursor, 'getColumnIndex', '_id')),  
              events = new ContentValues(),  
              mCalendar = Calendar.getInstance(),  
              date = date_str.split(/\s{1}|:|-/g);  
          plus.android.invoke(mCalendar, 'set', Calendar.YEAR, ~~date[0]);  
          plus.android.invoke(mCalendar, 'set', Calendar.MONTH, ((~~date[1]) - 1));  
          plus.android.invoke(mCalendar, 'set', Calendar.DATE, ~~date[2]);  
          plus.android.invoke(mCalendar, 'set', Calendar.HOUR_OF_DAY, ~~date[3]);  
          plus.android.invoke(mCalendar, 'set', Calendar.MINUTE, ~~date[4]);  
          var start = plus.android.invoke(plus.android.invoke(mCalendar, 'getTime'), 'getTime'),  
                end = plus.android.invoke(plus.android.invoke(mCalendar, 'getTime'), 'getTime');  
          //设置日历事件  
          events.put('title', title);  
          events.put('description', description);  
          events.put('calendar_id', calId);  
          events.put('dtstart', start);  
          events.put('dtend', end);  
          events.put('hasAlarm', 1);  
          events.put('eventTimezone', TimeZone_str);  
          var newEvent = plus.android.invoke(main.getContentResolver(), 'insert', Uri.parse('content://com.android.calendar/events'), events);  
          var id = plus.android.invoke(newEvent, 'getLastPathSegment');  
          var values = new ContentValues();  
          values.put('event_id', id);  
          values.put('minutes', '5');  
          values.put('method', '1');  
          plus.android.invoke(main.getContentResolver(), 'insert', Uri.parse('content://com.android.calendar/reminders'), values);  
          $.toast('设置提醒成功');  
      }  
  });  
  $.ready(function() {  
      $('.mui-content').on('tap', 'button.mui-btn', function() {  
          var picker = new $.DtPicker();  
          picker.show(function(rs) {  
              setcalendar('测试提醒标题', '测试提醒内容', rs.text);  
              picker.dispose();  
          });  
      });  
  });  
  })(mui);

• 最后说一句
• 打包的时候记得勾选日历权限
• 这个问题坑死我了

功能
使用场景
工具入口
功能
上次图片，可自动生成多种分辨率、大小的图片
可自由的增加、删除和修改要生成的图片的分辨率和大小
设置的图片生成分辨率和大小可重复使用，只需上传不同的图片，即可针对当前图片生成配置好的图片分辨率和样式
多种压缩方式可以选择，操作简便

使用场景
在平时的工作中，经常会碰到需要对同一张图片生成多种分辨率，特别是需要对好多图片都生成同样的分辨率的时候，就需要重复无数次傻瓜的操作。

针对这种情况，使用可配置的图片批量缩放处理工具，可以极大的提高工作效率，特别是对于不熟悉各类图片处理软件的朋友来说，会有较大帮助。

友间共享-图片处理工具

本文链接：https://blog.betweenfriends.cn/post/onlinecompressimage.html

native模式的图片轮播是的subNViews属性配置而成的，目前支持循环播放、点击预览、双指放大功能，不支持自动轮播；可以通过5+API手动添加图片、获取当前图片轮播控件显示的图片索引值、设置图片轮播控件的图片；native模式的图片轮播适用于展示商品详情的场景，下面是效果图：

实现方案

创建webview时，配置subnview节点即可，代码如下：

var webview = plus.webview.create("slider-native.html", "slider-native", {  
    titleNView:{//配置标题  
        'backgroundColor': '#f7f7f7',//导航栏背景色  
        'titleText': 'slider(native模式)',//导航栏标题  
        'titleColor': '#000000',//文字颜色  
        autoBackButton: true//自动绘制返回箭头  
    },  
    subNViews:[{ //配置图片轮播  
        id: 'slider-native',  
        type: 'ImageSlider',  
        styles: {//这里的left和top是控制控件的位置；Width和height控制控件大小  
            left: 0,  
            top: 0,  
            width:'100%',  
            height: '200px',  
            position: 'static',//static正常定位随窗口滚动，absolute时不随页面滚动  
            type:'transparent',//透明渐变样式标题栏，可以使slider通顶，更加美观  
            loop: true,//是否循环播放  
            images: [{//图片路径和图片大小  
                src: '_www/images/yuantiao.jpg',  
                width: '100%'  
            }, {  
                src: '_www/images/shuijiao.jpg',  
                width: '100%'  
            }, {  
                src: '_www/images/muwu.jpg',  
                width: '100%'  
            }, {  
                src: '_www/images/cbd.jpg',  
                width: '100%'  
            }]  
        }  
    }]  
});  
webview.show("slide-in-right", 300);//显示webview

原生图片轮播（ImageSlider）相关5+api地址：http://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.ImageSlider

体验及源码

下载最新版Hello MUI可体验效果：Hello MUI首页--> gallery slider（图片轮播） --> 默认样式(native模式)。
native模式的图片轮播是在创建webview的时候一同创建的，所以想要在hello mui的源码中找相关代码，不能在slider-native.html里面找，得在index.html中创建slider-native.html的位置查找。
附件是本示例所用代码。

经常看到有人说拍照上传图片闪退等等等问题，做个了个小实例，用了两年了，几十个客户的APP在用，没遇到过反馈拍照有问题的，需要的自己测试下你的手机能不能用，能用就copy吧，不能用就拉倒了，哈哈。

扫码测试：

apk，源码 戳附件 ☟☟☟☟☟☟☟☟

菜鸟刚学，不是很懂，请大神指教！
类似百度那种搜索历史。

岗位职责：
1、对前端应用进行开发，带领混合开发MUI团队完成的相关工作；
2、本着以用户为核心的设计理念，对页面进行优化，使用户操作更趋于人性化；
3、支持部门产品维护和新产品的开发，负责产品前端优化。

任职资格：
1、大专及以上学历，3年及以上工作经验；
2、熟悉MUI混合开发，熟悉W3C标准及规范，熟悉XHTML、DIV、CSS等页面技术；
3、熟悉JavaScript和AJAX技术原理，熟悉原生JavaScript；
4、熟悉MUI；
5、对用户体验、交互操作流程、及用户需求有深刻理解，能够深刻理解Web标准，在可用性、可访问性、浏览器兼容性等方面有实践经验；
6、对Web技术专研有强烈兴趣；
7、具有强烈的责任心、工作热情和求知上进欲望，有解决问题、钻研新技术的兴趣和能力；
8、具有自律精神和团队合作精神。

此信息至2017年11月前有效
邮件：16434146@qq.com