uniApp 随手记
- 一般页面跳转：
uni.navigateTo({
url: '/pages/questions/practice/index',
})
- 传参页面跳转
uni.navigateTo({
url: '/pages/questions/practice/index? name’ + typeName ,
})
接收参数：
onLoad(option) {
console.log( option.name)
}
- 传数组
uni.navigateTo({
url: '/pages/questions/practice/index',
success: function(res) {
res.eventChannel.emit('acceptDataFromOpenerPage', { data: datas })
}
})
接收数组:
onLoad(option) {
const eventChannel = this.getOpenerEventChannel();
let _vm = this
eventChannel.on('acceptDataFromOpenerPage', function(data) {
_vm.totleNum = data.data.length
_vm.datas = data.data
})
}
路由模块化
pages.json 备份后清空 引入 Pages-tool后 会生成一下内容
Pages.json会自动更新内容； 新的路由在pages.config.json中配置；具体地址放到pages-config文件夹中。
滑动到顶部刷新
路由的style中加入"enablePullDownRefresh": true,
onLoad: function (options) {
setTimeout(function () {
console.log('start pulldown');
}, 1000);
uni.startPullDownRefresh();
},
onPullDownRefresh() {
console.log('refresh');
this.current = 0
this.getPage()
setTimeout(function () {
uni.stopPullDownRefresh();
}, 1000);
},
滑动到底部加载更多
onReachBottom() {
console.log(this.current, 'this.current1')
const page = ++this.current
const size = 6 * page
this.getPage(size)
console.log(this.current, 'this.current2')
},
图片上传
uni.uploadFile({
url: 'http://47.114.105.112:3108/sao/files/upload/pic',
filePath: v.tempFilePaths[0],
name:"file",
method: 'POST',
header: {'Authorization': 'Bearer ' + this.headers},
success: (res) => {
}
})
cookie原生的 request 请求改为weapp-cookie
- 注意小程序端不支持自动保持 cookie，服务器应避免验证 cookie。如果服务器无法修改，也可以使用一些模拟手段，比如这样的工具https://github.com/charleslo1/weapp-cookie 可以请求时带上 cookie 并将响应的 cookie 保存在本地。
import cookies from 'weapp-cookie'
设置cookies.set('USER_TOKEN',{'access_token':res.data.access_token,'userName':res.data.userName}, { domain: 'admins' })
获取
let token = cookies.get('USER_TOKEN', 'admins')
富文本
V-html 改成 rich-text
1引入lime-echart图表
- <view style="width: 100%; height:800rpx"><l-echart ref="chart"></l-echart></view>
<script>
import * as echarts from '@/uni_modules/lime-echart/components/l-echart/echarts';
export default {
data() {
return {
option: {
title: {
text: '各考核班通过率',
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['总通过率', '理论考核', '实操考核'],
y: '30rpx'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '20%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['班级1', '班级2', '班级3', '班级4', '班级5', '班级6', '班级7', '班级8', '班级9', '班级10', '班级11', '班级12', '班级13'],
"axisLabel":{
// interval: 0,
rotate:40
}
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} %'
},
max: function(value) {
return value.max = 100;
}
},
series: [
{
name: '总通过率',
type: 'line',
stack: 'Total',
data: [20, 32, 1, 34, 90, 30, 10]
},
{
name: '理论考核',
type: 'line',
stack: 'Total',
data: [20, 82, 91, 34, 90, 30, 10]
},
{
name: '实操考核',
type: 'line',
stack: 'Total',
data: []
}
]
}
}
},
mounted() {
this.getClass()
},
methods:{
// 获取所有班级
getClass(){
const params = {
page: 0
}
this.$http.get('/perseus/exams/calculate', params)
.then(res=>{
console.log(res)
this.option.xAxis.data = res.map(v=> {
return v.name
})
this.option.series[0].data = res.map(v=> {
return v.passCount
})
this.option.series[1].data = res.map(v=> {
return v.totalRate * 100
})
this.$refs.chart.init(config => {
const { canvas } = config;
const chart = echarts.init(canvas, null, config);
canvas.setChart(chart);
chart.setOption(this.option);
// 需要把 chart 返回
return chart;
});
})
}
}
}
</script>
