需求：后端返回值为英文，在渲染的时候，将英文所对应的中文意识渲染到前端页面。然后每种不同的状态渲染完之后给到不同的颜色进行区分。
对照
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证书。
