小程序根据返回值英文渲染出对应的中文

╰+攻爆jí腚メ 2022-12-15 03:37 134阅读 0赞

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

对照

NORMAL  -----   正常
    DOING   -----   进行中
    AWAITCASH   -----   未兑现
    AWAITCONFIRM  -----  待确认
    EXPIRED  -----   已失效
    CASH   -----  已兑现
    FINISH   -----  已完结

1：打开微信开发者工具，填写自己的appid和项目名称，新建一个项目。

![format_png][]

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>

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
    }

显示：

![format_png 1][]

遇到问题：  
如果遇到这样的问题的时候

VM647:1  http://www.xxx.com 不在以下 request 合法域名列表中，请参考文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html

![format_png 2][]

解决办法  
点击微信开发者工具右上角的详情按钮，选择本地设置，勾选不校验合法域名、web-view(业务域名）、TLS版本以及HTTPS证书。

![format_png 3][]

[format_png]: /images/20221123/b45bcd22c4f9493a9e877e2646dfb618.png
[format_png 1]: /images/20221123/2292c5393de4450f832b758a62120ce6.png
[format_png 2]: /images/20221123/ed44cf0f426c4eeb86430570274d7a07.png
[format_png 3]: /images/20221123/633659a794674ab483c40c3e39c1eecb.png