uni-app 介绍
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
创建 —— 运行 —— 打包——发布
创建：
1.通过 HBuilderX 创建
HBuilderX官网：https://www.dcloud.io/hbuilderx.html
在点击工具栏里的文件 -> 新建 -> 项目：
2.选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。
运行：
1.浏览器运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可在浏览器里面体验uni-app 的 H5 版。
2.真机运行：连接手机，开启USB调试，进入hello-uniapp项目，点击工具栏的运行 -> 真机运行 -> 选择运行的设备，即可在该设备里面体验uni-app。
3.在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。
在QQ，百度，支付宝等小程序开发工具里运行：内容同上，不再重复。
打包：
打包为原生App（云端）
在HBuilderX工具栏，点击发行，选择原生app-云打包，如下图：
出现如下界面，点击打包即可：
打包完成！！！
发布为小程序
1.申请微信小程序AppID，参考：微信教程。
2.在HBuilderX中顶部菜单依次点击 “发行” => “小程序-微信”，输入小程序名称和appid点击发行即可在 unpackage/dist/build/mp-weixin 生成微信小程序项目代码。
3.在微信小程序开发者工具中，导入生成的微信小程序项目，测试项目代码运行正常后，点击“上传”按钮，之后按照 “提交审核” => “发布” 小程序标准流程，逐步操作即可，详细查看：微信官方教程。
uni-app 路由跳转
类似于微信小程序跳转方法
1.uni.navigateTo(OBJECT)
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
示例：
2.uni.redirectTo(OBJECT)
关闭当前页面，跳转到应用内的某个页面。
示例：
3.uni.reLaunch(OBJECT)
关闭所有页面，打开到应用内的某个页面。
示例：
4.uni.switchTab(OBJECT)
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
示例：
5.uni.navigateBack(OBJECT)
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
示例：
6.uni.preloadPage(OBJECT)
预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快。
示例：
H5 平台
预加载 /pages/test/test 对应的js文件，不执行页面预渲染逻辑
App-nvue 平台
预加载nvue页面 /pages/test/test
配置tabbar
如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。
在page.json中配置：
接口请求
使用uni提供的request，封装API
创建一个js文件
组件的使用
uni-app中的组件属于小程序组件+vue组件相结合
生命周期
应用生命周期
onLaunch-------------------------------- 当uni-app 初始化完成时触发（全局只触发一次）
onShow---------------------------------- 当 uni-app 启动，或从后台进入前台显示
onHide -------------------------------------当 uni-app 从前台进入后台
onUniNViewMessage----------------- 对 nvue 页面发送的数据进行监听
页面生命周期
export default {
data() {
return {
title: ‘Hello’
}
},
onl oad() {
console.log(‘页面加载’)
},
onShow() {
console.log(‘页面显示’)
},
onReady(){
console.log(‘页面初次显示’)
},
onHide() {
console.log(‘页面隐藏’)
},
onUnload() {
console.log(‘页面卸载’)
},
onBackPress(){
console.log(‘页面返回…’)
},
onShareAppMessage() {
console.log(‘点击分享’)
},
onReachBottom() {
console.log(‘下拉加载…’)
},
onPageScroll(){
console.log(‘页面滚动…’)
},
onPullDownRefresh() {
console.log(‘上拉刷新…’)
// uni.stopPullDownRefresh(); //停止下拉
},
methods: {
}
}
组件生命周期
组件生命周期（与vue标准组件的生命周期相同）
beforeCreate --------------------------------------在实例初始化之后被调用
created----------------------------------------------在实例创建完成后被立即调用
beforeMount-----------------------------------------在挂载开始之前被调用
mounted----------------------------------------------挂载到实例上去之后调用（该钩子在服务器端渲染期间不被调用）
beforeUpdate---------------------------------------数据更新时调用，发生在虚拟 DOM 打补丁之前（该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行）
updated --------------------------------------------由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子（该钩子在服务器端渲染期间不被调用）
beforeDestroy-------------------------------------实例销毁之前调用。在这一步，实例仍然完全可用（该钩子在服务器端渲染期间不被调用）
destroyed ------------------------------------------Vue 实例销毁后调用（该钩子在服务器端渲染期间不被调用）
uniapp中 nvue是什么？描述一下他的特点
在App端，如果使用vue页面，则使用webview渲染；如果使用nvue页面(native vue的缩写)，则使用原生渲染。一个App中可以同时使用两种页面，比如首页使用nvue，二级页使用vue页面，hello uni-app示例就是如此。
虽然nvue也可以多端编译，输出H5和小程序，但nvue的css写法受限，所以如果你不开发App，那么不需要使用nvue。
vue文件走的webview渲染
nvue走weex方式的原生渲染
nvue优势
需要高性能的区域长列表或瀑布流滚动。webview的页面级长列表滚动时没有性能问题的（就是滚动条覆盖webview整体高度），但页面中某个区域做长列表滚动，则需要使用nvue的list、recycle-list、waterfall等组件。这些组件的性能要高于vue页面里的区域滚动组件scroll-view。
复杂高性能的自定义下拉刷新。uni-app的pages.json里可以配置原生下拉刷新，但引擎内置的下拉刷新样式只有雪花和circle圈2种样式。如果你需要自己做复杂的下拉刷新，推荐使用nvue的refresh组件。当然插件市场里也有很多vue下的自定义下拉刷新插件，只要是基于renderjs或wxs的，性能也可以商用，只是没有nvue的refresh组件更极致。
左右拖动的长列表。在webview里，通过swiper+scroll-view实现左右拖动的长列表，前端模拟下拉刷新，这套方案的性能不好。此时推荐使用nvue，比如新建uni-app项目时的新闻示例模板，就采用了nvue，切换很流畅。
实现区域滚动长列表+左右拖动列表+吸顶的复杂排版效果，效果可参考hello uni-app模板里的swiper-list
如需要将软键盘右下角按钮文字改为“发送”，则需要使用nvue。比如聊天场景，除了软键盘右下角的按钮文字处理外，还涉及聊天记录区域长列表滚动，适合nvue来做。
解决前端控件无法覆盖原生控件的层级问题。当你使用map、video、live-pusher等原生组件时，会发现前端写的view等组件无法覆盖原生组件，层级问题处理比较麻烦，此时使用nvue更好。或者在vue页面上也可以覆盖一个subnvue（一种非全屏的nvue页面覆盖在webview上），以解决App上的原生控件层级问题。
如深度使用map组件，建议使用nvue。除了层级问题，App端nvue文件的map功能更完善，和小程序拉齐度更高，多端一致性更好。
如深度使用video，建议使用nvue。比如如下2个场景：video内嵌到swiper中，以实现抖音式视频滑动切换；nvue的视频全屏后，通过cover-view实现内容覆盖，比如增加文字标题、分享按钮。
直播推流：nvue下有live-pusher组件，和小程序对齐，功能更完善，也没有层级问题。
对App启动速度要求极致化。App端v3编译器模式下，如果首页使用nvue且在manifest里配置fast模式，那么App的启动速度可以控制在1秒左右。而使用vue页面的话，App的启动速度一般是3秒起，取决于你的代码性能和体积。
vue优势
canvas。nvue的canvas性能不高，尤其是Android App平台，所以这个组件干脆没有内置，而是需要单独引入。操作canvas动画，最高性能的方式是使用vue页面的renderjs技术，在hello uni-app里的canvas示例就是如此。
动态横竖屏。nvue页面的css不支持媒体查询，所以横竖屏动态切换、动态适配屏幕是很困难的。
如何进行存储数据，获取数据
存——通过uni.setStorage：
uni.setStorage({
key:“属性名”，
data:“值”
})
取——通过 uni.getStorage：
uni.getStorage({
key:“属性名”,
success(e){
e.data//这就是你想要取的token
}
})
css像素单位使用什么最合适
rpx 1rpx = 0.5px 1px = 2rpx
vw 1vw等于视口宽度的1%
vh 1vh等于视口高度的1%
标签：nvue,微信,app,介绍,组件,uni,页面 来源： https://blog.csdn.net/ChinaW_804/article/details/110672106
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。