使用TypeScript开发微信小程序(云开发)-入门篇
<h2>配置小程序云开发 TypeScript 环境</h2><h4>1. 检查本地 nodejs 环境</h4>
<p><img src="https://img2024.cnblogs.com/blog/809672/202504/809672-20250422220928828-1104584989.png"></p>
<h4>2. 安装 TypeScript <code>npm install typescript --save-dev</code></h4>
<p><img src="https://img2024.cnblogs.com/blog/809672/202504/809672-20250422220947023-1907086948.png"></p>
<h4>3. 初始化/配置 TypeScript</h4>
<h5>3.1 初始化 <code>./node_modules/.bin/tsc --init</code></h5>
<p><img src="https://img2024.cnblogs.com/blog/809672/202504/809672-20250422221010335-1671484463.png"></p>
<h5>3.2 修改<code>tsconfig.json</code>配置</h5>
<pre><code>{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"typeRoots": ["./typings"],
"esModuleInterop": true,
"strict": true,
"skipLibCheck": true
},
"include": ["./miniprogram/**/*.ts", "./cloudfunctions/**/*.ts"],
"exclude": ["node_modules"]
}
</code></pre>
<h5>3.3 添加 TypeScript .d.ts 文件</h5>
<ol>
<li>在项目根目录新建文件夹<code>typings</code>（与 tsconfig.json>compilerOptions>typeRoots 配置一致）</li>
<li>复制 https://github.com/wechat-miniprogram/api-typings/tree/master/types 目录下的所有文件到 typings 文件夹</li>
<li>如果无法访问，也可从这里下载： typings.zip</li>
</ol>
<p><img src="https://img2024.cnblogs.com/blog/809672/202504/809672-20250422221050806-1779996371.png"></p>
<h4>4. 配置编译命令</h4>
<h5>4.1 在<code>package.json</code>添加<code>scripts</code>命令</h5>
<pre><code>"tsc": "node ./node_modules/typescript/lib/tsc.js"<br></code></pre>
<p><img src="https://img2024.cnblogs.com/blog/809672/202504/809672-20250422221114367-2023568269.png"></p>
<h5>4.2 修改<code>project.config.json</code>，添加自定义处理命令</h5>
<pre><code>{
"scripts": {
"beforeCompile": "npm run tsc",
"beforePreview": "npm run tsc",
"beforeUpload": "npm run tsc"
}
}<br></code></pre>
<p><img src="https://img2024.cnblogs.com/blog/809672/202504/809672-20250422221129132-1493886726.png"></p>
<h5>4.3 在“微信开发者工具”中启用自定义处理命令</h5>
<p><img src="https://img2024.cnblogs.com/blog/809672/202504/809672-20250422221143520-1886892303.png"></p>
<h2>示例</h2>
<h4>1. 调用微信云函数获取微信步数</h4>
<pre><code class="language-typescript">// 小程序端,获取微信步数相关数据
async getWxRunData(): Promise<WechatMiniprogram.GetWeRunDataSuccessCallbackResult> {
return new Promise((resolve, reject) => {
wx.getWeRunData({
success: resolve,
fail: reject
});
});
}
// 云函数 getOpenData
export const main = async (event: { cloudID: string }) => {
const { cloudID } = event;
...
// 通过云调用直接获取开放数据
const openData = await cloud.getOpenData({
list:
})
return {
errCode: 0,
errMsg: '获取成功',
data: openData.list.data
}
...
}
</code></pre>
<h4>2. 云函数调用数据库存储用户步数</h4>
<pre><code class="language-typescript">// 小程序端
await wx.cloud.callFunction({
name: 'createUserStep',
data: {
step
}
});
// 云函数 createUserStep
const { step } = event;
const wxContext = cloud.getWXContext();
const openid = wxContext.OPENID;
const userStepQuery = {
openid,
date: db.RegExp({
regexp: `^${getCurrentDate()}`,
})
}
const userStep = await userStepCollection.where(userStepQuery).get() as cloud.DB.IQueryResult;
if (userStep.data.length > 0) {
userStepCollection.doc(userStep.data._id!).update({ data: { step } })
} else {
userStepCollection.add({
data: {
step,
openid,
date: getCurrentDate()
}
})
}
return userStep.data;<br><br></code></pre>
<p><img src="https://img2024.cnblogs.com/blog/809672/202504/809672-20250422222138901-1907557228.png"></p>
<p><strong>Github地址：</strong>https://github.com/greywen/MiniprogramCloudDevelopmentTemplate-TypeScript</p>
<p>参考：<br>
https://www.cnblogs.com/xiabings/p/17171277.html
</p><br><br>
来源：https://www.cnblogs.com/greywen/p/18841741
頁:
[1]