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-apponLoad 代替 vue的 created

生命周期官方链接

 

plusReady

转载于:https://www.cnblogs.com/lichihua/p/11175423.html

Logo

前往低代码交流专区

更多推荐