微信小程序案例

微信官方文档地址

微信小程序开发目录结构

小程序包含一个描述整体程序的 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;
    font-size: 80rpx;
    color: #3C5F81;
}
image{
    width: 220rpx;
}
.detail{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.bar{
    display: flex;
    flex-direction: row;
    margin: 20rpx 0;
}
.box{
    width: 33.3%;
    text-align: center;
}
           

index.js

// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    region: ['安徽省', '芜湖市', '镜湖区'],
    now:{
      tmp:0,
      cond_txt:'未知',
      cond_code:'999',
      hum:0,
      pres:0,
      vis:0,
      wind_dir:0,
      wind_spd:0,
      wind_sc:0
    }
  },
  /**
   * 更新省市区信息
   */
  regionChange: function(e) {
    this.setData({region: e.detail.value});
    this.getWeather();//更新天气
  },
  /**
   * 获取实况天气数据
   */
  getWeather: function () {
    var that = this;//this不可以直接在wxAPI函数内部使用
    wx.request({
      url: 'https://free-api.heweather.com/s6/weather/now',
      data:{
        location:that.data.region[1],
        key:'f0671b6589ff43019e72970d334ea93e'
      },
      success:function(res){
        //console.log(res.data);
        that.setData({now:res.data.HeWeather6[0].now});
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.getWeather();//更新天气
  }
  
})
           

视频播放

index.wxml

<!--index.wxml-->
<!-- 区域1：视频播放器 -->
<video id="myVideo" controls src="{{src}}" enable-danmu danmu-btn></video>
<!-- 区域2：弹幕控制区域 -->
<view class="danmuArea">
  <!-- 2-1 弹幕输入框 -->
  <input type="text" placeholder="请输入弹幕内容" bindinput="getDanmu"></input>
  <!-- 2-2 发送按钮 -->
  <button bindtap="sendDanmu">发送弹幕</button>
</view>
<!-- 区域3：视频列表 -->
<view class="videoList">
  <view class="videoBar" wx:for="{{list}}" wx:key="id" data-url="{{item.videoUrl}}" bindtap="playVideo">
    <image src="/images/play.png"></image>
    <text>{{item.title}}</text>
  </view>
</view>
           

index.wxss

/**index.wxss**/
video{
  width: 100%;
}
.danmuArea{
  display: flex;
  flex-direction: row;
}
input{
  border:1rpx solid #987938;
  height: 100rpx;
  felx-grow:1;
}
button{
  color: while;
  background-color: #987938;
}
.videoList{
  width: 100%;
  min-height: 400rpx;
}
.videoBar{
  width: 95%;
  display: flex;
  flex-direction: row;
  margin: 10rpx;
  border-bottom: 1rpx solid #987938;
}
image{
  width: 70rpx;
  height: 70rpx;
  margin: 20rpx;
}
text{
  font-size:45rpx;
  color:#987938;
  margin:20rpx;
  flex-grow:1;
}
           

index.js

// index.js
//生成随机颜色
function getRandomColor(){
  let rgb = [];
  for (let i = 0; i < 3; i++) {
    let color = Math.floor(Math.random()*256).toString(16)
    //三目算法
    color = color.length == 1?'0'+color:color
    rgb.push(color)
  }
  return '#'+rgb.join('')
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    danmuTxt:'',
    list: [{
        id: '1001',
        title: '杨国宜先生口述校史实录',
        videoUrl: 'http://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4'
      },
      {
        id: '1002',
        title: '唐成伦先生口述校史实录',
        videoUrl: 'http://arch.ahnu.edu.cn/__local/E/31/EB/2F368A265E6C842BB6A63EE5F97_425ABEDD_7167F22.mp4?e=.mp4'
      },
      {
        id: '1003',
        title: '倪光明先生口述校史实录',
        videoUrl: 'http://arch.ahnu.edu.cn/__local/9/DC/3B/35687573BA2145023FDAEBAFE67_AAD8D222_925F3FF.mp4?e=.mp4'
      },
      {
        id: '1004',
        title: '吴仪兴先生口述校史实录',
        videoUrl: 'http://arch.ahnu.edu.cn/__local/5/DA/BD/7A27865731CF2B096E90B522005_A29CB142_6525BCF.mp4?e=.mp4'
      }
    ]
  },
/**
   * 自定义函数--播放视频
   */
  playVideo:function(e){
    // 停止正在播放的视频
    this.videoCtx.stop();

    //更新视频地址
    this.setData({src:e.currentTarget.dataset.url})

    //播放新视频
    this.videoCtx.play();
  },
  /**
 * 自定义函数--获取弹幕内容
 */
 getDanmu:function(e){
   this.setData({
     danmuTxt:e.detail.value
   })
 },
 /**
* 自定义函数--发送弹幕
*/
  sendDanmu:function(){
    //获取弹幕内容
    let text = this.data.danmuTxt

    //发送弹幕
    this.videoCtx.sendDanmu({
      text:text,
      color:getRandomColor()
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 创建视频上下文
    this.videoCtx = wx.createVideoContext("myVideo")
  }
})
           

指南针

index.wxml

<!--index.wxml-->
<view class="container">
  <!-- 图片区域 -->
  <image src="/images/compass.jpg" mode="widthFix" style="transform:rotate({{rotate}}deg)"></image>

  <!-- 文字区域 -->
  <view class="status">
    <text class="bigTxt">{{degree}}° {{direction}}</text>
    <text class="smallTxt">北纬{{lat}} 东经{{lon}}</text>
    <text class="smallTxt">海拔{{alt}}米</text>
  </view>

</view>
           

index.wxss

/**index.wxss**/
.container{
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  color: #a46248;
}
/* 图片区域样式 */
image{
  width: 80%;
}
/* 文字区域样式 */
.status{
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 大字号 */
.bigTxt{
  font-size: 30pt;
  margin: 15rpx;
}
/* 小字号 */
.smallTxt{
  font-size: 20pt;
  margin: 15rpx;
}
           

index.js

//index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    rotate: 0,
    degree: '未知',
    direction: '',
    lat:0,
    lon:0,
    alt:0
  },

  /**
   * 自定义函数--判断方向
   */
  getDirection: function(deg) {
    let dir = '未知'

    if (deg >= 340 || deg <= 20) {
      dir = '北'
    } else if (deg > 20 && deg < 70) {
      dir = '东北'
    } else if (deg >= 70 && deg <= 110) {
      dir = '东'
    } else if (deg > 110 && deg < 160) {
      dir = '东南'
    } else if (deg >= 160 && deg <= 200) {
      dir = '南'
    } else if (deg > 200 && deg < 250) {
      dir = '西南'
    } else if (deg >= 250 && deg <= 290) {
      dir = '西'
    } else if (deg > 290 && deg < 340) {
      dir = '西北'
    }

    // console.log("dir:"+dir+',deg:'+deg)
    // 更新角度和方向到画面中
    this.setData({
      degree: deg,
      direction: dir
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this

    // 获取地理位置信息
    wx.getLocation({
      altitude:true,
      success: function(res) {
        that.setData({
          lat:res.latitude.toFixed(2),
          lon: res.longitude.toFixed(2),
          alt: res.altitude.toFixed(2)
        })
      },
    })

    // 监听指南针的角度
    wx.onCompassChange(function(res) {
      // console.log(res.direction.toFixed(0))
      // 获取指南针角度
      let degree = res.direction.toFixed(0)
      // 更新方向描述
      that.getDirection(degree)

      // 更新图片角度
      that.setData({
        rotate: 360 - degree
      })
    })
  }
})
           

app.json

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#A46248",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序指南针的效果展示"
    }
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

           

画布时钟

index.wxml

<!--index.wxml-->
<view class="container">
  <!-- 标题区域 -->
  <text>My Clock</text>

  <!-- 手绘时钟区域 -->
  <canvas canvas-id="clockCanvas"></canvas>

  <!-- 数字电子时钟区域 -->
  <text>{{h}}:{{m}}:{{s}}</text>

</view>
           

index.wxss

/**index.wxss**/
/* 整体容器样式 */
.container{
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

/* 文本样式 */
text{
  font-size: 40pt;
  font-weight: bold;
}

/* 画布样式 */
canvas{
  width: 600rpx;
  height: 600rpx;
  /* border: 1rpx solid red; */
}
           

index.js

// index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },
  /**
   * 自定义的函数--绘制时钟
   */
  drawClock:function(){
    // 1.准备工作
    //获取画布上下文
    var ctx = this.ctx
    //定义时钟的宽和高
    let width = 250,height = 250
    //设置画布中心为参照点
    ctx.translate(width / 2,height / 2)
    //将画布逆时针旋转90°
    ctx.rotate(-Math.PI / 2)

    //2.绘制时钟刻度
    //绘制小时刻度
    //设置线条的粗细
    ctx.lineWidth = 6
    //设置线条末端样式
    ctx.lineCap = 'round' 

    for(let i = 0; i < 12; i++){
      //开始路径
      ctx.beginPath()
      //从（100，0）绘制到（120，0）
      ctx.moveTo(100,0)
      ctx.lineTo(120,0)
      //描边路径
      ctx.stroke()
      //顺时针旋转30°
      ctx.rotate(Math.PI / 6)
    }
    // 2.2绘制分钟刻度（60个）
    // 设置线条的粗细
    ctx.lineWidth = 5
    //设置线条末端样式
    ctx.lineCap = 'round'

    for(let i = 0; i < 60; i++ ){
      //开始路径
      ctx.beginPath()
      //从（118，0）绘制到（120，0）
      ctx.moveTo(120,0)
      ctx.lineTo(110,0)
      //描边路径
      ctx.stroke()

      //顺时针旋转6°
      ctx.rotate(Math.PI / 30)
    }
    //3.获取当前时间
    let time = this.getTime() 
    let h = time[0]
    let m = time[1]
    let s = time[2]
    //4.绘制时钟时针
    // 4.1绘制时钟
    // 保存当前的绘图状态
    ctx.save()
    
    //旋转角度
    ctx.rotate(h * Math.PI / 6 + m * Math.PI / 360 + s * Math.PI / 21600)

    //设置线条的粗细
    ctx.lineWidth = 12
    // 开始绘制路径
    ctx.beginPath()
    // 从(-20,0)绘制到(80,0)
    ctx.moveTo(-20, 0)
    ctx.lineTo(80, 0)
    // 描边路径
    ctx.stroke()
    // 恢复之前保存的绘图样式
    ctx.restore()
    /* 4-2.绘制分针*/
    // 保存当前的绘图状态
    ctx.save()

    // 旋转角度
    ctx.rotate(m * Math.PI / 30 + s * Math.PI / 1800)

    // 设置线条的粗细
    ctx.lineWidth = 8

    // 开始绘制路径
    ctx.beginPath()
    // 从(-20,0)绘制到(112,0)
    ctx.moveTo(-20, 0)
    ctx.lineTo(112, 0)
    // 描边路径
    ctx.stroke()

    // 恢复之前保存的绘图样式
    ctx.restore()
    /* 4-3.绘制秒针*/
    // 保存当前的绘图状态
    ctx.save()

    // 旋转角度
    ctx.rotate(s * Math.PI / 30)

    // 设置画笔描边颜色为红色
    ctx.strokeStyle = 'red'
    // ctx.setStrokeStyle('red')

    // 设置线条的粗细
    ctx.lineWidth = 6

    // 开始绘制路径
    ctx.beginPath()
    // 从(-30,0)绘制到(120,0)
    ctx.moveTo(-30, 0)
    ctx.lineTo(120, 0)
    // 描边路径
    ctx.stroke()
    // 设置填充颜色为红色
    ctx.fillStyle = 'red'
    // 开始绘制路径
    ctx.beginPath()
    // 绘制圆弧
    ctx.arc(0, 0, 10, 0, Math.PI * 2, true)
    // 填充圆弧
    ctx.fill()

    // 恢复之前保存的绘图样式
    ctx.restore()
    // 绘制所有内容
    ctx.draw()
    /*更新页面显示时间*/
    this.setData({
      h: h > 9 ? h : '0' + h,
      m: m > 9 ? m : '0' + m,
      s: s > 9 ? s : '0' + s
    })
  },
  /**
   *自定义函数--获取当前时间
   */
  getTime:function(){
    //获取当前时间日期对象
    let now = new Date()
    //空数组用于存放时分秒
    let time = []
    time[0] = now.getHours()//小时
    time[1] = now.getMinutes()//分钟
    time[2] = now.getSeconds()//秒
    //24小时换算为12小时制
    if(time[0] > 12)time[0] -= 12

    return time
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
     // 创建画布上下文
     this.ctx = wx.createCanvasContext("clockCanvas")
    
     // 绘制时钟
     this.drawClock()
     var that = this

    // 每秒更新画面
    this.interval = setInterval(function(){
      // 绘制时钟
      that.drawClock()
    },1000)
  }
})