前端神级框架uni-app详解（一）初学
2019-06-25 16:50:21 11 举报AI智能生成
前端神级框架uni-app详解，这是一个一次编写可在android、ios、h5、微信小程序、百度小程序、支付宝小程序、头条小程序运行的框架
作者其他创作
大纲/内容
第一部分-如何学习
官网学习
地址
这里你可以大致了解下uni-app
基础准备
下载工具HBuildX
uni-app的专用编程工具，本人亲身体验，编程感觉良好
缺点
对git，svn的支持并不完美，它依靠Tortoise-git工具来进行提交拉取，虽然功能是能实现，体验感觉不好，不过瑕不掩瑜
优点
支持的代码智能提示是我最喜欢它的地方，因为很多提示都是中文的哈哈，还支持F1直接跳转到方法解说的网页
用这个工具的很大原因就是运行打包全靠它，可以在这个工具内直接一键运行到网页，手机，模拟器
新建项目可直接生成一些优秀模板，用来学习或者说cv还是不错的
速度比较快，不像idea，导入个项目很慢，这里直接把文件夹拖进来就完成了，速度极快
下载小程序工具
uni-app的本质是一道转义过程，编写的uni-app程序会由HBuildX编译成为h5，小程序等等，运行还是要靠第三方本身的工具，所以如果要运行微信小程序，请下载微信小程序开发工具，你不需要自己打开它，把运行目录配置到HBuildX就行
视频学习
请点击前面的链接进入官方推荐教程视频页面，官方的推荐学习，也写了第一步第二步等等，先把基础的看了
如果是初学uni-app的，我还是推荐看腾讯课堂出品的《uni-app 商业级应用实战》
能看到这里的我想应该是有想法要学uni-app了，那我就给你们留个福利吧，腾讯这个视频本身是要钱的，我在这就给大家留个网盘资源了
第二部分-框架简介
生命周期
应用生命周期
大可能性会用到的onLaunch
页面生命周期
大可能性会用到的onLoad、onShow、onReady、onHide、onPullDownRefresh、onReachBottom、onTabItemTap、onShareAppMessage、onPageScroll
注意点
onLaunch只能在App.vue里写
路由
注意点
初学可能会遇到的问题，新建一个页面，访问不到，因为没有配对pages.json文件，需要用到的页面一定要在pages.json里配，第一个配置项就是启动页
跳转方式点击前方的链接自行查看
运行环境判断
这个和vue差不多的，可以用来区分环境，你本地运行会用开发环境，打包会自动用生产环境
页面样式与布局
uni-app内有个自己提供的动态单位upx，宽度定死750个upx，这样就可以用类似百分比的方式设置宽高了；vh是视窗高度百分比
动态修改upx需要使用uni.upx2px函数，否则无法生效
Flex布局
这个布局是真的好用，学会了这个感觉至少静态布局上都没什么难度了，uni-app也推荐使用这种布局
这个布局是真的好用，学会了这个感觉至少静态布局上都没什么难度了，uni-app也推荐使用这种布局
推荐看阮一峰flex教程，点链接
支持npm安装第三方包
小程序组件支持
有一定规范，需要自定义写对应组件的要看看这个
第三部分-Vue注意事项
生命周期
官方建议用onReady代替mounted，用onLoad代替created，为了通用性可读性还是建议听从官方这样做
全局变量的实现方式
推荐Vuex
Class与Style绑定
这个绑定语法和vue有些不同，本质是uni-app帮忙进行了转义，但是uni-app官方的更好用，推荐看下
v-html不支持
跨端非h5不支持v-html，所以这里也不支持，但是有第三方解决方案，点链接
全局组件
有时候可能需要用到全局都可能用到的组件，比如自定义的加载中，404页面的包裹
常见问题技巧
onLoad获得的是前一个页面传递的参数
使用Weex/nvue注意事项
这本来应该是个大主题，但我本身没开发过Weex/nvue就不班门弄斧了，需要用到这个的可以研究下
常见的问题这里可以点下
如果一个页面路由下同时有vue页面和nvue页面，那么在App端，会优先使用nvue页面，在非app端，nvue目前不会被编译
HTML5+注意事项
这里要注意了，新手可能会忽略这也是很重要的一块，在uni-app中是可以直接使用plus模块的，这样可以拓展出很多h5的新功能，这里给个h5的plus文档地址
注意plus模块是给app端使用的，直接运行在浏览器可能会报plus找不到
uni-app不需要 plus ready，如果你用了反而会不起作用
uni-app 中的事件监听
注意uni-app中是没有document的，h5+项目中用document.addEventListener监听，uni-app中用plus.globalEvent.addEventListener代替
第四部分-开发技巧
条件编译
这里在开发中常会用到的，因为要兼容多端，某些在特定端才能使用的代码需要用条件编译包裹
静态文件选择编译
static文件下建环境目录可以自动编译
性能优化
定义在 data 里面的数据每次变化时都会通知视图层重新渲染页面。 所以如果不是视图所需要的变量，可以不定义在 data 中，可在外部定义变量或直接挂载在vue实例上，以避免造成资源浪费
nvue页面使用weex相关组件，实现了页面原生渲染能力，提高了页面流畅性，若对页面性能要求较高可以使用此开发
注意事项
H5开发注意，部署服务器上网站路径如果是www.xxx.com/html5，则在manifest.json记得填写base路径
原生tabbar在app和h5实现不一样会使元素坐标不同，uni-app新增--window-top 和 --window-bottom，这代表了页面的内容区域距离顶部和底部的距离，比如用bottom:var(--window-bottom)表示元素位于底部具体，以tabbar以上开始为0
高效开发技巧
uni-app 常用代码封装成了以 u 开头的代码块，所以输入u会提示很多uni-app封装的代码块直接回车可生成
浏览器h5调试
第五部分-增值服务
运营服务
统一推送unipush
UniPush是DCloud推出的集成型统一推送服务，内建了苹果、华为、小米、OPPO、魅族等手机厂商的系统级推送和个推等第三方推送。
广告变现
打包时可以直接勾上广告
运营统计
DCloud开发的App，自带免费统计平台。
制作统一发行页面
把App、小程序、h5...在一个url里呈现，统一简单的传播到用户侧
在HBuilderX的菜单工具-发行-生成统一发布页面，需要填写发布信息
加入换量联盟
uni-app 发行成原生App后，可加入DCloud换量平台，和其他开发者交叉换量、彼此推广
开放生态
uni-app有自己的插件市场，打造强大开放生态
兼容微信小程序JS SDK
支持npm包管理系统
支持mpvue项目组件
支持Native.js直接调用原生api、支持第三方原生sdk
app端支持weex
App端支持原生插件云打包
选型评估
开源项目资源汇总
第六部分-常见问题
资源在线升级
0 条评论
下一页
