微信小程序 + typescript集成初探

终于，终于要进入微信小程序的坑了吗？！（之前简单摸了一摸，但是最后因为没有实际业务场景最后随手写了点很水的小东西，没怎么具体接触）

这一次起步呢，就决定直接开始从集成ts的方向上入手～

首先！按照老夫一贯的日常风格，当然是先去找一堆相关文档看看山有多高，水有多深哈哈～

看了一下差不多的相关文档，随手放一篇比较精简觉得写的也比较清晰的：https://www.jianshu.com/p/a4d9754281eb

于是呢，我按照文章的部分创建了一个ts的小程序项目～

初始化的目录结构部分就是这个样子的，可以清晰的看到和一般的小程序项目不同的是，ts项目默认是使用了npm模块，miniprogram文件夹内就是我们小程序的主体内容部分和相关配置文件，每个ts文件都有一个配套的js文件。

值得注意的是，很多博客会说明集成ts的项目需要手动编译才会生效，但是没有说明原因，这一点让我觉得很奇怪，因为我记得微信开发者工具是可以配置保存时自动编译的，什么情况下会需要手动编译？？

答案在于，小程序实际取用的是.js文件，而非.ts文件，手动编译触发了.ts文件 => .js文件，微信小程序并没有通俗意义上的支持ts，只是为了众多的ts爱好者加了一层转换，而这层转换在保存时触发自动编译的时候并没有执行。

我分别在.js文件和.ts文件都写了一个test方法，输出内容为：js/ts文件test事件触发，此时不点击工具的手动编译，而是选择触发保存时候的自动化编译。

很明显的可以看到，其实这个时候读取的是js文件内的test事件。

这个时候我们再来点击手动编译，看一下结果。

通过上图所示或者下图所示方式进行手动编译

编译结束之后，我们再来看对应的.js文件，会发现内容被修改了，变得与ts文件内一致。

由此，明白了为什么各位大佬要说明需要进行手动编译。以上～

我在这里插了一行代码输出，发现手动编译的时候会触发tsc命令～而保存自动编译的时候不会触发到这一条命令～emmmmmmmmmm这个可能是产品设计上的点～

与此同时，明白了小程序的这一套逻辑之后就明白了为什么页面目录下既有.ts文件也有.js文件了。

于此同时，我去找了一下官方文档的相关内容：

https://developers.weixin.qq.com/miniprogram/dev/devtools/edit.html#TypeScript-%E6%94%AF%E6%8C%81

这里有提到配置编译前的预置命令，于是点开之后看到了如下内容：

这个是官方给出的示例内容，但是很微妙的是？我打开我的本地配置，emmmmmmmmmm好像在生成typescript小程序模版的时候就默认给配置了这个，但是保存的时候并没有执行～也就是说，保存自动编译的时候并没有执行这个。。

阿！找到了官方解释！实锤！和自己的猜测一模一样！

像我这样的人可能就会动态炸毛，因为js文件和ts文件同源，在写代码的时候万一是改动的js文件，触发一个手动编译给搞没了就很尴尬，特别是改动较多较大，通过ctrl + z已经无力回天的时候，简直就是病丧中的病丧！！！

ps：好了，本来想自己折腾一下在自动保存钩子触发执行tsc，发现组里大佬已经搞了一整套，后期可能会开源出来，所以这里就先告一段落。后期有机会会在这个地方放一下大佬的开源内容。

微信小程序 + typescript集成初探相关推荐

如何在微信小程序中集成认证服务—邮箱地址篇
近期华为AppGallary Connect的认证服务SDK新增支持了微信小程序.今天就来教大家如何在微信小程序中集成认证服务的邮箱地址认证方式 1.安装微信小程序环境首先进入微信小程序官网下载微信 ...
企业微信小程序_集成腾讯地图实现精准定位考勤打卡
开源项目地址:https://gitee.com/gblfy/tx-position-check-in 关于微信小程序集成腾讯地图详情,可以参考:https://blog.csdn.net/weixi ...
微信小程序怎么集成腾讯IM
首先确保小程序基础库版本 2.2.1 或以上.及开发者工具 1.02.1808300 或以上.(才能支撑npm) 操作步骤: 1.打开cmd ,进入项目的根目录,初始化 npm. 初始化之后,能做小程 ...
SAP Cloud for Customer和微信小程序的集成-原型开发示意图
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
企业微信小程序_集成微信小程序插件_地图选点插件
官网文档: https://lbs.qq.com/miniProgram/plugin/pluginGuide/locationPicker 具体操作参考官网文档即可,讲的很详细
微信小程序原生集成vant weapp注意点（https://youzan.github.io/vant-weapp/#/intro）
1.点击工具中构建npm 才会在项目中自动生成 miniprogram_npm文件夹 2.关于 Dialog 弹出框的使用注意事项前面的 ../../../具体看你自己项目的层级会有提示的
SAP成都研究院大卫哥：SAP C4C中国本地化之微信小程序集成
今天的文章来自Wu David,SAP成都研究院C4C开发团队的架构师,在加入团队之前曾经在SAP上海研究院工作,组内同事习惯亲切地称呼他为大卫哥. 大卫哥身高据Jerry目测有1米8以上,是成都C4 ...
如何用TypeScript开发微信小程序
微信小程序来了!这个号称干掉传统app的玩意儿虽然目前处于内测阶段,不过目前在应用号的官方文档里已经放出了没有内测号也能使用的模拟器了. 工具和文档可以参考官方文档:https://mp.weixin ...
微信小程序 -- 原生JS集成腾讯IM实时聊天/实时音视频(踩坑及心得)
原生JS集成腾讯IM实时聊天/实时音视频对话功能一.腾讯IM集成前期准备实例创建及初始化 IM登录收发消息二.腾讯音视频实时互动跑通demo 三.同时集成即时通讯IM 和音视频直播的坑 ...

微信小程序 + typescript集成初探

微信小程序 + typescript集成初探相关推荐

最新文章

热门文章