使用TS开发小程序中遇到的问题

在使用ts开发小程序的过程中，遇到了一些开发工具和关于ts的使用上的一些问题，并记录解决方法

1. ts开发过程中类型指定问题
Type 'number | undefined' is not assignable to type 'number'
例如：
const c: number = statistics.getLikeCount()

这样的类型指定是不允许的，提示后面返回值有可能是undefined，所以不能直接指定为number,所以需要考虑到undefined类型

解决方法：
const c: number = statistics.getLikeCount() || 0 – 这样即可
或

const c = statistics.getLikeCount()
let c2 = c == null ? c : 0

2. 微信开发者工具保留控制台日志

在使用ts编译为js的过程中，有时候会出现一些错误，但是默认的微信开发者工具会直接清除控制台的日志，所以根本看不见问题在哪里

解决方法：
控制台-齿轮-presever log

3. ts开发小程序中设置data值

js版本设置data中的数据的语法：

this.setData({})

但是在ts中，这样写的话，会一直会有报错，表示可能会设置undefined值到data中，所以需要指定设置的data值为非空，才可以通过编译
解决方法：

//第一种方法：  在设置值的时候，加上！标示非空的数据
this.setData!({}) // 第二种方法：在上这一行上面加上`//@ts-ignore` 表示跳过ts检查， 注意：前面的// 是需要的//@ts-ignore
_this.setData({
})

4. 在js中获取wxml中的data- 的数据

在小程序的wxml中好像是无法通过定义的方法传递参数，所以需要借助到一个属性： data-

例如：

<image src="..." bindtap="showVideoInfo" data-arrIndex="{{index}}"></image>

需要向showVideoInfo()方法传递参数，则需要通过data- 来传递参数，后面的arrIndex是自定义的，不过需要注意的是：在js中获取的时候，后面自定义的标识符必须要通过小写来获取

例如获取数据：

showVideoInfo(e: any) {// 获取到页面定义的索引，后面的自定义属性必须是小写const index: number = e.target.dataset.arrindex}

5. 设置页面的整体背景色

如果需要在wxss中设置当前页面的整体的背景色或者其他的设置，那么直接设置最外面的view属性是不合适的，这样只能设置这个view那么大的背景色，所以直接通过设置page的样式即可，代表当前页面

page {background-color: #000;
}

使用TS开发小程序中遇到的问题相关推荐

uni-app开发小程序中的历史记录
1.首先,你要把你搜索道的内容存到本地 2.然后在页面取出来 3.渲染页面即可 4.重复搜索过的会把之前的删除,添加最新的 5.这里还包括一键清空所有注意这里的搜索历史记录是真实项目中的的案例包括细 ...
快手小店电脑版_微信PC版更新！支持在小程序中使用微信支付 | 一周资讯
小程序1. 微信PC版更新,支持在小程序中使用微信支付.12月19日,微信PC端推出内测版2.7.2.73,新版本支持以下新功能:新增看一看精选内容,新的订阅号浏览体验,支持在小程序中使用微信支付.( ...
开发微信小程序中SSL协议的申请、证书绑定、TLS 版本处理等
在上篇随笔<基于微信小程序的系统开发准备工作>介绍了开发微信小程序的一些前期的架构设计.技术路线 .工具准备等方面内容,本篇随笔继续这个步骤,逐步介绍我们实际开发过程中对SSL协议的申请及 ...
开发微信小程序中遇到的坑及解决方法
开发微信小程序中遇到的坑及解决方法参考文章: (1)开发微信小程序中遇到的坑及解决方法 (2)https://www.cnblogs.com/feiye512/p/6070052.html ...
小程序中里的bindinput_云开发实战分享|诗和远方：旅行小账本云开发
原创:豪豪前言最近沉迷小程序开发,发现了一款功能.界面.体验俱佳的小程序"旅行小账本".着手做了个简约版--"旅行小账本".效果比较满意,毕竟前后台一人单干 ...
uni-app 开发小程序,使用到u-charts.js时会出现弹框或下拉框部分与图标重叠的情况(还有在解决过程中出现 vasToTempFilePath: fail canvas is empty)
如下图,是我用uni-app开发小程序时出现视图与弹框或下拉框重叠的效果图,在微信开发工具上显示正常,但到了真机上就这样. 解决措施: 在小程序中canvas层级过高,导致z-index也无法让弹窗置 ...
微信开发小程序云开发云存储中文件下载地址实时读取文件内容实时下载地址解读
微信开发小程序云开发云存储中文件下载地址解读最近公司要我开发一款具备电子签名功能的微信小程序,虽然我是Android开发程序员,但...老总要求了那我就去做呗,好在微信小程序还算入门容易,网上有很多 ...
微信开发上传视频到服务器,微信小程序中实现上传视频的开发代码
微信小程序中实现上传视频的开发代码,视频,接口,上传,代码,服务器微信小程序中实现上传视频的开发代码易采站长站,站长之家为您整理了微信小程序中实现上传视频的开发代码的相关内容. 本篇文章给大家带来 ...
了解微信小程序、掌握微信小程序开发工具的使用、了解小程序的目录以及文件结构、掌握小程序中常用的组件、掌握WXML、WXSS、WXS的基本使用
1 微信小程序介绍以及开发准备 1.1 了解微信小程序百度百科: 微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及&quo ...

使用TS开发小程序中遇到的问题

使用TS开发小程序中遇到的问题相关推荐

最新文章

热门文章