小程序根据返回值英文渲染出对应的中文
时间:2022-07-28
本文章向大家介绍小程序根据返回值英文渲染出对应的中文,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
需求:后端返回值为英文,在渲染的时候,将英文所对应的中文意识渲染到前端页面。然后每种不同的状态渲染完之后给到不同的颜色进行区分。
对照
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证书。
- 用户登陆注册【JDBC版】
- 学习思考之《编程之美》.
- 干货 | 深度剖析服务发现组件Netflix Eureka
- 多线程编程学习一(Java多线程的基础).
- TensorFlow | 自己动手写深度学习模型之全连接神经网络
- 多线程编程学习二(对象及变量的并发访问).
- ASM基本配置问题(r5笔记第89天)
- 如何上手使用 Facebook 的开源平台 Detectron?
- 多线程编程学习三(线程间通信).
- 关于create database语句在10g,11g中的不同(r5笔记第88天)
- Web开发模式【Mode I 和Mode II的介绍、应用案例】
- 多线程编程学习四(Lock 的使用)
- Android编程规范
- 干货 | 深入分析Object.wait/notify实现机制
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python实现随机森林
- 在mysql中order by是怎样工作的?
- 多线程应用 - 阻塞队列ArrayBlockingQueue详解
- Java虚拟机 - 超级详细的类加载说明
- ReentrantLock
- 多线程应用 - 阻塞队列LinkedBlockingDeque详解
- AtomicInteger详解
- 多线程应用 - 阻塞队列LinkedBlockingQueue详解
- 多线程应用 - 超详细的AQS详情
- 多线程应用 - 基于AQS的Condition
- HashMap源码分析 - jdk8
- HashMap源码分析 - JDK7和JDK8有什么区别
- 线程应用 - 中断interrupt详解
- ThreadLocal全面解析
- tomcat类加载机制了解一下