企业官网建设流程全解析

小程序运行后，首页显示空白界面。过2秒以后显示计时界面。计时界面包含计时数字和三个计时按钮：开始计时、停止计时、重新计时。 计时按钮的初始值为60。 当点击 “开始计时” 按钮后开始倒计时。 点击 “停止计时” 按钮后停止计时。 如果当前倒计时的时间还没有到0，再点击 “开始计时” 按钮，接着倒计时。 如果已经倒计时到0，点击“开始计时” 或者 “停止计时”，数字仍然是0。 点击 “重新计时” 按钮后从60开始重新倒计时。

app.json文件

{ "pages": [ "pages/index/index" ], "window": { "navigationBarTextStyle": "black", "navigationStyle": "custom" }, "style": "v2", "renderer": "webview", "rendererOptions": { "skyline": { "defaultDisplayBlock": true, "defaultContentBox": true, "tagNameStyleIsolation": "legacy", "disableABTest": true, "sdkVersionBegin": "3.0.0", "sdkVersionEnd": "15.255.255" } }, "componentFramework": "glass-easel", "sitemapLocation": "sitemap.json", "lazyCodeLoading": "requiredComponents" }

index.wxml文件

<navigation-bar title="计时器" back="{{false}}" color="black" background="#FFF"></navigation-bar> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box" hidden="{{hidden}}"> <view class="title">计时器函数的应用</view> <view class="time"> <view>{{num}}</view> </view> <view class="btn-layout"> <button type="primary" size="mini" bind:tap="start">开始计时</button> <button type="primary" size="mini" bind:tap="stop">停止计时</button> <button type="primary" size="mini" bind:tap="restart">重新计时</button> </view> </view> </scroll-view>

index.wxss文件

page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } .time { width: 98%; background-color: blue; color: yellow; font-size: 200rpx; text-align: center; border: 2rpx solid red; border-radius: 60rpx; margin: 30rpx; position: relative; overflow: hidden; } .time::before { content: "时间转瞬即逝"; position: absolute; left: 0; right: 0; top: 0; bottom: 0; color: #fff; opacity: 0.2; font-size: 60rpx; line-height: 100%; z-index: 1; } .time view { position: relative; z-index: 2; } .btn-layout { display: flex; flex-direction: row; }

app.wxss文件

/**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid purple; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: pink; }

小程序启动后首页短暂空白，2秒后显示计时界面，包含倒计时数字及“开始”“停止”“重新计时”按钮，初始值为60。点击“开始”启动倒计时，暂停后可继续；计时归零后按钮失效；点击“重新计时”则重置为60并重新开始。界面采用自定义导航栏与滚动布局，样式美观，功能完整。