TypeScript 做微信小程序资料汇总_ts小程序,自定义组件properties中的type不能设置成自定义的类型-CSDN博客

本文链接：https://blog.csdn.net/candyguy242/article/details/84667310

小程序官网：

https://mp.weixin.qq.com

https://developers.weixin.qq.com/miniprogram/introduction/index.html

vscode开发微信小程序插件：

minapp;
vscode wxml;
wxml;
WeApp Snippets;
wechat-snippet;
Easy WXLESS;


其他插件:
Paste JSON as Code
TSLint
TypeScript Hero
Path Intellisense
Git History
TypeScript Importer
Beautify css/sass/scss/less
Beautify
Blade Runner
Settings Sync

皮肤主题：
One Monokai Theme
Ayu

Visual Studio Code 快捷键大全（Windows）

https://www.cnblogs.com/nzbin/p/7504591.html

微信开发工具对npm的支持

https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html
注意：每次npm module发生了变化，都要在微信IDE中重新执行一下构建npm的操作

npm知识

关于 npm 最详细的介绍
https://blog.csdn.net/csdn_yudong/article/details/78946708
npm常用命令及参数详解
https://segmentfault.com/a/1190000012099112

小程序开发框架

腾讯自己出的wepy适合有前端vue开发经验的人使用。对没有相关经验的人，推荐：
Grace 一个精巧、易用的微信小程序开发辅助库
https://github.com/wendux/grace

小程序自定义tabBar（类似咸鱼）

https://blog.csdn.net/dt1991524/article/details/82699682

setData的一些高级用法

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#pageprototypesetdataobject-data-function-callback

组件使用注意事项

下列选择器的说明不仅是组件内部，对引用组件的页面来说也要注意，否则可能会遇到selectComponent找不到组件的情况。

组件样式
组件对应 wxss 文件的样式，只对组件wxml内的节点生效。编写组件样式时，需要注意以下几点：

组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。
组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。
子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。
继承样式，如 font 、 color ，会从组件外继承到组件内。
除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效。

小程序中的图片等资源文件名不要有空格，真机上会加载不出来

前端知识：

5个最优秀的微信小程序UI组件库

https://www.jianshu.com/p/4182f4a18cb6
最推荐有赞和WUX的组件
图表组件：百度的Echarts

TypeScript 文件与模块

https://blog.higan.me/namespace-and-module-in-typescript/

从 JavaScript 到 TypeScript - 接口

https://segmentfault.com/a/1190000010979494

TypeScript 中的Json自动解析并组装为类对象

可以使用class-transformer,但是目前在对象中有嵌套对象时，还有很多问题，导致不能正常运行：
https://github.com/typestack/class-transformer
使用时注意在tsconfig.json的compileOptions设置emitDecoratorMetadata和experimentalDecorators为true：

"compilerOptions": {
        "outDir": "build/es5",
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "noImplicitAny": true,
        "declaration": true
    }

第二种方式：
定义只有与数据拥有相同属性，但不含任何方法的interface，使用“鸭子辨型法”，将数据在编译时指定interface类型，然后用另一个类来封装该数据对象，并提供对数据进行操作的方法。

技巧：

VSCode自动编译TypeScript步骤

注意：一定不要修改VSCode的默认终端，以保证命令的自动执行！！
先自行安装typescript编译环境；

1. 安装插件：Blade Runner-Run Task When Open；
2. 在项目根目录执行tsc --init,生成tsconfig.json文件；
3. 在 VScode 里面选择菜单-终端-配置默认生成任务- tsc 监视:tsconfig.json。

上述会生成一个 .vscode 文件夹，里面有一个tasks.json 上面插件会在 VSCode 每次启动的时候，自动根据 task.json 运行一些命令.
这样，编译 ts 的工作就变成完全自动的了。

如果看不到 tsc 构建这个选项，可能需要打开一个 ts 文件后再进行上述操作。
ts 文件编译成 js 文件后，微信开发者工具也会自动的编译 js 文件。

Less插件技巧

安装Easy WXLESS后，可以在不需要编译为wxss的less文件首行增加注释：//out:false

VSCode中直接调试TypeScript

https://blog.csdn.net/candyguy242/article/details/84680588
https://github.com/TypeStrong/ts-node

开发中遇到的问题整理：

登录流程

手把手教会你小程序登录鉴权
https://segmentfault.com/a/1190000014234141
小程序：授权、登录、session_key、unionId
https://blog.csdn.net/qq_33594380/article/details/80431582

获取用户信息

https://developers.weixin.qq.com/community/develop/doc/000c2424654c40bd9c960e71e5b009

小程序text组件内部上边距的问题

https://www.cnblogs.com/xiaochongchong/p/9035374.html

Component中properties定义的属性

Component中properties定义的属性不能直接书写为自定义类型，自定义类型要书写为Object。
内置支持的类型详见：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html

px与rpx的使用

px是逻辑像素，以iphoe6的屏幕为标准，屏幕尺寸为4.7英寸，长跟宽分别为138.1mm与67.0mm，物理像素为750x1334，将此屏幕记为375pxx667px的逻辑分辨率，1px视觉大小依此固定。这一点与web标准兼容。
rpx是自动缩放，1rpx在不同手机上的视频大小会相应缩放。
比如一个栏在不同屏幕上都是固定高度的，那就用px就行。
如果一个组件在不同手机上要自适应地缩放大小，用rpx。

image组件的使用

image组件是个坑，使用时一定要指定大小，不然界面混乱，看不到预期效果！！！

scroll-view 整页滚动的坑

https://www.jianshu.com/p/26c501790ef5
解决方案：把scroll-view包起来，外层flex伸缩，然后一定要给scroll-view指定height属性，如 height:100%;

浅谈CSS3中的box-sizing（content-box与border-box）

https://blog.csdn.net/lizhengxv/article/details/78697847

页面跳转

Tips:
navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
调用页面路由带的参数可以在目标页面的onLoad中获取。

高级进阶

Promise 异步操作async/await

Promise作用：
解决回调地狱所带来的可靠性问题。
链接：https://www.zhihu.com/question/57071244/answer/151521659

这涉及 ES6 中的一个概念，叫作 Job Queue；Promise 中的一个个 then 就是一种 Job Queue。
关于Job QueueJavaScript Runtime 对于 Job Queue 与 Event Loop Queue 的处理有所不同。
相同点：
	都用作先进先出队列
相异点：
	每个 JavaScript Runtime 可以有多个 Job Queue，但只有一个 Event Loop Queue。
	当 JavaScript Engine 处理完当前事件队列中的代码后，再执行本次任务中所有的 Job Queue，
	然后再处理 Event Loop Queue（下一次事件循环任务）。

回调（例如 then 中的）如果可能同步、也可能异步，执行顺序就变成了不确定的，也就类似多线程中的竞态条件。
为了避免这种不确定性，then 的回调总是作为 Job Queue 中的下一个 Job 执行（异步执行）。

除此之外，Promise 的设计还是为了解决以下情形导致的不确定性：
Call the callback too early
Call the callback too late (or never)
Call the callback too few or too many times
Fail to pass along any necessary environment/parameters
Swallow any errors/exceptions that may happen

JavaScript 中的异步：Event Loop 及其他
https://zhuanlan.zhihu.com/p/22710155
玩转 Promise，随心所欲控制异步操作
https://juejin.im/entry/56c46015c24aa800528da4d5
你真的完全掌握了promise么？
https://juejin.im/post/5af29a62f265da0b8f628973
八段代码彻底掌握 Promise
https://juejin.im/post/597724c26fb9a06bb75260e8
异步解决方案----Promise与Await
https://juejin.im/post/5b1962616fb9a01e7c2783a8
TypeScript 再谈Promise
https://www.cnblogs.com/hammerc/p/8244544.html
一次性让你懂async/await，解决回调地狱
https://juejin.im/post/5b1ffff96fb9a01e345ba704
理解 async/await
https://segmentfault.com/a/1190000010244279
promise、async和await之执行顺序的那点事
https://segmentfault.com/a/1190000015057278
promises 很酷，但很多人并没有理解就在用了
https://blog.xinshangshangxin.com/2015/09/29/promise-problem

异步操作重点推荐：深入理解 Promise 五部曲：

https://segmentfault.com/a/1190000000586666
https://segmentfault.com/a/1190000000591382
https://segmentfault.com/a/1190000000593885
https://segmentfault.com/a/1190000000600268
https://segmentfault.com/a/1190000000611040

TypeScript 引入js库

如果要使用现有的js文件的话，需要对编译器增加–allowJS参数。可以修改tsconfig.json中的compilerOptions，将其中的"allowJs"设为true，如： “allowJs”: true，没有该字段的话增加该字段即可。另外在tsconfig中的"include"字段中将js文件的路径添加进去。建议增加一个专门的文件夹，用来存放所有要引入的js文件。比如都放到一个名为"jslibs"的目录中，然后在tsconfig.json的"include"字段中增加配置，匹配"jslibs"下的所有js文件，如：

 "include": [
    "./**/*.ts",
    "./src/jslibs/*.js"
  ]