記錄一下最近寫專案出現的問題
專案分為web後臺管理和小程式前臺使用，在進行web後臺管理開發的時候，因為是小專案，採用了art-template，後臺系統沒有完全前後端分離。
出現問題1：在瀏覽器端art-template用each資料沒有迴圈出來。
實現功能：匯入excel表上傳檔案，列表迴圈出來excel表裡的內容
因為是第一次用art-template，去官網看了語法之後就動手寫了，ajax請求資料之後能拿到資料，語法也沒錯，就是迴圈不出來，百度看別人部落格之後找到了原因
<script src="template-web.js"></script>
<script type="text/html" id="temp1">
//id是
//把要迴圈的html程式碼放裡面
{{each arr}}
{{$value.name}}
{{/each}}
</script>
<script type="text/javascript">
var data = {
list:list //這裡list是儲存ajax請求的資料陣列
};
var html = template('temp1', data);
document.getElementById('main').innerHTML = html; //main指的是tbody的id
</script>
出現問題2：微信小程式button按鈕點選頁面跳轉沒反應
原因是要跳轉的頁面是在tabbar裡面（別人部落格說的），換成wx.switchTab或wx.reLanuch就好了
問題3：其實不算問題，微信小程式沒有table，所以只能自己寫一個，下面附程式碼
wxml檔案：
<view class="upcontainer">
<view class="formcontainer">
<view class="upimgbox upimg-title">
<view class="table">
<view class="tr bg-w">
<view class="th">選手</view>
<view class="th">姓名</view>
<block wx:for="{{scoreitemlist}}" wx:key="{{scoreitem}}">
<view class="th">{{item.scoreitem}}得分</view>
</block>
<view class="th">總分</view>
<view class="th">排名</view>
</view>
<block wx:for="{{listData}}" wx:key="{{scorelist}}">
<view class="tr">
<view class="td">{{item.code}}</view>
<view class="td">{{item.text}}</view>
<view class="td">{{item.type}}</view>
<view class="td">{{item.id}}</view>
<view class="td">{{item.name}}</view>
<view class="td">{{item.age}}</view>
</view>
</block>
</view>
</view>
</view>
</view>
wxss檔案
}
.formcontainer{
background-color: #fff;
margin:0 20rpx;
padding: 20rpx 0;
box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);
border-radius: 10rpx;
}
.upimgbox{
margin:0 10rpx;
border:#e6e6e6 solid 1px;
padding:20rpx 0;
}
.table {
border: 0px solid darkgray;
}
.tr {
display: flex;
width: 100%;
justify-content: center;
border-bottom: #e6e6e6 solid 1px;
align-items: center;
}
.td {
width:40%;
justify-content: center;
text-align: center;
font-size: 28rpx;
border-bottom: #e6e6e6 solid 1px;
padding:20rpx 0;
}
.th {
width: 40%;
justify-content: center;
display: flex;
padding:20rpx 0;
align-items: center;
font-size: 26rpx;
}
