视频教程:P01-项目基本介绍_哔哩哔哩_bilibili
{
font-size: 20px;
transform: scale(0.5); //缩放
}
/deep/ .u-tabs__wrapper__nav{
justify-content: center;
}
display: flex;
flex-flow: row nowrap;
width: 100%;
position:fixed;
bottom: 0;
gateway网关yml配置文件中配置
spring:
cloud:
gateway:
default-filters:
- DedupeResponseHeader=Access-Control-Allow-Origin, RETAIN_UNIQUE
globalcors:
corsConfigurations:
'[/**]':
# 允许携带认证信息
allow-credentials: true
# 允许跨域的源(网站域名/ip),设置*为全部
allowedOriginPatterns : "*"
# 允许跨域的method, 默认为GET和OPTIONS,设置*为全部
allowedMethods: "*"
# 允许跨域请求里的head字段,设置*为全部
allowedHeaders: "*"
common下创建文件config.js
uni.$u.http.setConfig((config) => {
/* config 为默认全局配置*/
config.baseURL = `http://localhost:8080`; /* 根域名 */
return config
})
store下创建index.js
//引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({//全局变量定义
state: {
forcedLogin: false,//是否需要强制登录
hasLogin: false,
userName: "",
userId:'',
token:'',
pointId:'',
},
mutations: {
login(state, user) {
state.userName = user.username || '';
state.hasLogin = true;
state.userId = user.id || '';
state.token = user.token || '';
},
logout(state) {
state.userName = "";
state.hasLogin = false;
state.userId = '';
state.token = '';
}
}
})
export default store
main.js
import config from '@/common/config.js';
import store from "./store"
Vue.prototype.$store = store
const app = new Vue({
store,
...App
})
login.vue
token获取
在vue文件中使用 取值,比如其中的token,可以使用‘this.$store.state.token’这样来取。
在js文件中使用
1、import store from '../../store' 先引用
2、store.state.token 取值
uni-list 列表 - DCloud 插件市场
//自定义返回页面
onBackPress(options) {
console.log('from:' + options.from)
uni.switchTab({
url: '/pages/tabbar-1/tabbar-1'
});
return true
},
//登录成功后,用redirectTo 跳转,不保留当前页面
uni.redirectTo({
url: storeRedirectPage
});
onShow() {
}
/deep/ .u-tabbar {
z-index: 980;
position: relative;
}
pages.json
"enablePullDownRefresh": true, //开启下拉刷新
template:
data()
status: 'loadmore',
noResult: false,//分页获取到的数据是否为空
pageNum: 1,
comList: []
export default
//下拉到底触发事件
onReachBottom() {
if (this.noResult) {
this.status = 'nomore';
return;
}
this.status = 'loading';
this.pageNum = ++this.pageNum;
this.getDataList()
},
//下拉刷新事件
onPullDownRefresh() {
this.pageNum = 1
this.comList = []
this.getDataList();
},
onShow() {
this.comList = []
this.getDataList();
},
methods
//获取帖子列表
getDataList() {
// 基本用法,注意:get请求的参数以及配置项都在第二个参数中
uni.$u.http
.get('/community/postManage/appPostList', {
params: {
pageNum: this.pageNum,
pageSize: 10
}
})
.then(res => {
let size = res.data.rows.length
if (size < 10 || size == 0) {
this.noResult = true
}
for (var i = 0; i < size; i++) {
this.comList.push(res.data.rows[i]);
}
uni.stopPullDownRefresh()
})
.catch(err => {});
},
【z-paging下拉刷新、上拉加载更多】超简单、低耦合!仅需两步轻松完成完整分页逻辑 - DCloud 插件市场
=====================
=====================
bgcolor: '',
=====================
onPageScroll(e) {
if (e.scrollTop >= 0 && e.scrollTop <= 8) {
this.bgcolor = 'opacity:0';
} else if (e.scrollTop > 8 && e.scrollTop <= 16) {
this.bgcolor = 'opacity:0.1';
} else if (e.scrollTop > 16 && e.scrollTop <= 24) {
this.bgcolor = 'opacity:0.2';
} else if (e.scrollTop > 24 && e.scrollTop <= 32) {
this.bgcolor = 'opacity:0.3';
} else if (e.scrollTop > 32 && e.scrollTop <= 40) {
this.bgcolor = 'opacity:0.4';
} else if (e.scrollTop > 40 && e.scrollTop <= 48) {
this.bgcolor = 'opacity:0.5';
} else if (e.scrollTop > 48 && e.scrollTop <= 56) {
this.bgcolor = 'opacity:0.6';
} else if (e.scrollTop > 56 && e.scrollTop <= 64) {
this.bgcolor = 'opacity:0.7';
} else if (e.scrollTop > 64 && e.scrollTop <= 72) {
this.bgcolor = 'opacity:0.8';
} else if (e.scrollTop > 72 && e.scrollTop <= 80) {
this.bgcolor = 'opacity:0.9';
} else if (e.scrollTop > 80) {
this.bgcolor = 'opacity:1';
}
},
=====================
.title-bg {
width: 100%;
height: 100px;
position: absolute;
background-color: #FFB501;
opacity: 0;
top: -45px;
}
=====================
父页面
uni.navigateTo({
url: '/pages/components/comment-details/comment-details?data=' +
encodeURIComponent(JSON.stringify(item))
});
目的页面
onLoad: function(option) { //option为object类型,会序列化上个页面传递的参数
const data = decodeURIComponent(option.data);
this.comment = JSON.parse(data);
},
APP版本更新、强制更新、静默更新、下载进度(wgt更新) - DCloud 插件市场j
/**** 此文件说明请看注释 *****/
// 可以用自己项目的请求方法
// 请求配置说明:https://ext.dcloud.net.cn/plugin?id=822
/**** 结束 *****/
const platform = uni.getSystemInfoSync().platform;
export default {
// 发起ajax请求获取服务端版本号
getServerNo: (version, isPrompt = false, callback) => {
let httpData = {
version: version.versionCode,
// 版本名称
versionName: version.versionName,
// setupPage参数说明(判断用户是不是从设置页面点击的更新,如果是设置页面点击的更新,有不要用静默更新了,不然用户点击没反应很奇怪的)
setupPage: isPrompt
};
if (platform == "android") {
httpData.type = 1101;
} else {
httpData.type = 1102;
}
/* 接口入参说明
* version: 应用当前版本号(已自动获取)
* versionName: 应用当前版本名称(已自动获取)
* type:平台(1101是安卓,1102是IOS)
*/
/****************以下是示例*******************/
// 可以用自己项目的请求方法(接口自己找后台要,插件不提供)
uni.$u.http
.get('/system/appManage/latestVersion', {
params: {
type: httpData.type
}
})
.then(res => {
if (res.data.code == 200) {
res = res.data.data
/* res的数据说明
* | 参数名称 | 一定返回 | 类型 | 描述
* | -------------|--------- | --------- | ------------- |
* | versionCode | y | int | 版本号 |
* | versionName | y | String | 版本名称 |
* | versionInfo | y | String | 版本信息 |
* | updateType | y | String | forcibly = 强制更新, solicit = 弹窗确认更新, silent = 静默更新 |
* | downloadUrl | y | String | 版本下载链接(IOS安装包更新请放跳转store应用商店链接,安卓apk和wgt文件放文件下载链接) |
*/
if (res && res.downloadUrl) {
if(res.versionCode > version.versionCode){
//有新版本
// 兼容之前的版本(updateType是新版才有的参数)
callback && callback(res);
}else{
console.log('已是最新版!')
}
} else if (isPrompt) {
uni.showToast({
title: "暂无新版本",
icon: "none"
});
}
}
})
.catch(err => {
});
/****************以上是示例*******************/
},
// 弹窗主颜色(不填默认粉色)
appUpdateColor: "#f0ad4e",
// 弹窗图标(不填显示默认图标,链接配置示例如: '/static/demo/ic_attention.png')
appUpdateIcon: '/static/ic_ar.png'
}
onLoad接口参数,created中调用初始化接口
onLoad(option) {
this.commodityId = option.id
},
created() {
this.init();
},
uni.$u.http.upload('/file/upload', {
params: {},
/* 会加在url上 */
// #ifdef APP-PLUS || H5
//files: [], // 需要上传的文件列表。使用 files 时,filePath 和 name 不生效。App、H5( 2.6.15+)
// #endif
filePath: tempFilePaths[0], // 要上传文件资源的路径。
// 注:如果局部custom与全局custom有同名属性,则后面的属性会覆盖前面的属性,相当于Object.assign(全局,局部)
custom: {
auth: true
}, // 可以加一些自定义参数,在拦截器等地方使用。比如这里我加了一个auth,可在拦截器里拿到,如果true就传token
name: 'file', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
// #ifdef H5 || APP-PLUS
timeout: 60000, // H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)
// #endif
header: {},
/* 会与全局header合并,如有同名属性,局部覆盖全局 */
formData: {}, // HTTP 请求中其他额外的 form data
// 返回当前请求的task, options。请勿在此处修改options。非必填
getTask: (task, options) => {},
}).then(res => {
// 返回的res.data 已经进行JSON.parse
let src = res.data.data.url
}).catch(err => {
})
将这三个样式文件,导入APP中
APP.vue中引入
@import '@/common/quill/quill.bubble.css';
@import '@/common/quill/quill.core.css';
@import '@/common/quill/quill.snow.css';
this.$set(对象,"key","value")
this.$forceUpdate()
uni-list 列表 - DCloud 插件市场
聊天模板 - DCloud 插件市场
uni-share - DCloud 插件市场
支持固定模式、等比缩放、自由模式
ksp-cropper - DCloud 插件市场
uni.showModal({
title: '提示',
content: '确定取消订单吗?',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
水平居中内容
uniapp 导航栏原生标题、按钮、输入框配置 - 简书
官方demo中国有个uni.ttf,如何查看里面字符?
1.先安装字体,记住字体名称
2.查找字符
app.vue 中增加
page {
-webkit-user-select: text;
}