uni-app在微信小程序编译的时候成功,但是百度小程序编译失败。
10:27:35.472 Module build failed (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
10:27:35.472 语法错误: Unexpected token (1:205)
10:27:35.475 at pages\lawsQA\lawsQA.vue:1
10:27:35.475 Module build failed (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
10:27:35.478 语法错误: Unexpected token (1:833)
10:27:35.479 at pages\calculator\calculator.vue:1
10:27:35.482 ERROR Build failed with errors.
<template>
<view class="page">
<view class="uni-tab-bar">
<view id="tab-bar" class="uni-swiper-tab qa-tab" :scroll-left="scrollLeft">
<view v-for="(tab,index) in tabBars" :key="tab.id" :class="['swiper-tab-list',tabIndex==index ? 'active' : '']" :id="tab.id"
:data-current="index" @click="tapTab(index)">{{tab.name}}</view>
</view>
<swiper :current="tabIndex" class="swiper-box" duration="300" @change="changeTab">
<!-- 量刑预测 -->
<swiper-item key="predict">
<view class="qa-content">
<view class="uni-card">
<view class="uni-card-content">
<view class="uni-card-content-inner uni-flex uni-center">
<view class="uni-flex-item">
<view class="font35">预测刑期</view>
<view class="font-blue font35">2年1个月1天</view>
</view>
<view class="uni-flex-item">
<view class="font35">预测罚金</view>
<view class="font-blue font35">--</view>
</view>
</view>
</view>
</view>
<view class="uni-card">
<view class="uni-card-content">
<view class="uni-card-content-inner uni-flex uni-center">
<view class="uni-flex-item">
<view class="font35">预测缓刑</view>
<view class="font-blue font35">2年1个月1天</view>
</view>
<view class="uni-flex-item">
<view class="font35">量刑范围</view>
<view class="font-blue font35">--</view>
</view>
</view>
</view>
</view>
<view class="canvasView">
<view class="title">图表示例</view>
<mpvue-echarts :echarts="echarts" :onInit="lineInit" canvasId="line" ref="lineChart" />
</view>
<view>
<button type="primary" size="default">重新预测</button>
</view>
</view>
</swiper-item>
<!-- 相似案例 -->
<swiper-item key="similar">
<view class="qa-content">
<view class="uni-card qa-card" hover-class="uni-list-cell-hover" v-for="(item,index1) in caseList" @click="showBanner()">
<view class="uni-card-header">
<text class="iconfont icon-an font45"></text>
{{item.name}}
</view>
<view class="uni-card-content">
<view class="uni-card-content-inner">
<view class="clearfix">
<view class="pull-left margin-right-10">判决结果</view>
<uni-tag :text="result" type="default" size="small" class="margin-right-10" v-for="result in item.resultList"></uni-tag>
</view>
<view class="clearfix margin-top-20">
<view class="pull-left margin-right-10">关键情节</view>
<uni-tag :text="point" type="danger" size="small" class="margin-right-10" v-for="point in item.pointCase"></uni-tag>
</view>
<view class="clearfix margin-top-10">
<view class="pull-left margin-right-10">其他情节</view>
<uni-tag :text="oth" type="success" size="small" class="margin-right-10" v-for="oth in item.other"></uni-tag>
</view>
</view>
</view>
</view>
</view>
</swiper-item>
<!-- 相关法条 -->
<swiper-item key="law">
</swiper-item>
<!-- 量刑指导 -->
<swiper-item key="help">
<view class="qa-content">
<view class="uni-card qa-card help-card" hover-class="uni-list-cell-hover" v-for="(item,index2) in helpList" @click="showBanner()">
<view class="uni-card-header">
<text class="iconfont icon-faguichaxun font45"></text>
{{item.name}}
</view>
<view class="uni-card-content">
<view class="uni-card-content-inner">
<view class="clearfix">
<view class="pull-left margin-right-10">判决结果</view>
<uni-tag :text="result" type="default" size="small" class="margin-right-10" v-for="result in item.usedList"></uni-tag>
</view>
<view class="margin-top-20">
<view class="margin-right-10">使用到的规则:</view>
<view>{{item.rules}}</view>
</view>
</view>
</view>
</view>
<view>
<button type="primary" size="default">重新预测</button>
</view>
</view>
</swiper-item>
</swiper>
</view>
<!-- 弹出层 -->
<view class="uni-banner" style="background:#FFFFFF;" v-if="bannerShow">
<view style="justify-content:flex-end;" @tap="closeBanner">
<view style="justify-content:flex-end; text-align:right; padding:10upx;">
<text class="uni-icon uni-icon-close"></text>
</view>
</view>
<view class="uni-banner-content">
<h2>朱某交通肇事罪</h2>
<view class="margin-top-20">
<h3>基本信息</h3>
<view>朱某朱某朱某朱某朱某朱某朱某朱某朱某朱某</view>
</view>
<view class="margin-top-10">
<h3>当事人信息</h3>
<view>朱某朱某朱某朱某朱某朱某朱某朱某朱某朱某</view>
</view>
<view class="margin-top-10">
<h4>审理经过</h4>
<view>朱某朱某朱某朱某朱某朱某朱某朱某朱某朱某</view>
</view>
</view>
</view>
<view class="uni-mask" v-if="bannerShow"></view>
</view>
</template>
<script>
import * as echarts from '@/components/echarts/echarts.simple.min.js';
import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue';
import uniTag from '@/components/uni-tag.vue'
let lineOption = {
xAxis: {
type: 'category',
data: ['4', '6', '10', '12', '18', '20', '36','48'],
name: '刑期'
},
yAxis: {
type: 'value'
},
series: [{
data: [0.4, 0.8, 0.9, 1.0, 1.6, 2.0, 1.8, 1.7],
type: 'bar'
}]
};
export default {
data() {
return {
//初始页面序号
tabIndex: 0,
scrollLeft: 0,
//顶部导航栏
tabBars: [{
name: '量刑预测',
id: 'predict'
}, {
name: '相似案例',
id: 'similar'
}, {
name: '相关法条',
id: 'law'
}, {
name: '量刑指导',
id: 'help'
}],
//图表
echarts: echarts,
updateStatus: false,
//案件
caseList:[
{
name: "朱某交通肇事罪一审判决书",
resultList: ["刑期:22个月","缓刑24个月"],
pointCase: ["重伤","死亡"],
other: ["积极主动赔偿","认罪态度好"]
},{
name: "朱某交通肇事罪一审判决书1",
resultList: ["刑期:22个月","缓刑24个月"],
pointCase: ["重伤","死亡"],
other: ["积极主动赔偿","认罪态度好"]
}
],
//量刑指导
helpList:[
{
name: "朱某交通肇事罪一审判决书",
usedList: ["刑期:22个月","缓刑24个月"],
rules: "江苏省人民法院"
},{
name: "朱某交通肇事罪一审判决书11",
usedList: ["刑期:22个月","缓刑24个月"],
rules: "江苏省人民法院"
}
],
//弹出框
bannerShow: false
};
},
methods: {
async changeTab(e) {
let index = e.detail.current;
if (this.isClickChange) {
this.tabIndex = index;
this.isClickChange = false;
return;
}
let tabBar = await this.getElSize("tab-bar"),
tabBarScrollLeft = tabBar.scrollLeft;
let width = 0;
for (let i = 0; i < index; i++) {
let result = await this.getElSize(this.tabBars[i].id);
width += result.width;
}
let winWidth = uni.getSystemInfoSync().windowWidth,
nowElement = await this.getElSize(this.tabBars[index].id),
nowWidth = nowElement.width;
if (width + nowWidth - tabBarScrollLeft > winWidth) {
this.scrollLeft = width + nowWidth - winWidth;
}
if (width < tabBarScrollLeft) {
this.scrollLeft = width;
}
this.isClickChange = false;
this.tabIndex = index; //一旦访问data就会出问题
},
async tapTab(index) { //点击tab-bar
if (this.tabIndex === index) {
return false;
} else {
let tabBar = await this.getElSize("tab-bar"),
tabBarScrollLeft = tabBar.scrollLeft; //点击的时候记录并设置scrollLeft
this.scrollLeft = tabBarScrollLeft;
this.isClickChange = true;
this.tabIndex = index;
}
},
getElSize(id) { //得到元素的size
return new Promise((res, rej) => {
uni.createSelectorQuery().select('#' + id).fields({
size: true,
scrollOffset: true
}, (data) => {
res(data);
}).exec();
});
},
goBrowser() {
// #ifdef APP-PLUS
plus.runtime.openURL('https://github.com/F-loat/mpvue-echarts');
// #endif
// #ifdef MP-WEIXIN
uni.showModal({
content: '请复制链接在浏览器里打开',
showCancel: false
})
// #endif
},
//初始化图表
lineInit(canvas, width, height) {
let lineChart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(lineChart)
lineChart.setOption(lineOption)
return lineChart
},
/* 弹框 */
closeBanner: function() {
this.bannerShow = false;
},
showBanner: function() {
this.bannerShow = true;
},
},
onLoad() {
},
onBackPress() {
if (this.bannerShow) {
this.bannerShow = false;
return true;
}
},
components: {
mpvueEcharts,
uniTag
}
}
</script>
<style>
.qa-tab{
padding: 0;
border: none;
background: #324158;
height: auto;
}
.swiper-tab-list{
color: #fff;
padding: 30upx 0;
width: 25%;
}
.swiper-tab-list.active{
color: #e9e9e9;
border-bottom: 2px solid #e9e9e9;
}
/* 量刑预测 */
.qa-content{
padding: 40upx;
}
.canvasView {
flex: 1;
flex-direction: column;
height: 500upx;
}
.title {
margin-left: 30upx;
color: #8f8f94;
}
.uni-card-content view:not(.uni-tag){font-size: 30upx;color: #333;}
/* 相似案例 */
.qa-card{
padding: 20upx;
}
.qa-card .uni-card-header{
padding: 5upx;
display: block;
}
.qa-card .uni-card-header .iconfont{
font-size: 50upx;
color: #FF5E41;
margin-right: 10upx;
}
.qa-card.help-card .uni-card-header .iconfont{color: #015191;}
/* 弹框 */
/* 遮罩层 */
.uni-mask {
background: rgba(0, 0, 0, 0.6);
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 2;
}
/* 弹出层形式的广告 */
.uni-banner {
width: 90%;
position: fixed;
left: 50%;
top: 50%;
background: #FFF;
border-radius: 10upx;
z-index: 99;
transform: translate(-50%, -50%);
text-align: center;
margin-top: 30upx;
max-height: 90%;
overflow: auto;
}
.uni-banner-content{
padding: 0 20upx 40upx 0;
}
</style>
k***@163.com (作者)
你好,新建了一个项目把内容复制过去上传了
2019-03-14 11:16
Trust
回复 k***@163.com:组件上不要写未支持的属性,比如 key 这种。你没有循环,写这个 key 没有意义。编译的时候,不认识这个,就报错了。
2019-03-14 11:30
k***@163.com (作者)
回复 Trust:谢谢
2019-03-14 14:20