创建项目
打开hbuilder编译器登录账号
编译器左上角创建一个项目，最基础的
全局配置文件（路由）
去package.json文件中写路由pages和导航栏tabBar
UI框架
导入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"
}
补充：
路径问题
{
"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封装了然后引入接口和方法
涉及到了一个视频倍速的问题
第一次用的原生js获取dom方法倍速，但是在真机调试时无效
第二次使用uniapp获取dom也无效
第三次用的uniapp的video组件（和h5的video标签一样）的方法还是无效并且一直报错，this获取不到？
document.getElementsById("#videoBox")[0].playbackRate = Number(n)
uni.createSelectorQuery().select('#videoBox').playbackRate = Number(n)
uni.createVideoContext('videoBox'，this).playbackRate = Number(n)报错内容：Property or method "toJSON" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: ******************************************
okok，目前是只能到1.5倍速，不知道是不支持1.5以上的还是我写的有问题
（和h
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)) //括号里面可以设置倍速
},设置uni-page-body 的样式
// 在页面的样式里添加page标签并写入样式
page {
background-color: #fff;
height: 100%;
}