好程序员web前端培训分享之uni-app学习笔记uni-app详解

好程序员web前端培训分享之uni-app学习笔记uni-app详解，uni-app (一套代码,多端发行)如果你会使用Vue那咱们继续吧!
什么是uni-app?
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序等多个平台。
诞生背景
多端泛滥 iOS、Android、H5、以及各种小程序多套平台,多套文档,加大开发维护成本
uni-app特点
1、跨平台
一套代码多端发行,而不失优雅(条件编译,保留不同平台独有特色功能方法调用)

只会编译小程序 ​
只会编译XXX
2、通用技术栈,学习成本低
Vue的语法,微信小程序Api,内嵌mpvue可以直接迁移,如果你会Vue可以直接入门
3、生态丰富
支持npm下载第三方模块,支持小程序自定义组件,SDK,兼容mpvue组件,支持原生混合编码
安装
可以下载两个进行配置 ,测试微信小程序与支付宝小程序同步实现
编译工具下载HBuilderX
微信小程序开发IDE
支付宝小程序 IDE
推荐使用 HBuildX 进行开发
跨多端小程序开发
创建目录
.打开HBuilderX
.左上角创建项目
.选择uni-app项目
.下面是提供几个Demo项目，可以创建学习
.项目名称能不能大写，创建项目
运行项目
一、找到创建项目uni里面的项目目录
二、找到 manifest.js文件输入
1、里面有所有平台配置文件
需要不通平台测试,需要分别配置不同平台
2、选择微信小程序配置
配置小程序AppID
点击最上面工具栏选择运行
选择运行到小程序模拟器
选择微信小程序开发工具
第一次配置小程序开发者工具,需要打开服务
三、打开微信小程序开发左上角小
安全设置，将服务端口开启。||工具 -> 设置 -> 安全设置，将服务端口开启。
四、选择HBuild停止服务,重新运行自动打开编辑工具
.nvue 是对weex的增强。如果你不开发App，那么你不太需要nvue。
发布测试
选择HBuild最上面工具栏,点击发布进行打包,根据命令行提示在点击微信开发者工具发布
注意不要直接修改微信开发工具目录,以HBuild开发目录为主
目录介绍
与小程序配置相似
pages //存放分页目录static //存放应用引用静态资源main.js //入口文件mainfest.json //跨平台所有配置项文件pages.json //全局配置文件,类似App.json uni.scss//全局scss文件,在分页任何位置,注意 style lang=“scss” 需要设置 scssApp.vue // 应用配置，用来配置App全局样式以及监听
统一参照uni-app官方文档
初探uni-app
添加分页
.鼠标移动pages右键
.右键新建页面,注意检查pages.json文件会自动写入pages项,文件路径
pages.json文件 style 为分页配置项,类似小程序 page.json
修改 pages.json
知识点: uni-app分页配置在style里面写,globalStyle写全部样式配置,在一个配置文件,这里是有区别原生小程序开发,具体参照uni-app文档进行配置 pages.json
配置项
配置项
navigationBarBackgroundColor HexColor //#000000 导航栏背景颜色 navigationBarTextStyle String white //导航栏标题颜色，仅支持 black/white navigationBarTitleText String //导航栏标题文字内容 navigationStyle String default //导航栏样式，仅支持 default/custom。 backgroundColor HexColor //#ffffff 下拉窗口的背景色 微信小程序
全局配置
globalStyle: {
//…全局配置}
局部配置 参照 pages.style内容

pages数组,决定谁排在前面
修改pages导致文件查找失败,检查无误,重启编辑工具
pages:[
{
path: “xxx/xxx/xxx”,
style: {
//…局部配置 }
}]
系统自带底部tabBar栏配置
如果配置tabBar需要保证abBar第一个路由,配置在第一个pages的第一个
“tabBar”: {
“color”: “#7A7E83”,
“selectedColor”: “#3cc51f”,
“borderStyle”: “black”,
“backgroundColor”: “#ffffff”,
“list”: [{
“pagePath”: “pages/component/index”,
“iconPath”: “static/image/icon_component.png”,
“selectedIconPath”: “static/image/icon_component_HL.png”,
“text”: “组件”
}, {
“pagePath”: “pages/API/index”,
“iconPath”: “static/image/icon_API.png”,
“selectedIconPath”: “static/image/icon_API_HL.png”,
“text”: “接口”
}]
}
常用基本操作
优先尝试根据Vue使用操作,例如使用 v-for 替换wx:for
表达式
仅此而已,有Vue使用相似,不能使用流程控制语句
{{name}}
​{{msg+‘Msea’}} {{10-9}} {{0||“NB”}}
​ {{‘Msea’.indexOf(‘xxx’)!==-1?‘太原最靓仔’:‘no’}}{{“我爱北京天安门”.substr(0,2)}}
属性绑定

动态样式
{{1+1}} 666777
指令
v-show
​{{‘欢迎’+name+‘登陆’}}未登陆!!!
​{{val}}

遍历

{{ item.message }}

​

{{ index }}. {{ name }}: {{ value }}

路由跳转 页面栈最多十层。使用uni.navigateTo频繁切换,会导致栈溢出,跳转失败 // 非tabbar配置的页面我们使用 navigateTo跳转时保留老页面,一般用于需要返回uni.navigateTo({ url: "../one/one?name=Msea"})// 跳转pages.json>tabbar>配置过的页面,使用 switchTabuni.switchTab({ url: "../one/one"})// 不保留当前页面,跳转非配置页面uni.redirectTo({ url: "../one/one"}) 响应式单位rpx 推荐使用最近公告推荐使用rpx替代upx 基于苹果6 1px =2rpx .在one分页内直接使用van-button组件,不需要引入 .注意如果报错,检查路径如果没有问题,可以选择重编辑器重新启动微信开发工具 常用API调用 获取用户授权弹窗

定位
uni.getLocation({
type: ‘gcj02’, //腾讯地图坐标系 success:(res)=> {
const latitude = res.latitude
const longitude = res.longitude
}})
用户授权弹窗
app.json配置文件
//app.json{
“pages”: [“pages/index/index”],
“permission”: {
“scope.userLocation”: {
“desc”: “熊猫创客需要获取您的位置亲” // 高速公路行驶持续后台定位
}
}}
获取当前位置并移动地图中心店
wx.getLocation({
type: ‘gcj02’, //腾讯地图坐标系 success: (res) => {
const latitude = res.latitude
const longitude = res.longitude
var temp = {
iconPath: “/assets/img/local.png”,
id: 0,
width: 25,
height: 25,
latitude,
longitude
}
var markers = this.data.markers;
markers.push(temp);
this.setData({
markers
}, () => {
var data = {
latitude,
longitude
};
this.mapCtx.moveToLocation(data)
})
}})
vuex
uni-app已经内置了vuex
.在项目的根目录下，创建一个名为store的文件夹然
import Vue from 'vue’import Vuex from 'vuex’Vue.use(Vuex)const store = new Vuex.Store({
state: {
num:0
},
mutations: {
add(store){
store.num++;
}
},
actions: {}})export default store
.main.js入口文件引入
import store from './store’Vue.prototype.$store=store;constapp=newVue(...App,store)app.$mount()
.组件内引入


{{num}}
test1

条件编译
可以安装支付宝小程序进行测试
#ifdef %PLATFORM%
//这些代码只在该平台编译 #endif
#ifdef ： if defined 仅在某个平台编译#ifndef ： if not defined 在除里该平台的其他编译#endif ： end if 结束条件编译%PLATFORM% 需要编译的平台，上面的MP就是各个小程序的意思
常用 %PLATFORM% h5 h5平台MP-WEIXIN 微信小程序MP-ALIPAY 支付宝小程序MP-BAIDU 百度小城MP-TOUTIAO 头条小程序
总结: 优先使用Vue用法,只要实现微信开发,支持wx,ui,api,统一使用uni的Api,多看文档