记录篇 ---- 初学uni-app

公司需要做一个安卓的APP，其实我刚开始我确实什么都不懂，只知道APP是什么，但是关于它怎么做成的一无所知，在闷头闷脑的找资料、咨询之后终于在9月中旬开始着手做这个项目了，我们选择uni-app来做为前端的框架，因为uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到IOS、Android、H5、以及各种小城等多个平台。虽然公司目前要求只是针对Android，但难免之后要应用到其他平台，所以选择这个框架是比较妥当的。好吧…废话不多说了，开始正式学习吧~~

官方文档地址：https://uniapp.dcloud.io/README

一、快速创建以及常用注意事项

1.快速创建一个uni-app项目

① 通过HBuilder可视化界面
② 通过vue-cli命令行

以上两种方法在文档中都有详细介绍，我就不仔细说明了，请自行查看文档。
我们在创建的时候会发现官方已经给我们创建好了很多模板，我们只需要下载就可以直接用了，会方便很多，而一些功能不全的组件也有插件市场为我们提供，插件市场地址：https://ext.dcloud.net.cn/

2.常用的注意事项

（1）代码风格

① 代码中不使用<div>和<span>，取而代之的是<view>，多了<picker>等组件。
② 不存在vue中的router路由，但有page.json来代替路由，和微信小程序的配置类似，具体配置请自行查看文档。
③ 数据渲染与vue的相同，数据的双向绑定依旧存在。

（2）生命周期

在子组件中是无法使用onLoad这类的页面生命周期的，原因是组件会使uni-app的生命周期失效。但是组件中可以使用vue
的生命周期函数（如created等）

（3）v-for渲染列表

需要添加 :key来指定列表中项目的唯一的标志服 ，否则会报warning。如果确定列表是静态不会发生该的话，也可以不用
添加，但此处还是建议养成好习惯，在写完v-for后加上 :key 。(毕竟有时候像这种小错误找很久会浪费时间，影响心情)

（4）在移动设备上，touchstart 事件与 click 事件会发生冲突

此处推荐文章： https://www.cnblogs.com/wangjae/p/8540238.html

文章有讲解其原因以及解决方案。

（5）导航栏

① 导航栏由于不符合项目的要求，不得不自定义一个导航栏。在自定义顶部导航栏时要注意在page.json中设置
navigationStyle为custom或titleNView为false，此时原生导航栏就不显示了，当然也可以使用插件市场中的自定义导航栏。
② 底部导航栏的层级在整个项目中的每个页面层级是最高的，这也导致页面的遮罩层无法将其覆盖，所以自定义也是有必要
的，推荐使用插件市场中的底部导航插件：https://ext.dcloud.net.cn/plugin?id=684。

我们要善于学会使用插件市场，当然，对于从插件市场上下载的组件，我们可以根据个人需要去修改其源码，这样会使我们
的项目变得简洁、明了。

（6）网络请求时，H5端能正常显示，但移动端会报错：request:fail abort

这个主要是安卓端的ssl验证有问题导致的，App-Android平台 新增 uni.request 网络请求增加参数 sslVerify，配置
是否验证 ssl 证书。但建议使用普遍受信的证书而不是忽略证书校验。

二、项目中的具体问题

1.页面跳转并携带参数

	① uni.navigateTo(Object)
	② uni.redirectTo(Object)
	③ uni.reLaunch(Object)
	④ uni.switchTab(Object)
	⑤ uni.navigateBack(Object)  // 返回

注：

■ 以上跳转除了第5个不能携带自定义的参数，其他均可。具体请自行查看官网。
■ 携带的参数在将要跳转页面的onLoad生命周期函数中获取。
■ 此种方式跳转不可携带对象，但可将对象转为字符串传递过去,encodeURIComponent()函数会对传入的字符串对象重新编码：

let obj = {a: '1', b: '2'}
uni.navigateTo({
	url: 'test?params='+encodeURIComponent(JSON.stringify(obj))
})

2.监听手机实体键和左右滑动返回

onBackPress(){
	// 逻辑处理代码
	return true  // 返回true 表示不会执行默认的返回事件	
}

此函数中不可使用uni.navigateBack()，否则会造成死循环。

3.数据渲染

数据渲染与vue是相同的，只要js改变数据，相应的页面也会发生改变。当页面的数据渲染出现不显示的情况，主要是检查代码问题。
① v-for：循环的数组是否有数据，后台传到前端的数据最好打印一下，查看数据以及结构是否正确。
② 后端获取的数据层级过多，此时在data中设置的存储容器就不能仅仅设置为此数据的类型了，而是需要将此数据的结构
整体设置进去，如下：

后台获取的数据格式：
{
	title1: {
		text: '',
		content: []	
	},	
	title2: {
		text: '',
		content: []	
	},	
	title3: {
		text: '',
		content: []	
	}
}

此时在data中设置的容器属性格式应与之对应：
data() {
	return {
		obj: {
			title1: {
				text: '',
				content: []	
			}
		}	
	}	
}

4.uni.request

示例：

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

以上是官网示例，在此建议使用第三方封装的拦截器配合request请求来用，即能统一管理，也方便后期维护。推荐插件地址：https://ext.dcloud.net.cn/plugin?id=159

（1）插件代码下载后，将vmeitime-http文件夹放入项目的common文件夹下

（2）修改全局配置（interceptor.js）

config: {
	baseUrl: "http://xxx.xx/user/",
	header: {
		// "Authorization": "Bearer " + store.state.token,
		'Content-Type':'application/json;charset=UTF-8',
		'Content-Type':'application/x-www-form-urlencoded',
		'Accept': 'application/json'
	},  
	data: {},
	method: "GET",
	dataType: "json",  /* 如设为json，会对返回的数据做一次 JSON.parse */
	responseType: "text",
	success() {},
	fail() {},
	complete() {}
}

以上的Authorization是为判断用户登录与否的标识，可以放在请求前的拦截器中添加。

（3）修改单个接口配置（index.js）

import http from './interface'
// 接口1
export const inter1= () => {
	return http.request({
        url: 'xxx/'
	})
}
// 接口2
export const inter2= (data) => {
	return http.request({
        url: 'xxx/',
		method: 'POST',
		data
	})
}
// 全部导出
export default {
	inter1， inter2
}

（4）main.js中引入，并挂在到Vue实例上

import api from '@/common/vmeitime-http/'

 // 全局挂载后使用
Vue.prototype.$api = api

（5）页面使用

// 接口1
this.$api.inter1().then(res => {
	console.log(res.data)
}).catch(err => {
	console.log(err)
})
// 接口2
let params = {a: '1', b: '2'}
this.$api.inter2(params).then(res => {
	console.log(res.data)
}).catch(err => {
	console.log(err)
})

今天先写到这里吧，上面的内容不分先后，就是想到就写的，这之间也过了一个半月左右，所以大致就能记住这些问题了，后续有其他问题再更新。
欢迎各位小宝贝来评论留言啊~~不喜勿喷，谢谢！