博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序开发实战——人体生物钟开发分享
阅读量:6442 次
发布时间:2019-06-23

本文共 1408 字,大约阅读时间需要 4 分钟。

hot3.png

先看下最后的效果图:

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

人体生物钟小程序源码: ,欢迎提意见。

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

一、Typescript开发环境搭建

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

npm install -g typescript

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

194923_vyif_915967.png

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

最基本的命令:

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

 

二、微信小程序开发工具

这个没有什么多说的,选择官方的开发工具即可。下载地址:

按官方的简易教程新建项目:

人体生物钟要同时使用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文件  ]}

200229_q96P_915967.png

在上图可以看到,使用了tsc -w命令来实时编译ts文件,这样在小程序开发工具目录就能实时得到编译后的js文件。这里我只有一个ts文件wxPsi.ts,编译到小程序工具目录下就是wxPsi.js(不要直接去修改这里的js文件,编译的时候会覆盖),如下图:

200441_p4fs_915967.png

 

微信小程序开发工具使用非常简单,直接看官方的文档一点问题没有,故此不深入。

人体生物钟原理很简单,就是先得到从出生日期(阳历)到今天的天数,然后根据不同的系数就可以算出体力、情绪、智力值。

200908_4DRC_915967.png

体力 = Sin * PI * 生存天数/23

情绪 = Sin * PI * 生存天数/28
智力 = Sin * PI * 生存天数/33

是不是很简单?其实这样就可以通过Excel来生成生物钟曲线。此小程序功能实在太简单,大家自行看源码研究吧,有意见和问题都可以联系我讨论,谢谢!

最后特别感谢:

https://github.com/xiaolin3303/wx-charts

提供的小程序图表组件,我去除了大多数不用的代码,只保留了线图功能。不知道微信官方的图表组件什么时候发布?

转载于:https://my.oschina.net/u/915967/blog/1616367

你可能感兴趣的文章
Android工具HierarchyViewer 代码导读(2) -- 建立Eclipse调试环境
查看>>
GC配置对性能的帮助
查看>>
java list按时间倒序、首字母排序
查看>>
hls之m3u8、ts流格式详解
查看>>
中国有望成为全球最大3D打印市场
查看>>
ecshop在其他的页面调用首页的flash主广告的方法
查看>>
lamp安装
查看>>
BDDynamicGridViewController
查看>>
【笔记】《活法》(稻盛和夫)
查看>>
C语言的一些误用和知识总结
查看>>
几何画板如何绘制动态正切函数图像
查看>>
实操演练!MathType几个绝妙小技巧!
查看>>
ChemDraw常用到的几种技巧
查看>>
css中单位 px、em 的区别【转载】
查看>>
Spring执行任务(四)之Quartz(不继承QuartzJobBean类)
查看>>
python3导入paramiko模块
查看>>
软件项目送上门来了,还要学会说"不",接了项目拿了定金噩梦才刚刚开始
查看>>
循环、迭代、遍历和递归
查看>>
忘记mysql的root密码
查看>>
使用JavaScript 和 CSS 实现图像缩放和剪裁(转)
查看>>