需求:后端返回值为英文,在渲染的时候,将英文所对应的中文意识渲染到前端页面。然后每种不同的状态渲染完之后给到不同的颜色进行区分。
对照
NORMAL ----- 正常
DOING ----- 进行中
AWAITCASH ----- 未兑现
AWAITCONFIRM ----- 待确认
EXPIRED ----- 已失效
CASH ----- 已兑现
FINISH ----- 已完结
1:打开微信开发者工具,填写自己的appid和项目名称,新建一个项目。
2:准备好json数据,并且将json数据放在服务器上,可以通过域名来访问数据,这样会方便一点,也可以直接把json数据放在本地引用。 json
{
"msg": "操作成功",
"code": "0000",
"data": [
{
"taskId": 1,
"taskStatus": "NORMAL"
},
{
"taskId": 2,
"taskStatus": "DOING"
},
{
"taskId": 3,
"taskStatus": "AWAITCASH"
},
{
"taskId": 4,
"taskStatus": "AWAITCONFIRM"
},
{
"taskId": 5,
"taskStatus": "EXPIRED"
},
{
"taskId": 6,
"taskStatus": "CASH"
} ,
{
"taskId": 7,
"taskStatus": "FINISH"
}
]
}
3:开始写代码了
wxml
<!-- 所有任务列表 -->
<view class="cu-item" wx:for="{{allSignList}}" wx:key="index">
<view class="{{item.taskStatus}}">{{item.taskStatusCHN}}</view>
</view>
js
Page({
data: {
allSignList: []
},
onLoad: function (options) {
wx.request({
url: 'http://www.intXXXX.com/1.json', //这里替换接口
header: {
'content-type': 'application/json'
},
success: res => {
this.setData({
allSignList: (res.data.data || []).map(a => {
a.taskStatusCHN = a.taskStatus === 'NORMAL' ? '正常' : a.taskStatus === 'DOING' ? '进行中' : a.taskStatus === 'AWAITCASH' ? '未兑现' : a.taskStatus === 'AWAITCONFIRM' ? '待确认' : a.taskStatus === 'EXPIRED' ? '已失效' : a.taskStatus === 'CASH' ? '已兑现' : '已完结'
return a
})
})
}
})
},
})
css:
.NORMAL{
color:#999
}
.DOING{
color:red
}
.CASH{
color:#4AB18C
}
.EXPIRED{
color: #F5A623
}
.AWAITCASH{
color: #F5A623
}
.FINISH{
color:#4AB18C
}
显示:
遇到问题: 如果遇到这样的问题的时候
VM647:1 http://www.xxx.com 不在以下 request 合法域名列表中,请参考文档:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html
解决办法 点击微信开发者工具右上角的详情按钮,选择本地设置,勾选不校验合法域名、web-view(业务域名)、TLS版本以及HTTPS证书。