final

README.md

@@ -1,2 +1,3 @@
 # clock
+C:\Users\dell\WeChatProjects\miniprogram-4\clock\1.png
 

app.json

@@ -0,0 +1,14 @@
+{
+  "pages": [
+    "pages/index/index",
+    "pages/logs/logs"
+  ],
+  "window": {
+    "backgroundTextStyle": "light",
+    "navigationBarBackgroundColor": "#fff",
+    "navigationBarTitleText": "Weixin",
+    "navigationBarTextStyle": "black"
+  },
+  "style": "v2",
+  "sitemapLocation": "sitemap.json"
+}

app.ts

@@ -0,0 +1,18 @@
+// app.ts
+App<IAppOption>({
+  globalData: {},
+  onLaunch() {
+    // 展示本地存储能力
+    const logs = wx.getStorageSync('logs') || []
+    logs.unshift(Date.now())
+    wx.setStorageSync('logs', logs)
+
+    // 登录
+    wx.login({
+      success: res => {
+        console.log(res.code)
+        // 发送 res.code 到后台换取 openId, sessionKey, unionId
+      },
+    })
+  },
+})

app.wxss

@@ -0,0 +1,10 @@
+/**app.wxss**/
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 200rpx 0;
+  box-sizing: border-box;
+} 

pages/index/debug.log

@@ -0,0 +1 @@
+[0604/211312.595:ERROR:registration_protocol_win.cc(102)] CreateFile: 系统找不到指定的文件。 (0x2)

pages/index/index.js

@@ -0,0 +1,118 @@
+Page({
+  width:0,
+  height:0,
+  onLoad:function(){
+    //获取系统信息
+    wx.getSystemInfo({
+      //获取系统信息成功，保存获取到的系统窗口的窗高
+      success:res=>{
+        this.width=res.windowWidth
+        this.height=res.windowWidth
+      }
+    })
+  },
+  timer:null,
+  onReady: function () {
+    //创建ctx实例
+    var ctx =wx.creatCanvasContext('mycanvas')
+    //将角度转换为弧度，方便在后面使用
+    //计算公式：弧度=角度*Math.PI/180
+    const D6=6*Math.PI/180
+    const D30=30*Math.PI/180
+    const D90=90*Math.PI/180
+    //获取宽和高的值
+    var width=this.width,height=this.height
+    //计算表盘半径，留下30px外边距
+    var radius=width/2-30
+    //每秒绘制一次
+    draw ()
+    this.timer=setInterval(draw,1000)
+    //绘制函数
+    function draw(){
+      //设置坐标轴原点为窗口的中心点
+      ctx.translate(width/2,height/2)
+      //绘制表盘
+      drawClock(ctx,radius)
+      //绘制指针
+      drawHand(ctx,radius)
+      //执行绘制
+      ctx.draw()
+    }
+    //绘制表盘部分
+    function drawClock(ctx,radius){
+
+    }
+    //绘制指针部分
+    function drawHand(ctx,radius){
+    }
+    function drawClock(ctx,radius){
+      ctx.setLinWidth(2)
+      ctx.beginpath()
+      ctx.arc(0,0,radius,0,2*Math.PI,true)
+      ctx.setLineWidth(1)
+      ctx.beginPath()
+      ctx.arc(0,0,8,0,2*Math.PI,true)
+      ctx.stroke()
+      ctx.setLineWidth(5)
+      for(var i=0;i<12;++i){
+        ctx.rotate(D30)
+        ctx.beginPath()
+        ctx.moveTo(radius,0)
+        ctx.lineTo(radius-15,0)
+        ctx.stroke()
+      }
+      ctx.setLineWidth(1)
+      for(var i=0;i<60;++i){
+        ctx.rotate(D6)
+        ctx.beginPath()
+        ctx.moveTo(radius,0)
+        ctx.lineTo(radius-10,0)
+        ctx.stroke()
+      }
+      ctx.setFontSize(20)
+      ctx.textBaseline='middle'
+      var r=radius-30
+      for(var i=1;i<=12;++i){
+        var x=r*Math.cos(D30*i-D90)
+        var y=r*Math.sin(D30*i-D90)
+        if(i>10){
+          ctx.fillText(i,x-12,y)
+        }else{
+          ctx.fillText(i,x-6,y)
+        }
+      }
+    }
+    function drawHand(ctx,radius){
+      var t=new Date()
+      var h=t.getHours()
+      var m=t.getMinutes()
+      var s=t.getSeconds()
+      h=h>12?h-12:h
+      ctx.rotate(-D90)
+      ctx.save()
+      ctx.rotate(D30*(h+m/60+s/3600))
+      ctx.setLineWidth(6)
+      ctx.beginPath()
+      ctx.moveTo(-20,0)
+      ctx.lineTo(radius/2.6,0)
+      ctx.stroke()
+      ctx,restore()
+      ctx.save()
+      ctx.rotate(D6*(m+s/60))
+      ctx.setLineWidth(4)
+      ctx.beginPath()
+      ctx.moveTo(-20,0)
+      ctx.lineTo(radius/1.8,0)
+      ctx.stroke()
+      ctx.restore()
+      ctx.save()
+      ctx.rotate(D6*s)
+      ctx.setLineWidth(2)
+      ctx.beginPath()
+      ctx.moveTo(-20,0)
+      ctx.lineTo(radius/1.6,0)
+      ctx.stroke()
+      ctx.restore()
+    }    
+  }
+})

pages/index/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/index/index.wxml

@@ -0,0 +1 @@
+  <canvas canvas-id="mycanvas" class="mycanvas"></canvas>

pages/index/index.wxss

@@ -0,0 +1,5 @@
+.mycanvas{
+  width: 100%;
+  height: 100%;
+  position: fixed;
+}

pages/logs/logs.json

@@ -0,0 +1,4 @@
+{
+  "navigationBarTitleText": "查看启动日志",
+  "usingComponents": {}
+}

pages/logs/logs.ts

@@ -0,0 +1,19 @@
+// logs.ts
+// const util = require('../../utils/util.js')
+import { formatTime } from '../../utils/util'
+
+Page({
+  data: {
+    logs: [],
+  },
+  onLoad() {
+    this.setData({
+      logs: (wx.getStorageSync('logs') || []).map((log: string) => {
+        return {
+          date: formatTime(new Date(log)),
+          timeStamp: log
+        }
+      }),
+    })
+  },
+})

pages/logs/logs.wxml

@@ -0,0 +1,6 @@
+<!--logs.wxml-->
+<view class="container log-list">
+  <block wx:for="{{logs}}" wx:key="timeStamp" wx:for-item="log">
+    <text class="log-item">{{index + 1}}. {{log.date}}</text>
+  </block>
+</view>

pages/logs/logs.wxss

@@ -0,0 +1,8 @@
+.log-list {
+  display: flex;
+  flex-direction: column;
+  padding: 40rpx;
+}
+.log-item {
+  margin: 10rpx;
+}

sitemap.json

@@ -0,0 +1,7 @@
+{
+  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
+  "rules": [{
+  "action": "allow",
+  "page": "*"
+  }]
+}

utils/util.ts

@@ -0,0 +1,19 @@
+export const formatTime = (date: Date) => {
+  const year = date.getFullYear()
+  const month = date.getMonth() + 1
+  const day = date.getDate()
+  const hour = date.getHours()
+  const minute = date.getMinutes()
+  const second = date.getSeconds()
+
+  return (
+    [year, month, day].map(formatNumber).join('/') +
+    ' ' +
+    [hour, minute, second].map(formatNumber).join(':')
+  )
+}
+
+const formatNumber = (n: number) => {
+  const s = n.toString()
+  return s[1] ? s : '0' + s
+}