微信小程序开发实战——人体生物钟开发分享

最新推荐文章于 2022-09-27 10:32:50 发布

weixin_33890499

最新推荐文章于 2022-09-27 10:32:50 发布

阅读量310

点赞数

文章标签： javascript 开发工具 json ViewUI

原文链接：https://my.oschina.net/u/915967/blog/1616367

版权

2019独角兽企业重金招聘Python工程师标准>>>

先看下最后的效果图：

要在手机上体验，可以扫描下面的小程序二维码体验（小程序搜索：生物钟），觉得可以可以转发给你的朋友们。

人体生物钟小程序源码：https://gitee.com/liujiuwu/MyPsi ,欢迎提意见。

下面开始进入正题，此小程序的核心js代码采用typescript写的(边学边写，难免有些不合理的地方，请海涵），所有首先要安装typescript的开发环境。

一、Typescript开发环境搭建

我选择的开发环境是 VS Code ，大家可以自行选择自己喜欢的IDE，首先下安装nodejs，相信大家都会安装。安装完nodejs后，按Typescript文档来安装Typescript.

npm install -g typescript

正确执行完上面的命令后，ts就算安装完成了。

tsc是一个非常重要的命令，具体使用可以查看官方文档和命令行帮助。

最基本的命令：

tsc helloworld.ts //编译ts源文件

tsc -w //监控tsconfig.json中配置的ts源文件目录进行实时编译

二、微信小程序开发工具

这个没有什么多说的，选择官方的开发工具即可。下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

按官方的简易教程新建项目：https://mp.weixin.qq.com/debug/wxadoc/dev/

人体生物钟要同时使用vs code和微信小程序开发工具，在vs code里写ts文件，编译到微信小程序的指定目录。因此关键是在tsconfig.json中的配置。

tsconfig.json配置文件内容如下：

{
  "compileOnSave": true,//保存即编译
  "compilerOptions": {
    "target": "es5",
    "outDir": "./utils",//这个是小程序放js代码的目录
    "module": "commonjs",
    "sourceMap": false,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "experimentalDecorators":true
  },
  "include": [
    "src/**/*.ts" //只编译*.ts文件
  ]
}