经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
typescript编写微信小程序-创建项目
来源:cnblogs  作者:无聊的人_nikolas  时间:2021/2/1 11:55:33  对本文有异议

创建项目

在微信开发者工具创建项目,在语言中选择 TypeScript

改造项目

  1. 编辑 package.json 文件,修改 miniprogram-api-typingstypescript 版本
  1. {
  2. "name": "miniprogram-ts-quickstart",
  3. "version": "1.0.0",
  4. "description": "",
  5. "scripts": {
  6. "compile": "./node_modules/typescript/bin/tsc",
  7. "tsc": "node ./node_modules/typescript/lib/tsc.js"
  8. },
  9. "keywords": [],
  10. "author": "",
  11. "license": "",
  12. "dependencies": {
  13. },
  14. "devDependencies": {
  15. "typescript": "^4.1.3",
  16. "miniprogram-api-typings": "^2.12.1-beta.0"
  17. }
  18. }
  1. 编辑 tsconfig.json 文件, 修改 lib 为 ["esnext"],支持最新语法, 删除 typeRoots 配置项
  1. {
  2. "compilerOptions": {
  3. "strictNullChecks": true,
  4. "noImplicitAny": true,
  5. "module": "CommonJS",
  6. "target": "ES5",
  7. "allowJs": false,
  8. "experimentalDecorators": true,
  9. "noImplicitThis": true,
  10. "noImplicitReturns": true,
  11. "alwaysStrict": true,
  12. "inlineSourceMap": true,
  13. "inlineSources": true,
  14. "noFallthroughCasesInSwitch": true,
  15. "noUnusedLocals": true,
  16. "noUnusedParameters": true,
  17. "strict": true,
  18. "removeComments": true,
  19. "pretty": true,
  20. "strictPropertyInitialization": true,
  21. "lib": ["esnext"]
  22. },
  23. "include": [
  24. "./**/*.ts"
  25. ],
  26. "exclude": [
  27. "node_modules"
  28. ]
  29. }
  1. 执行 npm install

  2. 删除项目下 typings 目录, 的 复制 node_modules 下 miniprogram-api-typings 的 types 文件到项目根目录

  3. 在 miniprogram 下创建 interface 目录并创建 IAppOption.ts 文件,最后编辑 app.ts 文件,

  1. // IAppOption.ts
  2. export default interface IAppOption {
  3. globalData: {
  4. text: string;
  5. }
  6. }
  7. // app.ts
  8. import IAppOption from "./interface/IAppOption";
  9. App<IAppOption>({
  10. globalData: {
  11. text: "Hello,Word!"
  12. },
  13. onLaunch() {
  14. }
  15. })
  1. 在 详细 -> 本地设置 -> 调试基础库,直接选择最新的

使用 Promise 化的微信小程序api

以前可以通过 miniprogram-api-promise 这个包来完成 api Promise 化,或者自己写

现在可以直接使用,比如 wx.getStorageInfo ,在 lib.wx.api.d.ts 中返回了 PromisifySuccessResult

PromisifySuccessResult 返回了Promise

  1. getStorageInfo<TOption extends GetStorageInfoOption>(
  2. option?: TOption
  3. ): PromisifySuccessResult<TOption, GetStorageInfoOption>
  4. type PromisifySuccessResult<
  5. P,
  6. T extends AsyncMethodOptionLike
  7. > = P extends { success: any }
  8. ? void
  9. : P extends { fail: any }
  10. ? void
  11. : P extends { complete: any }
  12. ? void
  13. : Promise<Parameters<Exclude<T['success'], undefined>>[0]>

两种用法,大多数api都支持

  1. wx.getStorageInfo({
  2. success: () => {
  3. console.log('成功执行')
  4. },
  5. fail: () => {
  6. console.log('失败执行')
  7. },
  8. complete: () => {
  9. console.log('接口调用结束')
  10. }
  11. })
  12. wx.getStorageInfo().then(() => {
  13. console.log('成功执行')
  14. }).catch(() => {
  15. console.log('失败执行')
  16. }).finally(() => {
  17. console.log('接口调用结束')
  18. })

源码: https://github.com/NikolasSky/ts-miniprogram/tree/master/ts-miniprogram-base

原文链接:http://www.cnblogs.com/plum-nikolas/p/14339990.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号