• 售前

  • 售后

热门帖子
入门百科

typescript编写微信小步调创建项目标方法

[复制链接]
北右酝 显示全部楼层 发表于 2021-10-25 20:05:58 |阅读模式 打印 上一主题 下一主题
创建项目

在微信开发者工具创建项目,在语言中选择
  1. TypeScript
复制代码
改造项目

编辑
  1. package.json
复制代码
文件,修改
  1. miniprogram-api-typings
复制代码
  1. typescript
复制代码
版本
  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. }
复制代码
编辑 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
复制代码
删除项目下 typings 目录, 的 复制 node_modules 下 miniprogram-api-typings 的 types 文件到项目根目录
在 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. })
复制代码
在 详细 -> 本地设置 -> 调试根本库,直接选择最新的
利用 Promise 化的微信小步伐api
以前可以通过
  1. miniprogram-api-promise
复制代码
这个包来完成 api Promise 化,大概本身写
如今可以直接利用,比如 wx.getStorageInfo ,在
  1. lib.wx.api.d.ts
复制代码
中返回了
  1. PromisifySuccessResult
复制代码
  1. 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
到此这篇关于typescript编写微信小步伐创建项目的方法的文章就先容到这了,更多相关typescript开发微信小步伐内容请搜索草根技术分享以前的文章或继续欣赏下面的相关文章渴望大家以后多多支持草根技术分享!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作