uniapp开发app教程（uniapp 开发app）
今天给各位分享uniapp开发app教程的知识，其中也会对uniapp 开发app进行解释，如果能碰巧解决你现在面临的问题，别忘了关注【本站，现在开始吧！
本文目录一览：
uni-app 入门到精通 （二）
18 年时候有幸接触到 uniapp , 写了一篇 《uni-app 入门到精通》 ，由◥于一些原因，该方案并没有执行，该项目一系列文章也就没有再写下去，所以遭受到了许多人评论的吐槽，到如今公司项目的需求又要根据 uniapp 写 H5 嵌入到 app 中，所以想根据项目实际开发■分享一下，有兴趣的伙伴可以参考和吐槽。
这一︾篇文章主要分享一下内容
uniapp 模板项目有两种初始化方式
由于无法舍弃 VSCode ，我们采用 vue-cli 来初始化①项目， HBuilderX 大家可以参照官方文档
这种方式是可≡以通过」 vue 脚手架命々令指定模板，这个是 dcloudio 的官方提供模板
我们选择默认模板即可，
成功后我们执行
打开浏览器∑ 地址，直接运行即可。
一般刚接触前端的小伙伴可能会对 postcss 不太了解，这里简单介绍█一下，
当然 PostCSS 具体使用是需要引入一些插件的，例如常用的是 autoprefixer postcss-preset-env 等, 具体如何使用大家可以自行参考◎资料，毕竟这块知识还是挺多的就不具体展开△解释了。
通常我们在写移动端时候需要做的是页面适配方案的确定， uni-app 支持的通用 css 单位包括 px、rpx ， 之前的 upx 方案已经被废弃掉，官方解释〖是目前市面上已经基本上支持了微信︼的 rpx 方案，所以 upx 中转方案已经意义不大了，不过还可以继续使用，不过已经不再推荐。
rpx 之初是由微信小程序々提出一种方案，即根据宽度来进行适配以 750 宽屏幕为基准【， 750rpx 恰好为屏幕∩宽度, uni-app 规定屏幕基准宽度 750rpx 。所以说如果你们的UI 设计以 750*1334 iphone 6/6s 为基准设计的话，你只需要将屏幕上 px 写为 rpx 即可，不用做任何换∴算，如果不是的话，你就需要做如下换算：
uniapp 有自己一套路由管理机制，而未采用 vue-route 方案，个人认为这套方案还是比较成熟和好用的，以及可ㄨ以满足我们日常的需求:
保留当前页面，跳转到应用内√的某个页面，使用uni.navigateBack可以返回到︻原页面。
2.uni.redirectTo(OBJECT)
关闭当前页№面，跳转到应用内的某个页面。
3.uni.reLaunch(OBJECT)
关闭所有页面，打开到※应用内的某个页面。
注意： 如果〇调用了 uni.preloadPage(OBJECT)) 不会关闭，仅触发生命周期 onHide
4.uni.switchTab(OBJECT)
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
注意： 如果调用♂了 uni.preloadPage(OBJECT)不会关闭，仅触发生命周期 onHide
5.uni.navigateBack(OBJECT)
关闭当前页∏面，返回上一页面或多级页面。可通过 getCurrentPages() 获取■当前的页面栈，决定需要返回几层。
5.uni.preloadPage(OBJECT)
预加载页面，是一种性能优化技术。被预载的页面，在打开时速度▲更快。
以上路由API 已经满足我↙们的需求，当然进行路由跳转的前提是我们需要在 pages.json 进行路由配置, 包括路由和具体的样式配置
而进行具体路由跳转我们需要如下，需要∑多加一个 /
需要特别注意的一点是, 利用浏览器 在 进行 移动H5页面调试时候，会出现页面刷新之后页面栈会消失，此时navigateBack不能返回，如果一定要返回可以使用history.back()导航到浏览器的其他历史记录。
uniapp 提供网◎络请求的 api 是 uni.request ，具体支持的请求方法可以参考官网 method 有效值
不过我们通常不会直接使用，而是进过一系列的封装以方便我们的使用，具体封装接口使用会在随根据页面数∮据请求一并展示。
uniapp开发App引导页
App的引导页是当用户第一次打开一款App时所展〗示的3-5精︼美的图片，用于告知用户产品的功能及特点。好的引导页会促使用户对产品增加更多的兴趣，当然这是UI设计的能力体现了，尽々管很多人都会快速的滑过。对于开发人员怎么去添加这几张图片只有在用户第一次打开app时展示呢。
以uniapp开发的项目为例：在onLaunch函数中，检查flag是否为false，如果为false,则跳转到引导页面，在引导页中可设置跳◥转到首页。注意，最好用reLaunch，避免，用户物理按键返回；为true，则存储flag到本地。原理既是如◢此■；但是实际开发时，会发现，存在闪屏现象，这样用户的体验就不太好，所以比较关键的地方就在于这块，还是以uniapp为例，需要在uniapp的源码视图ㄨ下将splashscreen的设置↑进行修改，将autoclose改为false，在onLaunch中通过设置延迟时间调用plus.navigator.closeSplashscreen方法来关闭启动图。delay设置为0。这样启动图的设置就ok了。
以下封装了检查是否进入引导页的方法，仅供〒参考下：
Tip:在多次的应用中发现，如果在手机本〇身比较卡的情况下，用户在第一次开启app时，还是会存在首页在引导页之前出现，这种情况的处理方式是将引导页默认设置为主页，即在路由管理中∏，将引导页写在第一个，然后通过flag去判断是否跳转到首页；
以上的引导页开发只是提供一种思路，还有很多其他的方式，比如后端去控制是否展示引导↓页，引导页的动态变化。当然问题本身不难实现，关键在于实际应用时所存在的问题。
uniapp框架开发技巧
//以下摘自官方文档
/*Vue 在更新 DOM 时是异步执行的。只要侦听到数据变♀化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。例如，当你设置 vm.someData = 'new value'，该组件不会立即重新渲染。当刷新队◥列时，组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程，但是如果你想基㊣ 于更新后的 DOM 状态来做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方∮式思考，避免直接接触 DOM，但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新ㄨ完成后被调用。*/
//意思就是vue在更新视图层得数据时是异步得，可是有时∮候我们在代码中想要等待数据完全渲染上去dom节点之后再进行获取节点信息操作。比如使用selectorQuery.select(selector) 等相关api时，如果直接使用有「时候会获取不到正确的数据，此时可以通过this.$nextTick(callback)的方式在回调函数里面进行◥操作dom节点
uniapp开发app教程的介绍就聊到这☉里吧，感谢你花时间阅读本站内容，更多关于uniapp 开发app、uniapp开发app教程的信息别忘了在本站进行查找喔。
