uniapp 生成html5_H5开发移动端APP基于uni-app

之前写过基于mui，h5 plus的APP开发

https://www.jianshu.com/p/8e7e8312f93d，这次在写个兄弟篇 uni-app开发APP。同为DCloud出品还是同样的配方、熟悉的味道，而且支持更多的平台。

1、为什么选择uni-app

基于mui，h5plus这一套技术操作随着后续的开发及项目跟进感觉越发力不从心。功能及模块通用型越来越被需要，不同业务、不同类型的全局变量，方法让人眼花缭乱，变量污染防不胜防。所以我累了，不想再写那些乱七八糟的重复性的东西了。需要向模块化、组件化改进了。

熟悉了利用hx h5+的开发转uniapp基本不用再考虑开发工具了，相同血脉几乎相同的套路，曾经的h5+也可以直接混入使用当然仅限APP端。

uniapp 官方主推，据说性能提高优化了很多。反正据我实测h5+的APP在苹果设备上表现明显不行，安卓设备还差不多。另外uni 提供了丰富的插件，虽然不太好用但也为我们实现某一功能提供点思路，关于官方插件稍后再吐槽。

OK，既然坚定了方向接下来就开干吧！

2、开发工具

logo.png

HBuilderX 版本 2.3.3.20190923

编译模式：自定义组件模式，这个默认自动设置的。这方面比较复杂，曾经的叫非自定义组件模式官方不在支持。

调试设备：安卓荣耀10，苹果iPhone5，苹果模拟器iPhoneX等。

3、开始

本文相当简洁地记述实际问题与开发总结，在此之前你肯定必须已经了看几遍官方文档及框架介绍。

关于布局：

初次上手实属不易，布局首页列表页面搞了好久效果还是不如意。究其原因对CSS 弹性盒子模型不得要领，布局元素还是停留在盒子模型上。至此停留，反复理解弹性盒子的属性及布局应用。

关于组件：

组件的问题比较多，如前所述默认就是自定义组件即内部独立的css、js及布局模板，对外提供方法、属性、变量。此时父页面引入组件后在重写组件的css之类的不在起作用，这时的组件是高度封装的，除了方法属性变量和外部再无关联。

非自定义组件，被引入后在父页面重写css会继续生效，这里的组件相当于一个模板融入父页面。

此外页面和组件的生命周期函数不同，有些操作比如下拉刷新、加载更多等方法只有页面具有。

关于js：

曾经js我们直接引入作为当前页面的一部分，现在的js文件整体是一个对象。然后就是使用对象的变量，对象的方法。前提js文件中必须导出这些方法变量外部才能正常访问。

没有了浏览器专用的window、document、navigator、location对象，包括cookie等存储。之前的传统操作现在通过使用vue的数据绑定方式解决js和dom界面交互的问题。

关于h5+：

uni-app App 端内置 HTML5+ 引擎，让 js 可以直接调用丰富的原生能力。

不需要 plus ready ，可以直接使用。而且如果你调用plus ready，反而不会触发。很多操作方法可以直接使用，但是涉及到和uniapp有交互的部分要慎重，有的返回文件路径里方法可能会不一致。

4、遇到的问题

1、箭头函数与this

//1

uni.$on('userloginsuccess' , function(res) {

this.loginSuccess();

})

//2

uni.$on('userloginsuccess' , res => {

this.loginSuccess();

})

如上代码操作，在回调用需要调用当前实例的方法或变量，必须使用方式2，否则无法获取当前实例，this指向无效。直接表现代码操作没有任何反应也不报错，这个问题我都不知遇到多少次了，最后查到基本都是箭头函数的问题，太容易忽略了。

2、页面间传递参数

不得不说，uniapp这一操作很low。页面跳转 uni.navigateTo(OBJECT)，url :'path?key=value&key2=value2'，要传的参数 要如此url拼接且长度受限制，如果传递对象必须转为字符串，如果内容过多还会被截掉。

3、缓存操作

曾经这样在H5+中很好用

//计算缓存大小

plus.cache.calculate(size => {

let s = parseFloat(size / (1024 * 1024)).toFixed(2) + "M";

console.log(s);

this.cacheSize = s;

})

//清空缓存

plus.cache.clear(() => {

this.cacheSize = '0.0M';

uni.hideLoading();

});

现在还是可以计算出来，清空操作一直报错

Can't find variable: window;at api showModal success callback function 很明显这个方法中使用了window对象，而在此已不再支持这种浏览器相关的DOM对象。

目前关于缓存还没有找到好的方法，继续学习探索中!

4、文件加密

很遗憾现在还没加密操作，之前的H5+至少在打包的时候还可以选择指定的js文件原生加密混合。所以目前一旦app解包所有文件暴露无遗。官方说目前还没有合适的方案，他们还在探索中以后会添加。

5、官方提供的组件

感觉官方提供的组件不能称之为组件，就是一个功能demo。组件通用性不强，固定的样式，布局呆板，无法满足不同的需求。

5、demo效果图

如图所示本次就写了以下几个页面，其他的别乱点功能还都没实现，后续在跟进。主要涉及功能：

uni 网络请求及文件上传、页面布局、数据填充等。

自定义组件开发及使用。

实现登录页面及功能。

选择图片、拍照修改头像。

用户数据本地存贮。

uni 其他基础组件。

uniapp

demo效果图

001.png

002.png

003.png

004.png

005.png

006.png

6、总结

如果你能做出以上界面，可以肯定的是你基本已经入门了，剩下的就是按照同样的套路做其他功能页面。

实际操作过程中，肯定反复的查看官方文档、API、组件等相关介绍，如此一些操作才能深刻理解、熟练于心。

7、最后

这是一个入门DEMO不是一个完整的项目，后续继续更新请关注。

如遇其他问题或不明白的请留言，共同探讨学习。

8、相关参考链接