1、pages.json pages 配置说明
2、字体小于12px设置，下方示例为10px字体
{
font-size: 20px;
transform: scale(0.5); //缩放
}3、uniapp 强制修改原生组件的样式
/deep/ .u-tabs__wrapper__nav{
justify-content: center;
}4、内部元素为一行
display: flex;
flex-flow: row nowrap;5、固定在屏幕底部
width: 100%;
position:fixed;
bottom: 0;6、springcloud允许跨域访问
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: "*"7、前端请求封装，token 和 用户信息保存
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 storemain.js
import config from '@/common/config.js';
import store from "./store"
Vue.prototype.$store = store
const app = new Vue({
store,
...App
})login.vue
<script>
import{
mapState,mapMutations //先导入mapState方法
} from 'vuex'
export default {
computed:mapState(['forcedLogin','hasLogin','userName']),//对全局变量进行监控
methods: {
...mapMutations(['login']),
//登录成功后
this.login(res.data.data)
//随后 store/ index.js 文件中的login方法会把传过来的用户数据保存在vuex
</script>token获取
在vue文件中使用 取值，比如其中的token，可以使用‘this.$store.state.token’这样来取。
在js文件中使用
1、import store from '../../store' 先引用
2、store.state.token 取值 8、设置列表，消息通知列表组件
9、自定义返回页面
//自定义返回页面
onBackPress(options) {
console.log('from:' + options.from)
uni.switchTab({
url: '/pages/tabbar-1/tabbar-1'
});
return true
},10、需要登录的模块，登录成功后跳转到目标页面，返回可以自动返回到原上级路由
//登录成功后，用redirectTo 跳转，不保留当前页面
uni.redirectTo({
url: storeRedirectPage
});11、页面每次打开时执行
onShow() {
}12、富文本组件
13、u-tabbar被u-sticky遮挡
/deep/ .u-tabbar {
z-index: 980;
position: relative;
}14、滑动分页、下拉刷新
uview原生版：
pages.json
"enablePullDownRefresh": true, //开启下拉刷新template:
<u-loadmore :status="status" />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 插件市场
15、顶部滑动背景色渐变
=====================
<!-- 顶部背景色渐变 -->
<view class="title-bg" :style="bgcolor"></view>
=====================
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;
}
=====================16、跨页面传json参数
父页面
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);
},17、版本升级组件
APP版本更新、强制更新、静默更新、下载进度（wgt更新） - DCloud 插件市场j
1.导出组件依赖文件
2.config下创建componentConfig.js
/**** 此文件说明请看注释 *****/
// 可以用自己项目的请求方法
// 请求配置说明：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'
}
3.App.vue中onLaunch触发版本更新
<script>
// #ifdef APP-PLUS
import APPUpdate from '@/uni_modules/zhouWei-APPUpdate/js_sdk/appUpdate';
// #endif
export default {
onLaunch: function() {
//app退出重新进，触发
// #ifdef APP-PLUS
APPUpdate();
// #endif
},
onShow: function() {
console.log('App Show');
},
onHide: function() {
console.log('App Hide');
}
};
</script>
4.编辑页面，手动更新，调用
<template>
<view>
<uni-list>
<uni-list-item title="账号资料" showArrow="true"></uni-list-item>
<uni-list-item title="消息设置" showArrow="true"></uni-list-item>
<u-gap height="8" bgColor="#f4f5fa"></u-gap>
<uni-list-item title="用户协议" showArrow="true"></uni-list-item>
<uni-list-item title="隐私政策" showArrow="true"></uni-list-item>
<u-gap height="8" bgColor="#f4f5fa"></u-gap>
<uni-list-item title="关于我们" showArrow="true"></uni-list-item>
<uni-list-item title="商务合作" showArrow="true"></uni-list-item>
<u-gap height="8" bgColor="#f4f5fa"></u-gap>
<view @click="onAPPUpdate()">
<uni-list-item title="版本更新" showArrow="true"></uni-list-item>
</view>
</uni-list>
<view class="login_out">
<u-button text="退出登录" @click="loginOut()" v-if="hasLogin"></u-button>
<u-button text="现在登录" @click="login()" v-if="!hasLogin"></u-button>
</view>
</view>
</template>
<script>
import {
mapState,
mapMutations //先导入mapState方法
} from 'vuex'
// #ifdef APP-PLUS
import APPUpdate, {
getCurrentNo
} from '@/uni_modules/zhouWei-APPUpdate/js_sdk/appUpdate';
// #endif
export default {
data() {
return {
hasLogin: "",
version: "" // 版本号
}
},
onLoad: function() {
this.hasLogin = uni.getStorageSync('globalHasLogin')
// #ifdef APP-PLUS
getCurrentNo(res => {
// 进页面获取当前APP版本号（用于页面显示）
this.version = res.version;
});
// #endif
},
methods: {
...mapMutations(['logout']),
//退出登录
loginOut() {
uni.$u.http.delete('/auth/appLogout', {}).then(res => {
this.logout()
uni.showToast({
title: '退出成功！',
icon: 'none'
});
uni.navigateTo({
url: "/pages/login/login"
})
}).catch(err => {
})
},
//登录
login() {
uni.navigateTo({
url: "/pages/login/login"
})
},
// 检查APP是否有新版本
onAPPUpdate() {
debugger
// true 没有新版本的时候有提示，默认：false
APPUpdate(true);
}
}
}
</script>
<style scoped>
.login_out {
width: 100%;
position: fixed;
bottom: 0;
}
</style>
18、详情页，根据id请求后台详细信息
onLoad接口参数，created中调用初始化接口
onLoad(option) {
this.commodityId = option.id
},
created() {
this.init();
},19、上传图片
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 => {
})20、Quill后台上传的富文本内容前台展示，样式丢失
将这三个样式文件，导入APP中
APP.vue中引入
@import '@/common/quill/quill.bubble.css';
@import '@/common/quill/quill.core.css';
@import '@/common/quill/quill.snow.css'; 使用的时候，增加ql-editor 样式
21、子组件强制修改，父组件传过来的值
this.$set(对象,"key","value")
this.$forceUpdate()
22、聊天模板
23、APP分享
24、图片裁剪
支持固定模式、等比缩放、自由模式
25、原生弹出框，带取消确认
uni.showModal({
title: '提示',
content: '确定取消订单吗？',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});26、view元素居中
<view style="display:flex;flex-direction: column;">
<view style="align-self: center;">
水平居中内容
</view>
</view>27、原生导航栏 自定义
28、input后置插槽，字数统计
<u-input placeholder="标题（必填）" v-model="title" border="bottom" maxlength="30">
<u--text :text="this.title.length + '/30'" slot="suffix" margin="0 3px 0 0" type="tips"></u--text>
</u-input>29、查看ttf字体
官方demo中国有个uni.ttf，如何查看里面字符？
1.先安装字体，记住字体名称
2.查找字符
30、允许复制
app.vue 中增加
page {
-webkit-user-select: text;
}
5919
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
