小程序根据返回值英文渲染出对应的中文
时间: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证书。
- 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 数组属性和方法
- java基础语法
- java对象和类
- python中使用马尔可夫决策过程(MDP)动态编程来解决最短路径强化学习问题
- 《剑指 offer》刷题记录之:数组
- R语言中绘制箱形图的替代品:蜂群图和小提琴图
- 《剑指 offer》刷题记录之:字符串 & 链表
- python中使用马尔可夫决策过程(MDP)动态编程来解决最短路径强化学习问题
- 《剑指 offer》刷题记录之:树 & 栈和队列
- R语言自定义两种统计量度:平均值和中位数,何时去使用?
- 设计模式之适配器模式
- 自然语言处理中的预训练模型(上)
- numpy数组中冒号和负号的含义
- 基于R语言实现LASSO回归分析
- PHP预防XSS攻击,ajax跨域攻击的方法
- PHP中利用header设置content-type和常见文件类型的content-type