uniApp
作者：互联网
文章目录
什么是uni-app？
uni-app 是使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。
1.搭建环境
上官网安装一下开发工具
这里送上连接 www.dcloud.io/hbuilderx.h…
然后需要安装微信开发者工具 最好用最新的
如果直接写app的话 可以安装模拟器 我自己安装的是Android Studio 如果是mac 再安装Xcode 就可以双端撸起来了
然后用开发工具 创建一个模板
2.使用vuex
uni-app已经内置vuex 不需要再安装了
在根目录下新建store文件 在其目录创建index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
text: 'demo'
},
mutations: {
SetText(state, v) {
state.text = v
}
},
actions: {
setText: function({commit}, v) {
commit('SetText', v)
}
}
})
export default store 复制代码
然后在main.js入口文件
import Vue from 'vue'
import App from './App'
// 这里引入store
import store from './store'
// 这里是重要的一步 这里不写 app会找不到store
Vue.prototype.$store = store
const app = new Vue({
store,
...App
})
app.$mount()
3.配置
打开manifest.json 这里是可视化的
mac这边还有一个坑 需要配置微信开发者工具的路径 打开偏好设置
如果不配置 一直会报错 如果出现启动不了微信开发者工具 可以自己找到编译好的目录 自己手动导入就可以了
4.获取节点
支持微信小程序 H5 APP 其他没有测试
uni.createSelectorQuery()
// 官方说自定义组件模式 要这样写
uni.createSelectorQuery().in(this)复制代码
这里需要注意一点 要在onReady这个生命周期里面才能获取到
5.都有哪些项目上出现的问题，以及如何解决的
配置Tabber不能自动生成文件，需要手动配置才可以。
跳转Tabber页面不能传参，需要使用本地存储。
跳转Tabber页面，uni.navigateTo()不可以跳转，只能通过uni.switchTab()才可以。
使用uni.navigateBack()不可以回退到Tabber页面，只能通过uni.switchTab()才可以。
6.从uniapp使用的开发软件，到创建，到运行，如何打包不同平台的代码，如何打包apk，云打包，如何运行在不同的端
uniapp使用的开发软件是HBuilder X。
创建项目直接在编辑器左侧右击创建项目即可，把默认选项更改到uni-app上，下方有多种模板可以选择。
运行就是在编辑软件上方，点击运行就即可，可选运行的方式有： 运行到浏览器、内置浏览器、手机或者模拟器、小程序模拟器、终端都可以。
打包到不同平台上：
H5，spa应用，必须在服务器环境下运行
多看官方文档，打包涉及到支付、以及各平台兼容性，通过
官方API链接如下： https://uniapp.dcloud.io/platform
H5打包
Android/IOS打包
微信小程序打包
新建文件夹，把代码拷贝进去即可，再填写好appid即可.
7.uniapp怎么进行路由跳转
有两种方式：
第一种是uniApp自带的组件navigator进行页面跳转。
该组件类似HTML中的<a>组件，但只能跳转本地页面。目标页面必须在pages.json中注册。
第二种是Api方法
uni.navigateTo(OBJECT) 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
uni.redirectTo(OBJECT) 关闭当前页面，跳转到应用内的某个页面。
uni.reLaunch(OBJECT) 关闭所有页面，打开到应用内的某个页面。
uni.switchTab(OBJECT) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
uni.navigateBack(OBJECT) 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
uni.preloadPage(OBJECT) 预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快。
8.怎么配置tabbar
在pages.json文件里： 需要在文件目录里创建vue文件，在pages配置好，在用tabBar属性下的list配置。
以下代码就是配置好的tabBar
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index" // 首页
},
{
"path": "pages/dynamic/dynamic" // 动态
},
{
"path": "pages/news/news" // 消息
},
{
"path": "pages/my/my" // 我的
}
],
// 底部显示的tabber
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#ff557f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"height": "50px",
"fontSize": "10px",
"iconWidth": "24px",
"spacing": "3px",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/img/jiarufangjian-01.png",
"selectedIconPath": "./static/img/xihuan.png",
"text": "首页"
},
{
"pagePath": "pages/dynamic/dynamic",
"iconPath": "static/img/xingqu.png",
"selectedIconPath": "./static/img/xihuan.png",
"text": "动态"
}, {
"pagePath": "pages/news/news",
"iconPath": "static/img/naozhong.png",
"selectedIconPath": "./static/img/xihuan.png",
"text": "消息"
},
{
"pagePath": "pages/my/my",
"iconPath": "static/img/haoyou.png",
"selectedIconPath": "./static/img/xihuan.png",
"text": "我的"
}
]
}
9.如何请求接口
我一般都是创建一个utils文件夹，在文件下创建一个request.js文件，文件结构如下：
let request = function(url, data = {}, method ) {
// 这是Loading加载
uni.showLoading({
title: '加载中',
})
// 返回一个Promise url地址，data传递的参数，method请求方式
return new Promise((resolve, reject) => {
// uni.request是uniApp内置的api
uni.request({
// 以下都是简介与法
url,
data,
method,
header:{
token:uni.getStorageSync("token")
},
// 成功函数
success: (res) => {
resolve(res)
},
// 失败函数
fail: (res) => {
reject(res)
},
// 不管成功或者失败都会触发
complete: (res) => {
// 关闭Loading加载
uni.hideLoading()
}
});
})
}
// 默认导出
module.exports = {
request
}
10.如何使用组件
内置的组件直接用就可以了，在插件库的需要下载插件，下载完成后要在当前页引入这个组件，还要再component注册组件,或者在main.js里直接引用就可以全局使用了。
11.基础语法是什么
uniApp 的基础语法和VUE一模一样 只有路由跳转和本地存储有语法差异
12.生命周期都有哪些
uni-app支持如下页面生命周期函数:
onLoad 监听页面加载,其参数为上个页面传递的数据,参数类型为object(用于页面传参),示例中可参考
onShow监听页面显示
onReady监听页面初次渲染完成
onHide监听页面隐藏
onUnload监听页面卸载
onPullDownRefresh监听用户下拉动作
onReachBottom页面上拉触底事件的处理函数
onShareAppMessage用户点击右上角分享 微信小程序
onPageScroll监听页面滚动
onTabItemTap当前是tab页时,点击tab触发
应用生命周期函数：
onLaunch当uni-app初始化完成时触发（全局只触发一次）
onShow当uni-app启动，或从后台进入前台显示
onHide当uni-app从前台进入后台
onUniNViewMessage对nvue页面发送的数据进行监听
13.uniapp中 nvue是什么？描述一下他的特点
1、uni-app是逻辑和渲染分离的，渲染层在app端提供了两套排版引擎。
小程序方式的webview渲染，和weex方式的原生渲染，两种渲染引擎可以自己根据需要选
2、vue文件走的webview渲染
nvue走weex方式的原生渲染
3、组件和js写法是一样的，css不一样，原生排版的能用的css必须是flex布局
4、uni-app的App端内置了一个基于weex改进的原生渲染引擎，提供了原生渲染能力。
在App端，如果使用vue页面，则使用webview渲染；如果使用nvue页面(native vue的缩写)，则使用原生渲染。一个App中可以同时使用两种页面，比如首页使用nvue，二级页使用vue页面，hello uni-app示例就是如此。
5、虽然nvue也可以多端编译，输出H5和小程序，但nvue的css写法受限，所以如果你不开发App，那么不需要使用nvue。
nvue 和 vue 相互通讯
在 uni-app 中，nvue 和 vue 页面可以混搭使用。
14.如何进行存储数据，获取数据
可以通过本地存储：
uni.setStorage 异步存储数据
uni.setStorageSync 同步存储数据
uni.getStorage 异步获取数据
uni.getStorageSync 同步获取数据
uni.removeStorage 删除指定的本地数据
uni.removeStorageSync 删除指定的本地数据
uni.clearStorage 清空本地数据
uni.clearStorageSync 清空本地数据
15.css像素单位使用什么最合适
ni-app 使用 upx 作为默认尺寸单位， upx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。
举例说明：
若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在uni-app里面的宽度应该设为：750 * 100 / 640，结果为：117upx。
若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在uni-app里面的宽度应该设为：750 * 200 / 375，结果为：400upx。
动态绑定的 style 不支持直接使用 upx。
注意：应尽量避免将样式写在静态样式中
标签：uniApp,nvue,app,跳转,uni,pages,页面 来源： https://blog.csdn.net/hrj970808/article/details/110673328