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 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
JQuery 学习笔记01 JQuery初接触
May 06 Javascript
Javascript Object.extend
May 18 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 Javascript
JavaScript this使用方法图解
Feb 04 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 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
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
快速排序 php与javascript的不同之处
2011/02/22 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
python获取android设备的GPS信息脚本分享
2015/03/06 Python
Python实现方便使用的级联进度信息实例
2015/05/05 Python
Python 基础之字符串string详解及实例
2017/04/01 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
SQL Server笔试题
2012/01/10 面试题
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
建材投资建议书
2014/05/16 职场文书
节约能源标语
2014/06/17 职场文书
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android