一、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地图api不全
二、使用步骤
1.uniapp开发map说明
使用uniapp是因为它是一个使用vue.js开发所有前端应用的框架，开发者编写一套代码，可以发布到ios，android，web以及各种小程序，快应用等多个平台。使用map地图组件开发，地图组件用于展示地图（使用的时腾讯地图），说一下它的属性有：
longitude（类型为Number，没有默认值，表示中心经度）
latitude（类型为Number，没有默认值，表示中心纬度）
scale（类型为Number，默认值为16，缩放级别取值范围为5-18）
markers（类型为Array数组，类型为数组即表示地图上可以有多个，没有默认值，表示标记点）
polyline（类型为Array数组，没有默认值，表示路线，数组上的所有点连成线）
circles（类型Array数组，表示圆）
controls（类型Array数组，表示控件）
include-points（类型Array数组，表示缩放视野已包含所有给定的坐标点）
enable-3D（类型为Boolean，默认值为false，表示是否显示3D搂块）
show-compass（类型为Boolean，默认值为false，表示为是否显示指南针）
enable-overlooking（类型为Boolean，默认值为false，表示为是否开启俯视）
enable-satellite（类型为Boolean，默认值为false，表示为是否开启卫星图）
enable-traffic（类型为Boolean，默认值为false，表示为是否开启实时路况）
show-location（类型为Boolean，表示显示带有方向的当前定位点）
polygons（类型Array，表示为多边形）
点击属性
@markertap-表示点击标记点时触发，e.detail={markerId}
@labeltap-表示点击label时触发，e.detail={markerId}
@callouttap-表示点击标记点对应的气泡时触发，e.detail={markerId}
@controltap-表示点击控件时触发，e.detail={controlId}
@regionchange-表示视野发生变化时触发
@tap-表示点击地图时触发; App-nuve、微信小程序2.9支持返回经纬度
@updated-表示在地图渲染更新完成时触发
我们在写map组件时，组件的宽/高推荐写直接量，比如说是 750rpx，不要设置百分比值，在uni-app中只支持gcj02坐标。介绍markers属性-类型为数组Array
由之前描述可知，markers属性类型为Array，表示标记点用于在地图上显示标记的位置。这个数组属性，它里面有它的对象配置属性，分别是：
id，表示标记点id，类型为Number，必填项，marker点击事件回调会返回此id，建议为每个marker设置上Number类型id，保证更新marker时有更好的性能。
latitude，纬度，类型Number，必填项，浮点数，范围-90~ 90
longitude，经度，类型Number，必填项，浮点数，范围-180~ 180
title，标注点名，类型String，不是必填，点击时显示，callout存在时将被忽略
iconPath，显示的图标，类型String，必填项，项目目录下的图片路径
rotate，旋转角度，类型Number，不是必填，顺时针旋转的角度，范围 0~ 360，默认为 0
alpha，标注的透明度，类型Number，不是必填，默认1，无透明，范围 0~ 1
width，标注图标宽度，类型Number，不是必填，默认为图片实际宽度
height，标注图标高度，类型Number，不是必填，默认为图片实际高度
callout，自定义标记点上方的气泡窗口，类型Object，不是必填-可识别换行符
label，为标记点旁边增加标签，类型Object，不是必填-可识别换行符
anchor，经纬度在标注图标的锚点，默认底边中点，不是必填，{x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x:.5, y: 1}表示底边中点
marker上的气泡 callout（Object类型） marker数组上属性 callout对象使用属性：
content，文本，String
color，文本颜色，String
fontSize，文字大小，Number
borderRadius，callout边框圆角，Number
bgColor，背景色，String
padding，文本边缘留白，Number
display，'BYCLICK':点击显示;'ALWAYS':常显，String
textAlign，文本对齐方式。有效值: left, right, center，String
marker上的标签 label（Object类型）
content，文本，String
color，文本颜色，String
fontSize，文字大小，Number
x，label的坐标，原点是 marker对应的经纬度，Number
y，label的坐标，原点是 marker对应的经纬度，Number
borderWidth，边框宽度，Number
borderColor，边框颜色，String
borderRadius，边框圆角，Number
bgColor，背景色，String
padding，文本边缘留白，Number
textAlign，文本对齐方式。有效值: left, right, center，String
polyline polyline表示指定一系列坐标点，从数组第一项连线至最后一项
points，经纬度数组，类型为Array，必填，如：[{latitude: 0, longitude: 0}]
color，线的颜色，类型为String，不必填，如：#0000AA
width，线的宽度，类型为Number，不必填
dottedLine，是否虚线，类型为Boolean，不必填，默认值false
arrowLine，带箭头的线，类型为Boolean，不必填，默认值为false
arrowIconPath，更换箭头图标，类型为String，不必填，在arrowLine为true时，默认带箭头的线时生效
borderColor，线的边框颜色，类型为String，不必填
borderWidth，线的厚度，类型为Number，不必填
polygon polygon指定一系列坐标点，根据points坐标数据生成闭合多边形
points，经纬度数组，array，必填，如：[{latitude: 0, longitude: 0}]
strokeWidth，描边的宽度，Number，否
strokeColor描边的颜色，String，否
fillColor，填充颜色，String，否
zIndex，设置多边形 Z轴数值，Number，否
circles circles在地图上显示圆
latitude，纬度，Number，必填，浮点数，范围-90~ 90
longitude，经度，Number，必填，浮点数，范围-180~ 180
color，描边的颜色，String，不必填，如：#0000AA
fillColor，填充颜色，String，不必填，如：#0000AA
radius，半径，Number，必填
strokeWidth，描边的宽度，Number，不必填
controls controls在地图上显示控件，控件不随着地图移动
id，控件id，Number，不必填，在控件点击事件回调会返回此id
position，控件在地图的位置，Object，必填，控件相对地图位置
iconPath，显示的图标，String，必填，项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对项目根目录；也支持临时路径
clickable，是否可点击，Boolean，不必填，默认不可点击
position
left，距离地图的左边界多远，Number，不必填，默认为0
top，距离地图的上边界多远，Number，不必填，默认为0
width，控件宽度，Number，不必填，默认为图片宽度
height，控件高度，Number，不必填，默认为图片高度
注意在uniapp中地图组件的经纬度必填，如果不填，经纬度则默认值是北京的经纬度。 2.uniapp使用map组件基本使用方法使用uniapp开发中的map组件，基本使用方法：
代码如下（示例）：
<map:scale="scale" style="width: 100%; height: 100%;"
enable-3D="false" show-compass="false" enable-overlooking="false"
:enable-satellite="false":enable-traffic="false" show-location="false"
:latitude="latitude":longitude="longitude":markers="covers">
</map>
markers属性的使用，代码如下（示例）：
markers: [{
id: 1,// Number
title:'1',// String-标注点名
rotate: 180,// Number-顺时针旋转的角度，范围 0~ 360，默认为 0
alpha: 0.5,//默认1，无透明，范围 0~ 1
latitude: 39.899,
longitude: 116.39742,
width: 30,
height: 30,
// callout:{
// display:"BYCLICK",
// padding: 10,
// borderRadius: 5,
// content:'',
//},
// anchor:{},
iconPath:'../../../static/location.png',//显示的图标
},{
id: 2,
title:'2',// String
latitude: 39.90,
longitude: 116.39,
callout:{
color:'#007AFF',//文本颜色
bgColor:'#563BFF',//背景色
display:"ALWAYS",//'BYCLICK':点击显示;'ALWAYS':常显
fontSize: 15,
textAlign:'left',//文本对齐方式。有效值: left, right, center
padding: 10,//文本边缘留白
borderRadius: 5,
content:'腾讯地图',
},
label:{
content:'Jeskson',
color:'#000000',
fontSize: 12,
borderWidth: 12,
borderColor:'#007AFF',
borderRadius: 5,
padding: 5,
textAlign:'center',
bgColor:'#563BFF',
},
iconPath:'../../../static/location.png'
}]
三、uniapp开发APP从开发到上架全过程
前端时间受朋友委托帮他开发了一款APP，综合考虑了下，没有上原生，使用了uniapp这一套技术栈来进行开发
uniapp是dcloud推出的一套跨端前端解决方案，可以通过一套代码生成小程序、安卓、IOS、H5等代码，对于中小项目来说是一套绝对的效率利器
技术架构前端采用uniapp
后端使用Thinkphp做后端管理和接口，用到了一套开源的后端管理系统easyadmin，之所以选用他是因为他能够通过一条命令自动生成curd管理页面，并且可以通过配置来快速实现字段表格、搜索等功能，可以说也是一个效率神器了。
数据库采用了最常见的mysql数据库这个没什么好说的
云存储使用了七牛云存储，因为项目中包含了大量的视频资源，因此将静态资源放置到云存储上是一个不错的选择
开发uniapp的开发相对来说还是简单的，开发过Vue或者微信小程序的朋友几乎能无缝上手，只需要浏览下官方文档即可，其API与小程序的API的大同小异，基本将中的标签元素，不同的是普通HTML中使用的是<div>标签，而在uni中使用的是<view>标签，需要注意的是在template下只能包含一个view标签，其他标签则都包含在此标签下边。
第二部分是script包括的JS代码，使用exportdefault对象将JS中的代码导出，内部结构则是Vue的数据结构，包含了data(),methods()等方法和一些uni的生命周期函数。
第三部分则是style标签包裹的css代码，与HTML的css代码如出一辙。
<template><view></view></template><script>exportdefault{data(){return{}},methods:{}}</script><style></style>页面配置uni中编写的所有页面都需要在page.json中进行注册，未注册的页面则无法进行跳转和显示，在page数组中配置页面参数即可，也可以每个页面的对象下边配置style对象来定义页面的标题栏等信息
通过配置globalStyle对象可以实现APP全局相关参数的配置，具体配置项可以参考uniapp官方文档(uni-app官网)
另外也可以通过配置tabBar对象来实现自动生成APP的标签TAB
APP.VUE
app.vue是整个项目的主入口，在此处的onLaunch在APP初启动的时候会进行调用，可以在此处做一些APP初始化的相关操作
<script>exportdefault{onLaunch:function(){console.log('ApponLaunch')},onShow:function(){console.log('AppShow')},onHide:function(){console.log('AppHide')}}</script>同样，在此页面编写的css也会对所有页面起作用，可以将一些全局的css放在此处，如主题色之类。
APP设置manifest.json是整个项目的设置文件，涵盖了项目的AppId、应用名称、版本以及APP、小程序的相关设置，通过Hbuilder编辑器可以以可视化的方式对项目进行设置，也可以通过源码视图来对项目进行设置
请求封装作为一款可以上线运营的APP，必然是要可以展示各类数据的，而展示数据就需要对接后端API来进行，为了方便开发和后边维护，可以将请求单独封装为一个文件来进行统一处理。
在项目根目录创建common文件夹，新建http.js文件，在uni中想要引用外部Js，同样需要使用exportdefault将方法导出，因此http.js中最后编写完的函数也要通过exportdefault{变量名称}的形式进行导出。
uni提供了一个请求数据的API,uni.request(uni.request(OBJECT)|uni-app官网(dcloud.net.cn))我们基于此API对请求进行封装，方便在调用接口的时候进行使用。
constbaseUrl='https://www.xxx.com/api/';/*封装ajax函数*@param{string}opt.typehttp连接的方式，包括POST和GET两种方式*@param{string}opt.url发送请求的url*@param{boolean}opt.async是否为异步请求，true为异步的，false为同步的*@param{object}opt.data发送的参数，格式为对象类型*@param{function}opt.successajax发送并接收成功调用的回调函数*/functiongetHeader(){//header头部return{"Accept":"application/json",'Content-Type':'application/json;charset=utf-8',//appheader头//'Content-Type':'application/x-www-form-urlencoded',//h5header头//'ACCESS_TOKEN':`${token}`,};}constajax=function(opt){uni.showLoading({//title:"提交中"})opt=opt||{};opt.method=(opt.method&&opt.method.toUpperCase())||'POST';opt.url=baseUrl+opt.url||'';opt.async=opt.async||true;opt.data=opt.data||null;opt.success=opt.success||function(){};opt.fail=opt.fail||function(){};opt.complete=opt.complete||function(){};uni.request({method:opt.method,dataType:'json',url:opt.url,data:opt.data,header:getHeader(),success:(res)=>{uni.hideLoading()//console.log(res)if(res.data.code==200){opt.success(res.data);}else{uni.showToast({title:res.data.message,icon:"none"})opt.fail(res);}},fail:(res)=>{uni.hideLoading()console.log(res)uni.showToast({title:res.data?res.data.message:'网络连接失败',icon:"none"})console.log(opt)opt.fail(res);},complete:(res)=>{uni.hideLoading()opt.complete(res);},})}为了统一管理，我将所有的后端API路径也都放在此处
constbindAjax=function(data,success,fail){ajax({url:'xxx/xxx',method:'POST',data:data,success:function(res){if(res.code==200){success(res.data)}},fail:(e)=>{fail(e)}})}然后通过erxport将我们定义好的方法名暴露即可
exportdefault{ajax,bindAjax}最后，想要在页面中调用，还需要在main.js中创建全局变量
importhttpfrom'./common/http.js';Vue.prototype.http=http;这样我们就可以在页面中使用this来进行调用了
this.http.bindAjax({a:1,b:2}(e)=>{//成功后返回的数据console.log(e)},(e)=>{//请求失败})完整文件看这里(1条消息)uniapp统一请求封装-Javascript文档类资源-CSDN文库
插件引用uniapp的另一个优点就是插件足够多，这样可以避免开发者重复造轮子，对于常用的插件开发者可以直接引用，极大的节省开发时间和成本。
访问Dcloud插件市场(DCloud插件市场)即可以搜索需要的插件，如我们需要一块类似淘宝那样的搜索插件，就可以直接搜索“搜索插件”来进行检索
找到我们需要的插件后，可以直接在插件详情页右侧选择使用HbuilderX导入插件，就可以将插件自动导入我们的项目中
需要注意的是，要注意插件的平台兼容性，许多插件是专门为某个平台如微信小程序获安卓APP等进行设计的，那个如果我们将此插件使用到其他平台上则可能会引发兼容问题
接下来，我们就可以开始愉快的编码了~
下一篇，使用Hbuilder进行真机测试，敬请期待！
感谢您的阅读！希望本文对解决您关于uniapp常用api的问题有所帮助。如果您还有其他疑问，欢迎随时向我们提问。
