小程序根据返回值英文渲染出对应的中文
时间: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证书。
- web.xml中load-on-startup的作用
- Java并发编程的艺术(七)——Executors
- Java并发编程的艺术(八)——闭锁、同步屏障、信号量详解
- PowerDesigner使用教程|使用方法
- Java并发编程的艺术(一)——并发编程需要注意的问题
- 梯度下降法快速教程 | 第三章:学习率衰减因子(decay)的原理与Python实现
- Java并发编程的艺术(三)——volatile
- java学习手册-java 新手入门必看的30个题
- Java并发编程的艺术(五)——中断
- 简易的深度学习框架Keras代码解析与应用
- Java并发编程的艺术(六)——线程间的通信
- 轻量级线程池的实现
- python根据BM25实现文本检索
- 稳扎稳打JavaScript(一)——作用域链内存模型
- 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 数组属性和方法
- Hadoop技术(三)数据仓库工具Hive
- Hadoop技术(一)分布式文件系统HDFS
- Docker技术( 容器虚拟化技术 )
- 分布式事务处理技术之LCN
- Swagger技术(接口文档实时动态生成工具)
- 大数据学习之Linux基础
- Spring全家桶之SpringData——Spring Data JPA
- 异常 object references an unsaved transient instance - 的解决
- Spring的底层源码分析
- Mybatis的源码分析
- Tomcat的源码分析
- Servlet的源码分析
- 设计模式之行为型模式
- 设计模式之结构型模式
- 设计模式之建造者模式与原型模式