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 相关文章推荐
input+select(multiple) 实现下拉框输入值
May 21 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
深入理解ES6的迭代器与生成器
Aug 19 Javascript
vue 引入公共css文件的简单方法(推荐)
Jan 20 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
vue 兄弟组件的信息传递的方法实例详解
Aug 30 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
JS中数据结构之栈
2019/01/01 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
wxPython中listbox用法实例详解
2015/06/01 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
python分割列表(list)的方法示例
2017/05/07 Python
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
numpy.random模块用法总结
2019/05/27 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
Django框架请求生命周期实现原理
2020/11/13 Python
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
产品发布会策划方案
2014/05/12 职场文书
保护地球的标语
2014/06/17 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
环保守法证明
2015/06/24 职场文书
关于幸福的感言
2015/08/03 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
Java基础之线程锁相关知识总结
2021/06/30 Java/Android