1、创建工程
创建wx的文件夹,并使用微信小程序创建demo工程,文件夹指向这个文件夹。
2、修改app.json内容如下:
{
"pages": [
"pages/index/index"
],
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "温湿度计",
"navigationBarBackgroundColor": "#ffffff"
},
"style": "v2",
"componentFramework": "glass-easel",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}这个文件主要定义小程序的文本为“温湿度计”,如果你想修改可以根据自己的要求进行定义。
3、修改pages/index下面的index.wxml
这个文件主要是实现微信小程序的交互界面。文件内容如下:
<!--pages/index/index.wxml-->
<view class="page">
<!-- 连接状态栏 -->
<view class="status-bar">
<view class="status-dot {{connected ? 'active' : ''}}"></view>
<text class="status-text">{{statusText}}</text>
</view>
<!-- 加载动画 -->
<view class="loading-wrap" wx:if="{{loading || discovering}}">
<view class="spinner"></view>
<text class="loading-text">{{statusText}}</text>
</view>
<!-- 数据显示区 -->
<view class="cards" wx:if="{{connected}}">
<!-- 温度卡片 -->
<view class="card temp-card">
<view class="card-label">温度</view>
<view class="card-value">
<text class="value-num">{{temperature}}</text>
<text class="value-unit">°C</text>
</view>
<view class="card-icon">
我要赚赏金
