使用TypeScript开发微信小程序(云开发)-入门篇

配置小程序云开发 TypeScript 环境

1. 检查本地 nodejs 环境

2. 安装 TypeScript npm install typescript --save-dev

3. 初始化/配置 TypeScript

3.1 初始化 ./node_modules/.bin/tsc --init

3.2 修改tsconfig.json配置

1. {
2.   "compilerOptions": {
3.     "target": "es2016",
4.     "module": "commonjs",
5.     "typeRoots": ["./typings"],
6.     "esModuleInterop": true,
7.     "strict": true,
8.     "skipLibCheck": true
9.   },
10.   "include": ["./miniprogram/**/*.ts", "./cloudfunctions/**/*.ts"],
11.   "exclude": ["node_modules"]
12. }

复制代码

3.3 添加 TypeScript .d.ts 文件

• 在项目根目录新建文件夹typings（与 tsconfig.json>compilerOptions>typeRoots 配置一致）
  
• 复制 https://github.com/wechat-miniprogram/api-typings/tree/master/types 目录下的所有文件到 typings 文件夹
  
• 如果无法访问，也可从这里下载： typings.zip
  

4. 配置编译命令

4.1 在package.json添加scripts命令

1. "tsc": "node ./node_modules/typescript/lib/tsc.js"<br>

复制代码

4.2 修改project.config.json，添加自定义处理命令

1. {
2.   "scripts": {
3.     "beforeCompile": "npm run tsc",
4.     "beforePreview": "npm run tsc",
5.     "beforeUpload": "npm run tsc"
6.   }
7. }<br>

复制代码

4.3 在“微信开发者工具”中启用自定义处理命令

示例

1. 调用微信云函数获取微信步数

1. // 小程序端,获取微信步数相关数据
2. async getWxRunData(): Promise<WechatMiniprogram.GetWeRunDataSuccessCallbackResult> {
3.   return new Promise((resolve, reject) => {
4.     wx.getWeRunData({
5.       success: resolve,
6.       fail: reject
7.     });
8.   });
9. }
11. // 云函数 getOpenData
12. export const main = async (event: { cloudID: string }) => {
13.     const { cloudID } = event;
14.     ...
15.     // 通过云调用直接获取开放数据
16.     const openData = await cloud.getOpenData({
17.       list: [cloudID]
18.     })
19.     return {
20.       errCode: 0,
21.       errMsg: '获取成功',
22.       data: openData.list[0].data
23.     }
24.     ...
25. }

复制代码

2. 云函数调用数据库存储用户步数

1. // 小程序端
2. await wx.cloud.callFunction({
3.   name: 'createUserStep',
4.     data: {
5.       step
6.     }
7. });
9. // 云函数 createUserStep
10. const { step } = event;
11. const wxContext = cloud.getWXContext();
12. const openid = wxContext.OPENID;
13. const userStepQuery = {
14.   openid,
15.   date: db.RegExp({
16.     regexp: `^${getCurrentDate()}`,
17.   })
18. }
19. const userStep = await userStepCollection.where(userStepQuery).get() as cloud.DB.IQueryResult;
20. if (userStep.data.length > 0) {
21.   userStepCollection.doc(userStep.data[0]._id!).update({ data: { step } })
22. } else {
23.   userStepCollection.add({
24.     data: {
25.       step,
26.       openid,
27.       date: getCurrentDate()
28.     }
29.   })
30. }
31. return userStep.data;<br><br>

复制代码

Github地址：https://github.com/greywen/MiniprogramCloudDevelopmentTemplate-TypeScript
参考：
https://www.cnblogs.com/xiabings/p/17171277.html

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！