Vue

HTML5 Plus移动App(5+App)

工具：

开发工具HBuilder下载下载地址

开发工具HBuilderX下载下载地址(替代HBuilder)

框架：

uni-app :是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台 ( 文档地址     培训视频)  

MUI：前端UI框架 与bootstrap相似

HTML5+扩展了JavaScript对象plus以实现pc端没有的功能

HTML5+包含HTML5Plus规范与Native.js

Native.js可以直接调ios和android的原生API ：5+ App开发Native.js入门指南

在5+App里，同时包含了HTML5Plus规范和Native.js的实现，开发者可以在5+App里自由使用相关技术

 最新规范请参考

 

首先开发者需要清楚你要做什么，是一个mobile web项目，运行在浏览器里？还是要做一个app，安装和运行在手机上？或者要把一个mobile web项目打包成app？

1、做一个mobile web项目

在这个模式下，开发者用不到HTML5Plus，使用标准的HTML5语法，运行在浏览器里。这不算5+ App。

此时开发者仍然可以使用HBuilder这个开发工具，新建项目时选择web项目。

开发者也仍然可以使用DCloud提供的mui开源框架，来简化ui的开发。

但这就是一个普通的web项目，b/s方式，不可脱线运行，不能调用HTML5Plus的增加api。

2、做一个正统的app

传统意义上的app，是c/s方式的，它的程序要安装和运行在手机上，不通过浏览器在线下载。

此时开发者在HBuilder里新建项目时，选择“移动App”。（HBuilderX里选择5+App）

在App项目下编写的HTML、js等文件，是会被打包到原生的安装包（Android是apk包、iOS是ipa包）里的。

此时本地的js和服务器通过ajax交互，由服务器按接口方式给出数据（一般是json），然后客户端的js文件解析json，并根据本地的业务逻辑来渲染页面和执行功能。

所以请不要在App项目中放置运行在服务器端的php等文件。

3、使用wap2app打包mobile web项目为app

如果开发者想把一个做好的mobile web站，方便快速的打包成app，那么要使用DCloud的wap2app框架。

在HBuilder中新建项目时，选wap2app项目，把mobile web站的url输入进去，参考框架的教程来配置。

wap2app不同于普通的web打包技术，wap2app可真正做达到原生应用的功能和性能体验。

具体教程另见：文档中心-wap2app，

wap2app属于5+app，它底层也是强大的HTML5Plus规范和Native.js在支撑。

wap2app项目下的所有文件，也都是打包在本机运行的。

注意：如果你想开发一次，全端覆盖，那么需要使用DCloud的另一个产品uni-app

 

提升HTML5的性能体验系列之一 避免切页白屏

 

plus is not defined

只有HBuilder真机运行、打包后、或流应用环境下才能运行plus api。  
在普通浏览器里运行时plus api时控制台必然会输出plus is not defined错误提示

不要在plus和mui未完成初始化时调用相关API

        function plusReady(){  
            // 在这里调用plus api  
        }  
        if(window.plus){  
            //初始化完成执行plusReady()函数直接调用plus
            plusReady();  
        }else{  
             //初始化为完成 监听初始化，完成后执行plusReady()函数
            document.addEventListener('plusready',plusReady,false);  
        }  

经过MUI封装后如下：
mui.plusReady(function(){  
    // 在这里调用plus api  
}); 

 

mui is not defined：MUI需要加载mui.js 且使用时也需要初始化完成才能使用

它在dom前久结束了所以无需
mui.ready(function () {  

})  

 

 

 UNI-APP：

1.目录及文件

一个uni-app工程，默认包含如下目录及文件：

├─ components ··················· uni-app组件目录
   └──comp-a.vue  ··················· 可复用的a组件
├── pages ·······················  业务页面文件存放目录
    ├─ index ······················ 使用到的字体文件
        └── index.vue ····················· index页面
    ├─ list ······················· 使用到的图片文件
        └── list.vue ····················· list页面
├─ static ··· 存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此
├─ main.js ······················· Vue初始化入口文件
├─ App.vue ··· 应用配置，用来配置App全局样式以及监听 
├─ manifest.json ················ 配置应用名称、appid、logo、版本等打包信息
└─ pages.json················· 配置页面路由、导航条、选项卡等页面类信息

2.应用生命周期

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次)
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台

应用生命周期仅可在App.vue中监听，在其它页面监听无效。

3.页面生命周期

函数名	说明	平台支持
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参
onShow	监听页面显示
onReady	监听页面初次渲染完成
onHide	监听页面隐藏
onUnload	监听页面卸载
onPullDownRefresh	监听用户下拉动作 ，一般用于下拉刷新
onReachBottom	页面上拉触底事件的处理函数
onPageScroll	监听页面滚动 ，参数为 Object
onTabItemTap	当前是 tab 页时，点击 tab 时触发。
onShareAppMessage	用户点击右上角分享	微信小程序

注意

• 先触发 uni-app onReady ，后触发 vue 的 mounted
• 建议使用uni-app的onLoad 代替 vue的 created

生命周期官方链接

 

plusReady