记录一次完整的uniapp项目开发

目录

创建项目

全局配置文件（路由）

UI框架

 路径问题

请求接口

涉及到了一个视频倍速的问题

设置uni-page-body 的样式

因为uniapp中没有路由守卫，可以addInterceptor使用拦截路由

h5页面适配pc端

---

创建项目

打开hbuilder编译器登录账号

编译器左上角创建一个项目，最基础的

全局配置文件（路由）

去package.json文件中写路由pages和导航栏tabBar

UI框架

1.导入uview的ui组件：

注意：uview依赖scss，如果项目是hbuilder创建的应该都已经安装了scss

1）去uniapp的插件市场中搜索uview，选择2.0，选择第一个的绿色按钮

 选择需要引入的项目，安装好后出现了一个新的uni_modules文件夹

2）配置引入uview：

main.js中 引入其主js库

import Vue from 'vue'

import uView from "@/uni_modules/uview-ui";
Vue.use(uView);

在uni.scss中引入其全局scss主题文件

/*uni.scss*/
@import "@/uni_modules/uview-ui/theme.scss";

在App.vue中引入其基础样式

<style lang="scss">
	/*每个页面公共css */

/*注意要写在第一行，同时给style标签加入lang="scss"属性*/
@import "@/uni_modules/uview-ui/index.scss";

</style>

在pages.json中

	"easycom": {
			"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
		}

补充：

由于uView使用easycom模式，让您无需引入组件即可直接使用，但是此功能需要HbuilderX2.5.5及以 上版本才支持，详见配置easycom组件模式。easycom打包的时候是按需引入的，您可以放心引入uView的 整个组件库，发布打包时会自动剔除您没有使用的组件(注意：调试时仍然是全部引入的)

 到此uview已经可以开始使用了

2.导入uni-ui框架

单个组件引入： uni-collapse 折叠面板 - DCloud 插件市场

在页面中无需引入直接使用

 路径问题

pages.json全局路由文件中path没有/

{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},

页面路由跳转加一个/

uni.navigateTo({
				url: '/pages/details/details'
			});

请求接口

页面搭建完成下面来写接口

首先去将后台接口域名加入域名白名单？

新建一个js文件封装请求接口（ps：config文件中为后端接口地址，方便）

/*
 @request 请求方法
 @param {String} url 接口地址
 @param {String} type 请求类型
 @param {Object} data 请求参数
 @param {String} file 默认显示加载框 值为noLoading不显示加载框  
 */
import $d from './d.js'
import _config from './config.js'
var ToastBox = ''
const request = (url, type, data, field = '') => {
	return new Promise((resolve, reject) => {

		clearTimeout(ToastBox)
		ToastBox = setTimeout(() => {
			//当接口返回的时间小于300ms不显示加载框优化用户体验
			uni.showLoading({
				title: '加载中'
			})
		}, 300)

		//默认添加流水号
		// data.transeq = new Date().getTime();
		data = JSON.stringify(data)
		
		uni.request({
				method: type,
				url: _config.baseURL + url,
				data: $d.encryptByDES(data),
				header: {
					// 'x-csrf-token': $store.state.token ? $store.state.token : '',
					'content-type': 'application/json',
				},
				dataType: 'json',
			})
			.then((response) => {
				let {
					data
				} = response[1]
				if(field != ''){
					data.data[field] = JSON.parse($d.decryptByDES(data.data[field]))
				}
				
				if (data.code === 0 || data.code === 200) {
					clearTimeout(ToastBox)
					uni.hideLoading()
					resolve(data)
				} else {
					reject(data)
					uni.showToast({
						title: data.msg,
						icon: 'none',
						duration: 2000,
					})
					uni.hideLoading()
					clearTimeout(ToastBox)
				}
			})
			.catch((error) => {
				console.log(error)
				clearTimeout(ToastBox)
				uni.hideLoading()

			})
	})
}
export default request

在main.js中引入挂载为全局变量

import $http from './utils/http' // http 请求
Vue.prototype.$http = $http

在页面中具体的使用

		getList(){
			this.$http('catalogueFolder/getCatalogueFolderList', 'POST', {page:1,pageSize:10}).then(res=> {
				if(res.code == 0) {
					this.mainList=JSON.parse(this.$d.decryptByDES(res.data.list))
					console.log(res,'接口数据',this.mainList)
					// uni.showToast({
					// 	title: res.msg,
					// 	icon: 'success',
					// 	duration: 2000,
					// })
				}
			})
		},

补充：vue后台和这种uniapp前台页面请求封装的不同，后台是将每一条接口都单独封装了，但是前台是只把uni.request封装了然后引入接口和方法

涉及到了一个视频倍速的问题

document.getElementsById("#videoBox")[0].playbackRate = Number(n)
uni.createSelectorQuery().select('#videoBox').playbackRate = Number(n)
uni.createVideoContext('videoBox'，this).playbackRate = Number(n)

目前只能到1.5倍速，不知道是不支持以上还是我写的有问题，而且只在微信网页上有效，在浏览器网页上无效

			confirm(val){
				// console.log("确认",val,val.indexs[0])
				this.defaultIndex=[]
				this.defaultIndex.push(val.indexs[0])
				this.valueBeisu=val.value[0];
				this.show=false;
				let n=val.value[0].substring(0,this.valueBeisu.length-1)
				console.log("确认11",n,parseFloat(n),typeof n)
				let videoContext = uni.createVideoContext('videoBox',this)//这里的'myVideo'要和上方video标签的id相对应
				videoContext.playbackRate(parseFloat(n))	//括号里面可以设置倍速
			},

获取元素宽高从而动态设置样式

let v =uni.createSelectorQuery().select('#videoBox');
			v.boundingClientRect(data => {
				this.videoHeight=data.height*2
			  console.log("得到布局位置信息" + JSON.stringify(data),this.videoHeight);
			  console.log("节点离页面顶部的距离为" + data.top);
			}).exec();

<view class="videoDetails" :style="{marginTop:videoHeight+'rpx'}">

设置uni-page-body 的样式

// 在页面的样式里添加page标签并写入样式
page {
	background-color: #fff;
	height: 100%;
}

因为uniapp中没有路由守卫，可以addInterceptor使用拦截路由

具体看链接：(149条消息) uniapp使用addInterceptor进行路由拦截_白酱酱的博客-优快云博客

h5页面适配pc端

就是设置最大宽度使其左右留白，如图：

 

1. 这个感觉是更高一级的操作，但是和需求不符

：官网链接：宽屏适配指南 | uni-app官网 (dcloud.net.cn)

2. uniapp的全局配置里有这个属性，在最下面的maxWidth,我用的是这个

：官网链接：pages.json 页面路由 | uni-app官网 (dcloud.net.cn)

	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"maxWidth": 470,    //最大宽度
		"rpxCalcMaxDeviceWidth": 960, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960
		"rpxCalcBaseDeviceWidth": 470 // 设备实际宽度超出 rpx 计算所支持的最大宽度时，rpx计算所采用的固定屏幕宽度，单位 px，默认值为 375  ，最好设置和maxWidth一样的值，控制rpx大小
	},

报错

今天真机调试的时候突然报错

copyFile error src=/sdcard/DCloud/temp/io.dcloud.HBuilder/apps/HBuilder/Command-0/www/static/ dest=/sdcard/Android/data/io.dcloud.HBuilder/apps/HBuilder/www/static/ 同步资源失败，无法重启，请手动重启后重新运行 已停止运行…
删除手机文件中Dclod中的temp文件就好了

修改标题导航栏文字

 

uni.setNavigationBarTitle({
		title: ‘000 //这是修改后的导航栏文字
		})

tabbars导航页面切换不触发onload生命周期

起因是用户退出重新登录后的用户tabbars导航的用户页面切换时数据还是上一个用户的数据，用户数据是本地缓存，刚开始以为是本地缓存的问题，后来发现原来根本没触发onload函数，所以把onload替换成onshow就好了