前端神级框架uni-app详解(一)初学
2019-06-25 16:50:21 11 举报
AI智能生成
前端神级框架uni-app详解,这是一个一次编写可在android、ios、h5、微信小程序、百度小程序、支付宝小程序、头条小程序运行的框架
作者其他创作
大纲/内容
前端神级框架uni-app详解(一)初学
uni-app框架演示示例
第一部分-如何学习
官网学习
地址
官网地址
这里你可以大致了解下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也推荐使用这种布局
推荐看阮一峰flex教程,点链接
阮一峰的flex教程
支持npm安装第三方包
NPM支持
小程序组件支持
有一定规范,需要自定义写对应组件的要看看这个
第三部分-Vue注意事项
官方建议用onReady代替mounted,用onLoad代替created,为了通用性可读性还是建议听从官方这样做
全局变量的实现方式
全局变量的几种实现方式
推荐Vuex
Class与Style绑定
Class 与 Style 绑定
这个绑定语法和vue有些不同,本质是uni-app帮忙进行了转义,但是uni-app官方的更好用,推荐看下
v-html不支持
跨端非h5不支持v-html,所以这里也不支持,但是有第三方解决方案,点链接
富文本/渲染/显示/图文混排方案。rich-text和uparse的区别
全局组件
有时候可能需要用到全局都可能用到的组件,比如自定义的加载中,404页面的包裹
常见问题技巧
常见问题
onLoad获得的是前一个页面传递的参数
使用Weex/nvue注意事项
这本来应该是个大主题,但我本身没开发过Weex/nvue就不班门弄斧了,需要用到这个的可以研究下
常见的问题这里可以点下
如果一个页面路由下同时有vue页面和nvue页面,那么在App端,会优先使用nvue页面,在非app端,nvue目前不会被编译
HTML5+注意事项
这里要注意了,新手可能会忽略这也是很重要的一块,在uni-app中是可以直接使用plus模块的,这样可以拓展出很多h5的新功能,这里给个h5的plus文档地址
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路径
H5 开发注意
原生tabbar在app和h5实现不一样会使元素坐标不同,uni-app新增--window-top 和 --window-bottom,这代表了页面的内容区域距离顶部和底部的距离,比如用bottom:var(--window-bottom)表示元素位于底部具体,以tabbar以上开始为0
高效开发技巧
uni-app 常用代码封装成了以 u 开头的代码块,所以输入u会提示很多uni-app封装的代码块直接回车可生成
浏览器h5调试
使用 Chrome 调试 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端支持原生插件云打包
选型评估
开源项目资源汇总
第六部分-常见问题
资源在线升级
uni-app 资源在线升级/热更新
0 条评论
回复 删除
下一页