前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序根据返回值英文渲染出对应的中文

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

原创
作者头像
王小婷
修改2020-10-23 10:13:56
7920
修改2020-10-23 10:13:56
举报
文章被收录于专栏:编程微刊

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

对照

代码语言:javascript
复制
NORMAL  -----   正常
DOING   -----   进行中
AWAITCASH   -----   未兑现
AWAITCONFIRM  -----  待确认
EXPIRED  -----   已失效
CASH   -----  已兑现
FINISH   -----  已完结

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

2:准备好json数据,并且将json数据放在服务器上,可以通过域名来访问数据,这样会方便一点,也可以直接把json数据放在本地引用。 json

代码语言:javascript
复制
{
    "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

代码语言:javascript
复制
<!-- 所有任务列表 -->
<view class="cu-item" wx:for="{{allSignList}}" wx:key="index">
  <view class="{{item.taskStatus}}">{{item.taskStatusCHN}}</view>
</view>

js

代码语言:javascript
复制
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:

代码语言:javascript
复制
.NORMAL{
color:#999
}
.DOING{
color:red
}
.CASH{
color:#4AB18C
}
.EXPIRED{
  color: #F5A623
}
.AWAITCASH{
  color: #F5A623
}
.FINISH{
  color:#4AB18C
}

显示:

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

代码语言:javascript
复制
VM647:1  http://www.xxx.com 不在以下 request 合法域名列表中,请参考文档:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CLI 工具
云开发 CLI 工具(Cloudbase CLI Devtools,CCLID)是云开发官方指定的 CLI 工具,可以帮助开发者快速构建 Serverless 应用。CLI 工具提供能力包括文件储存的管理、云函数的部署、模板项目的创建、HTTP Service、静态网站托管等,您可以专注于编码,无需在平台中切换各类配置。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档