使用TypeScript开发微信小程序的方法
作者:微软一站式示例代码库 时间:2023-08-30 10:42:03
TypeScript简介:
TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。安德斯·海尔斯伯格,C#的首席架构师,已工作于TypeScript的开发。
TypeScript扩展了JavaScript的语法,所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。TypeScript是为大型应用之开发而设计,而编译时它产生 JavaScript 以确保兼容性。
TypeScript 支持为已存在的 JavaScript 库添加类型信息的头文件,扩展了它对于流行的库如 jQuery,MongoDB,Node.js 和 D3.js 的好处。
微信小程序来了!这个号称干掉传统app的玩意儿虽然目前处于内测阶段,不过目前在应用号的官方文档里已经放出了没有内测号也能使用的模拟器了。
工具和文档可以参考官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1477926804193
TypeScript:
TypeScript是C#之父Anders Hejlsberg的又一力作,相信喜欢C#语法的朋友们对TypeScript一定也会爱不释手。
简单的聊一聊TypeScript吧
TS是一个应用程序级的JavaScript开发语言。
TS是JavaScript的超集,可以编译成纯JavaScript。
TS跨浏览器、跨操作系统、跨主机,开源。
TS始于JS,终于JS。遵循JavaScript的语法和语义,方便了无数的JavaScript开发者。
TS可以重用现有的JavaScript代码,调用流行的JavaScript库。
TS可以编译成简洁、简单的JavaScript代码,在任意浏览器、Node.js或任何兼容ES3的环境上运行。
TypeScript比JavaScript更具开发效率,包括:静态类型检查、基于符号的导航、语句自动完成、代码重构等。
TS提供了类、模块和接口,更易于构建组件。
顺便说一句,TypeScript虽然只关心生成JavaScript之前的这些内容(意味着不关心生成出的JS代码的运行效率),但是根据鄙人的观察和比较,TypeScript所生成的JavaScript代码比绝大部分的前台开发自己写的JavaScript的代码质量高至少一个数量级!!
TypeScript另一个优点:
TypeScript在各大主流的IDE和编辑器里有智能提示!
重要的事情要说三遍!写TypeScript有智能提示!写TypeScript有智能提示!写TypeScript有智能提示!
用TypeScript开发微信小程序
扯了半天TypeScript,那么究竟怎么用TypeScript开发微信小程序呢?
非常简单,和微信官方的JavaScript开发方式没有太大区别,依旧是4个核心文件
App: 代码整个应用程序的抽象对象,可以设置全局的方法和变量
Page: 页面抽象对象,承载页面业务逻辑
WXML: 页面的结构,相当于html
JSON: 配置文件
WXSS: 页面的样式,相当于css
由于目前腾讯没有小程序的TypeScript版本的API,所以OneCode team针对目前腾讯放出的所有的小程序JavaScript API开发了一个TypeScript版本的API类型定义文件 wxAPI.d.ts
只需要在您的程序中引用该文件,如果是使用Visual Studio来开发的话,就能有代码提示了。
下面是用TypeScript开发的Demo App的代码示例:
/// <reference path="./wxAPI.d.ts"/>
App({
onLaunch: function() {
//调用API从本地缓存中获取数据
let logs: any = wx.getStorageSync('logs');
if (!Array.isArray(logs)) {
logs = [];
}
(<any[]>logs).unshift(Date.now());
wx.setStorageSync('logs', logs);
},
getUserInfo: function(cb: (param: any) => void) {
let that = this
if (this.globalData.userInfo) {
cb(this.globalData.userInfo)
} else {
//调用登录接口
wx.login({
success: () => {
wx.getUserInfo({
success: (res) => {
that.globalData.userInfo = res.userInfo;
cb(that.globalData.userInfo);
}
});
}
});
}
},
globalData: {
userInfo: null
}
});
感兴趣的朋友,可以去 https://code.msdn.microsoft.com/How-to-develop-WeChat-1105555e 上面下载完整的代码样例以及非常关键的微信小程序TypeScript API定义文件!
更多脚本样例, 访问微软One Code样例库:http://aka.ms/onescriptsamples 更多代码样例, 访问微软One Script样例库:http://aka.ms/onecodesamples
以上所述是小编给大家介绍的使用TypeScript开发微信小程序的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
来源:http://www.cnblogs.com/onecodeonescript/p/6060862.html
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
.net中前台javascript与后台c#函数相互调用问题
简单了解Java方法的定义和使用实现
![](https://img.aspxhome.com/file/2023/1/126351_0s.png)
Spring Boot中lombok的安装与使用详解
![](https://img.aspxhome.com/file/2023/5/66055_0s.jpg)
Android实现语音合成与识别功能
![](https://img.aspxhome.com/file/2023/4/138344_0s.jpg)
c++与c#的时间转换示例分享
java.lang.NoSuchMethodException: com.sun.proxy.$Proxy58.list错误解决办法
使用maven profile指定配置文件打包适用多环境的方法
![](https://img.aspxhome.com/file/2023/7/64507_0s.png)
C++类中六个默认的成员函数详解
![](https://img.aspxhome.com/file/2023/4/129534_0s.png)
FrameLayout和Fragment处理Android应用UI布局实例
![](https://img.aspxhome.com/file/2023/1/137201_0s.png)
java实现分布式项目搭建的方法
![](https://img.aspxhome.com/file/2023/2/96262_0s.png)
SpringMVC源码解读之HandlerMapping - AbstractUrlHandlerMapping系列request分发
Java找不到或无法加载主类及编码错误问题的解决方案
C# 文字代码页 文字编码的代码页名称速查表
C#前端验证和后台验证代码实例
![](https://img.aspxhome.com/file/2023/6/114066_0s.png)
Android实现清除单个域名的cookie
Kafka常用命令之kafka-console-consumer.sh解读
Android Studio下Flutter环境搭建图文教程
![](https://img.aspxhome.com/file/2023/5/138895_0s.jpg)
shiro实现单点登录(一个用户同一时刻只能在一个地方登录)
![](https://img.aspxhome.com/file/2023/3/68193_0s.png)
IDEA插件之彩虹括号Rainbow Brackets使用介绍
![](https://img.aspxhome.com/file/2023/5/98125_0s.png)
SpringBoot2.0 ZipKin示例代码
![](https://img.aspxhome.com/file/2023/9/70989_0s.png)