typescript编写微信小程序创建项目的方法


Posted in Javascript onJanuary 29, 2021

创建项目

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

改造项目

编辑 package.json 文件,修改 miniprogram-api-typingstypescript 版本

{
 "name": "miniprogram-ts-quickstart",
 "version": "1.0.0",
 "description": "",
 "scripts": {
 "compile": "./node_modules/typescript/bin/tsc",
 "tsc": "node ./node_modules/typescript/lib/tsc.js"
 },
 "keywords": [],
 "author": "",
 "license": "",
 "dependencies": {
 },
 "devDependencies": {
 "typescript": "^4.1.3",
 "miniprogram-api-typings": "^2.12.1-beta.0"
 }
}

编辑 tsconfig.json 文件, 修改 lib 为 ["esnext"],支持最新语法, 删除 typeRoots 配置项

{
 "compilerOptions": {
 "strictNullChecks": true,
 "noImplicitAny": true,
 "module": "CommonJS",
 "target": "ES5",
 "allowJs": false,
 "experimentalDecorators": true,
 "noImplicitThis": true,
 "noImplicitReturns": true,
 "alwaysStrict": true,
 "inlineSourceMap": true,
 "inlineSources": true,
 "noFallthroughCasesInSwitch": true,
 "noUnusedLocals": true,
 "noUnusedParameters": true,
 "strict": true,
 "removeComments": true,
 "pretty": true,
 "strictPropertyInitialization": true,
 "lib": ["esnext"]
 },
 "include": [
 "./**/*.ts"
 ],
 "exclude": [
 "node_modules"
 ]
}

执行 npm install

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

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

// IAppOption.ts
export default interface IAppOption {
 globalData: {
  text: string;
 }
}
// app.ts
import IAppOption from "./interface/IAppOption";

App<IAppOption>({
 globalData: {
  text: "Hello,Word!"
 },
 onLaunch() {
 }
})

在 详细 -> 本地设置 -> 调试基础库,直接选择最新的

使用 Promise 化的微信小程序api

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

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

PromisifySuccessResult 返回了Promise

getStorageInfo<TOption extends GetStorageInfoOption>(
option?: TOption
): PromisifySuccessResult<TOption, GetStorageInfoOption>

type PromisifySuccessResult<
P,
 T extends AsyncMethodOptionLike
> = P extends { success: any }
 ? void
 : P extends { fail: any }
 ? void
 : P extends { complete: any }
 ? void
 : Promise<Parameters<Exclude<T['success'], undefined>>[0]>

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

wx.getStorageInfo({
 success: () => {
  console.log('成功执行')
 },
 fail: () => {
  console.log('失败执行')
 },
 complete: () => {
  console.log('接口调用结束')
 }
})
wx.getStorageInfo().then(() => {
 console.log('成功执行')
}).catch(() => {
 console.log('失败执行')
}).finally(() => {
 console.log('接口调用结束')
})

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

到此这篇关于typescript编写微信小程序创建项目的方法的文章就介绍到这了,更多相关typescript开发微信小程序内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 字符串连接性能优化
Dec 20 Javascript
五个jQuery图片画廊插件 推荐
May 12 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
jQuery中triggerHandler()方法用法实例
Jan 19 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
js实现碰撞检测
Jan 29 #Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 #jQuery
vue穿梭框实现上下移动
Jan 29 #Vue.js
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 #Javascript
vue使用transition组件动画效果的实例代码
Jan 28 #Vue.js
Bootstrap FileInput实现图片上传功能
Jan 28 #Javascript
js实现简单的倒计时
Jan 28 #Javascript
You might like
php AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
vuejs实现标签选项卡动态更改css样式的方法
2018/05/31 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
python pygame实现球球大作战
2019/11/25 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
python缩进长度是否统一
2020/08/02 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
营销主管自我评价怎么写
2013/09/19 职场文书
师范生教师实习自我鉴定
2013/09/27 职场文书
领导调研接待方案
2014/02/27 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
聘任书范文大全
2015/09/21 职场文书
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android
python保存图片的四个常用方法
2022/02/28 Python
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis
Oracle中日期的使用方法实例
2022/07/07 Oracle