微信小程序案例

最新推荐文章于 2025-05-03 10:05:10 发布

zero_or_

最新推荐文章于 2025-05-03 10:05:10 发布

阅读量3.4k

点赞数 3

文章标签：小程序微信

本文链接：https://blog.youkuaiyun.com/weixin_46083166/article/details/120070593

版权

本文详细介绍了微信小程序的开发案例，包括天气查询、视频播放、指南针及画布时钟功能的实现。通过分析小程序的目录结构和各组件代码，如app.json、.wxml、.wxss和.js文件，展示了如何在微信小程序中创建这些实用功能。提供了一个包含所有案例代码和资源的链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信官方文档地址
在这里插入图片描述
微信小程序开发目录结构
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

案例代码图片资源
链接：https://pan.baidu.com/s/1Iv1JDXNzSVyC16zW3oZj6g
提取码：hmlo

天气查询

在这里插入图片描述

images

app.json

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#3883FA",
    "navigationBarTitleText": "今日天气"
  }
}

app.xcss

/*背景容器样式*/
.container{
  height: 100vh; /*高度为100视窗，写成100%无效*/
  display: flex; /*flex布局模型*/
  flex-direction: column; /*垂直布局*/
  align-items: center;/*水平方向居中*/
  justify-content: space-around;/*调整内容位置*/
}

index.wxml

<!--index.wxml-->
<view class='container'>
    <!-- 区域1 地区选择器 -->
    <picker mode="region" bindchange='regionChange'>
        <view>{
  {region}}</view>
    </picker>
    <!-- 区域2 单行天气信息 -->
    <text>{
  {now.temp}}℃{
  {now.text}}</text>

    <!-- 区域1 天气图标 -->
    <image src="/images/weather_icon_s1_color/{
  {now.icon}}.png" mode="widthFix"></image>

    <!-- 区域1 多行天气信息 -->
    <view class="detail">
        <view class="bar">
            <view class="box">湿度</view>
            <view class="box">气压</view>
            <view class="box">能见度</view>
        </view>
        <view class="bar">
            <view class='box'>{
  {now.humidity}} %</view>
            <view class='box'>{
  {now.pressure}} hPa</view>
            <view class='box'>{
  {now.vis}} km</view>
        </view>
        <view class="bar">
            <view class="box">风向</view>
            <view class="box">风速</view>
            <view class="box">风力</view>
        </view>
        <view class="bar">
            <view class='box'>{
  {now.windDir}}</view>
            <view class='box'>{
  {now.windSpeed}} km/h</view>
            <view class='box'>{
  {now.windScale}} 级</view>
        </view>
    </view>
</view>

index.wxss

/**index.wxss**/
text{
    margin-top: 20rpx;
    f

最低0.47元/天解锁文章