1. Toy模板网首页
  2. > Toy博客

微信小程序实战项目开发（天气预报项目实战）：内涵开发说明文档、需求文档 && 手把手分步骤教你写出自己的小程序项目 && 天气预报小程序 && 时实请求获取天气 && 自定义功能 && 完整的源代码

9月前 作者：Make It Possible. 分类：Toy博客 阅读(60) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序实战项目开发（天气预报项目实战）：内涵开发说明文档、需求文档 && 手把手分步骤教你写出自己的小程序项目 && 天气预报小程序 && 时实请求获取天气 && 自定义功能 && 完整的源代码。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序开发实现天气预报

一、项目需求分析

需求分析

  1. 静态页面设计：要求界面美观 → 在wxss代码文件中对 wxml代码文件进行合理布局和美化，舒适的交互效果.
  2. 功能逻辑完善：能够使用到 wx.request 请求接口实现天气预报查询的功能

主要使用到的技术栈如下：

  • wxml：中使用了 picker 组件标签来完成了我们城市选择
  • wxss：我们使用了简单的布局：background-image、动画效果等常用属性完成页面的美化
  • app.json：该项目由于考虑到为一个页面，所以在全局配置文件中对页面的 window进行了配置，从而实现顶部的下拉、背景、文字和颜色的效果
  • js：文件中我们主要的使用了 wx.request 方法请求和风天气的WebAPI 后端接口 实现了最直观的业务逻辑。

实现思路分析详解如下：

1、创建项目、全局配置 json 文件

创建小程序项目，使用JavaScript开发，这一点注意了即可。

项目创建成功后，我第一时间对 json 文件中的代码进行阅读和配置，这也是项目开发的第一步和后续操作防止出现问题的重要手段

代码如下：

	"window": {
		"navigationBarBackgroundColor": "#00FFFF",
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "WeatherQuery",
		"backgroundColor": "#00FA9A",
		"backgroundTextStyle": "light",
		"enablePullDownRefresh": true
	}
  • 同时需要注意的是：pages配置值的时候注意我们天气页面的位置，需要放在第一个，否则会出现跑错的问题！（最好建议除非有多个页面，不然除了需要的直接删掉就好了）。
2、在 wxml文件中完成布局

实现代码如下：

<view class="father_View_box">
		<!-- 显示当前查询城市 -->
		<view class="at_present_query_city">
			<text class="ar_present_hint_text">当前查询城市:</text>
			<text class="city_text">{{city}}</text>
		</view>
		<!-- 显示城市天气信息 -->
		<view
			class="show_sity_weather_information" 			wx:for="{{w3}}" wx:key="index">
			<text class="text_1">第 {{ index + 1 }} 天：</text>
			<text class="text_2">最高温度:{{item.tempMax}}</text>
			<text class="text_3">最低温度:{{item.tempMin}}</text>
			<text class="text_4">风向：{{item.windDirDay}}</text>
			<text class="text_5">风级：{{item.textDay}}</text>
		</view>

</view>

<!-- button -->
<view class="button_view">
			<!-- 选择城市 -->
			<button class="select_city_button">
							<picker class="wxml_picker" mode="region" level="city" 		bindchange="selCity">选择城市</picker>
		</button>
		<!-- 获取天气信息 -->
		<button class="query_weather_information" 				bind:tap="getWeather">获取城市天气信息</button>
</view>
3、wxss的实现美化效果
  • wxss 就是简单的一些布局，例如颜色的渐变、 阴影、 圆角 和 鼠标hover效果了。由于代码量大，这里就部分展示；
  1. 颜色渐变效果：
  • 使用 background-image 属性完成 ，属性值就是 方向 和 颜色的透明度了。
	background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  1. 鼠标 hover 浮动阴影效果：
  • box-shadow 属性实现阴影效果
  • transition 属性主要实现就是动态了
  • 给选择器添加 hover 鼠标悬停效果
/* 设置初始状态的样式 */
transition: all 0.3s;
transform: translateY(0);
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);

/* 设置鼠标悬停状态的样式 */
transform: translateY(-10px);
box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.2);
  1. 圆角效果
  • border-radius属性完成
border-radius: 20rpx;
  1. 底部按钮button使用flex布局实现
  • 让两个盒子平分父盒子显示，自适应宽度。
	display: flex;
	justify-content: space-around;
  1. 对天气信息采用分模块化的配色，同时添加了动画效果
  • 使用了 keyframes属性 定义了animate动画，然后hover盒子后，则执行该动画。
.show_sity_weather_information:hover {
		animation: animate 0.5s linear infinite;
	} 


@keyframes animate {

	0%,
	25% {
		text-shadow: 2px 5px 2px rgb(245, 6, 6);
	}

	50% {
		text-shadow: 2px -5px 2px #0f0;
	}

	75% {
		text-shadow: -2px 5px 2px #00f;
	}

	100% {
		text-shadow: -2px -5px 2px #f0f;
	}
}

效果图如下：
微信小程序天气预报源码,微信小程序开发,项目,小程序,微信小程序,notepad++

4、业务逻辑的实现
  • 这里使用的是原生的微信小程序开发 采用 JavaScript 语言编写的交互逻辑！
  • 使用了和风天气 webAPI接口 完成了数据的请求。
全部逻辑代码如下
  • 相信看注释应该都能看懂这段代码的含义。下面我会分步对代码块完成的功能进行介绍！
// pages/city/city.js
Page({
  data: {
    w3:[],
    city:'郑州'
	},
	// 选择城市触发的事件
selCity(e)
{
	// 获取城市的id，因为请求城市天气，依靠的就是id
  this.setData({
    city:e.detail.value[1]
  })
},

  // 获取天气触发的事件
getWeather(e)
{
	const that = this
	// 向服务器发送请求
  wx.request({

		url: 'https://geoapi.qweather.com/v2/city/lookup', // 请求地址
		// 请求携带的参数
    data:{
      location:that.data.city,	// 用户选择的城市名称
      key:'0db90c3a430d46b58c83c875e6fa5de5'		// 和风API接口的key值
		},
		// 请求成功后，获取城市的 id
		success(e)
    {
			console.log(e.data)
			if (e.data.location && e.data.location != undefined) {
				// 将 locaitionId获取存到城市id中，获取城市天气的时候使用
				var cityCode = e.data.location[0].id
			}


			// 根据上面获取到的城市id ， 请求城市天气信息
      wx.request({
        url: 'https://devapi.qweather.com/v7/weather/3d', 
        data: {
          location: cityCode,		// 携带的城市id
          key: '0db90c3a430d46b58c83c875e6fa5de5'		// API  接口的key值
				},
				// 配置请求头
        header: {
          'content-type': 'application/json' 
        },
        success (res) {
          that.setData({
            w3:res.data.daily		// 拿到需要渲染的数据
					})
        }
      })
		},
		// 请求失败所触发的事件
    fail(e)
    {
      console.log("获取天气失败!!!")
    }
  })
},
js代码分步介绍：

初始化数据容器：

  data: {
    w3:[],
    city:'郑州'
	},
	// 选择城市触发的事件
selCity(e)
{
	// 获取城市的id，因为请求城市天气，依靠的就是id
  this.setData({
    city:e.detail.value[1]
  })
},

  • data{} : 里面的数据 w3 是用于存放我们需要渲染到页面上的天气信息，例如：最高温、最低温、天气、风向等数据。他是一个数组。目的就是方便后面我们使用wx.for进行循环渲染映射结构。

  • city：见名知意，就是城市。当我们选择省份后，会自动帮我们获取城市信息，然后存放到该key属性中。方便我们后面请求城市的天气信息。

这就是渲染w3的效果图：
微信小程序天气预报源码,微信小程序开发,项目,小程序,微信小程序,notepad++

这里我们只请求三天的数据，七天、十五天、都是一样！不过就是请求的结构进行更改。

获取天气详细信息模块
getWeather(e)
{
	const that = this	// 重新定义引用
},
  • 在我们wxml代码中的按钮上， 我们注册了点击事件（getWeather（e））
  • 然后里面我们使用 wx.request 总共就发送了两次请求（采用了嵌套请求）
  wx.request({

		url: 'https://geoapi.qweather.com/v2/city/lookup', // 请求地址
		// 请求携带的参数
    data:{
      location:that.data.city,	// 用户选择的城市名称
      key:'0db90c3a430d46b58c83c875e6fa5de5'		// 和风API接口的key值
		},
		// 请求成功后，拿到城市的 id
		success(e){
			console.log(e.data)
			if (e.data.location && e.data.location != undefined) {
				// 将 locaitionId获取存到城市id中，获取城市天气的时候使用
				var cityCode = e.data.location[0].id
			}
		},
		// 请求失败所触发的事件
    fail(e)
    {
      console.log("获取天气失败!!!")
    }
  })

我么先看看外层请求：这里我们使用 和风天气城市的接口，用来获取我们用户所选择的城市 locationId （用于内层请求数据所携带的请求参数）。

 data:{
   location:that.data.city,	// 用户选择的城市名称
   key:'0db90c3a430d46b58c83c875e6fa5de5'		// 和风API接口的key值
		},
  • data配置项里面就是此次请求所携带的参数，第一个参数就是我们用户选择的城市信息（就是我们上面获取存储的）
  • 第一个key 就是我们的 和风项目中的API接口 的值了，可以理解为是一个密钥。就和身份证一样。
  • 请求成功
		success(e){
			console.log(e.data)
			if (e.data.location && e.data.location != undefined) {
				// 将 locaitionId获取存到城市id中，获取城市天气的时候使用
				var cityCode = e.data.location[0].id
			}
		},

这是我们请求服务器成功后，服务器给我们响应所触发的函数（请求成功自动调用），我们只需要负责编写里面的逻辑就好了。

我先对返回的结果进行判断，目的是防止数据出现问题导致编译错误！

然后我将里面的数据存在了一个变量中，这里使用了var声明（不推荐使用），不过这里恰好用了它的这一点好处。存好后内层请求数据可以访问我这个变量里面的数据发送请求（也就是城市的 id ）

  • 请求失败
 fail(e)
 {
   console.log("获取天气失败!!!")
 }

失败就在控制台输出结果，提示 “获取天气失败”

下面就是内层的网络请求，根据 城市id 获取天气信息。

	  // 根据上面获取到的城市id ， 请求城市天气信息
      wx.request({
        url: 'https://devapi.qweather.com/v7/weather/3d', 
        data: {
          location: cityCode,		// 携带的城市id
          key: '0db90c3a430d46b58c83c875e6fa5de5'		// API  接口的key值
				},
				// 配置请求头
        header: {
          'content-type': 'application/json' 
        },
        success (res) {
          that.setData({
            w3:res.data.daily		// 拿到需要渲染的数据
					})
        }
      })

经过上面分析，这里我就不在一一讲解了，我们直接看这次的请求配置项 data

data: {
 location: cityCode,		// 携带的城市id
  key: '0db90c3a430d46b58c83c875e6fa5de5'		// API  接口的key值
},
				// 配置请求头
header: {
 'content-type': 'application/json' 
},

location： 这次就是我们外层请求获取的城市id了

key：一样的，是密钥。

  • 就是会发现这里使用和 header 配置项，这是网络请求中的 请求头，这是 后台数据库需要配置的数据，开发文档说明了需要配置，那么我在写的时候，就得按照后端程序员的设置去配置这个header请求头。一般的都是对请求的类型和返回数据的格式进行了配置。
        success (res) {
          that.setData({
            w3:res.data.daily		// 拿到需要渲染的数据
					})
        }
  • 同样的，请求成功后，我们将获取响应的数据中需要渲染的数据，存到我们的w3 数组中。
将获取到的数据渲染到页面中：
		<!-- 显示城市天气信息 -->
		<view
			class="show_sity_weather_information" 			wx:for="{{w3}}" wx:key="index">
			<text class="text_1">第 {{ index + 1 }} 天：</text>
			<text class="text_2">最高温度:{{item.tempMax}}</text>
			<text class="text_3">最低温度:{{item.tempMin}}</text>
			<text class="text_4">风向：{{item.windDirDay}}</text>
			<text class="text_5">风级：{{item.textDay}}</text>
		</view>

  • 这里使用了 wx.for 对数据对象 w3循环渲染了， 并且指定了key。

  • 分析总结
    以上就是从分析项目需求 → 项目创建 → 页面布局 → 样式美化 → 业务逻辑实现 的完整步骤分析。对了这里存在最大的问题就是。切记开发文档的时候，一定要详细阅读开发文档中所嵌套的文档。方便我们开发请求服务器数据

二、完整代码实现

1、wxml代码

<view class="father_View_box">
		<!-- 显示当前查询城市 -->
		<view class="at_present_query_city">
			<text class="ar_present_hint_text">当前查询城市:</text>
			<text class="city_text">{{city}}</text>
		</view>
		<!-- 显示城市天气信息 -->
		<view
			class="show_sity_weather_information" 			wx:for="{{w3}}" wx:key="index">
			<text class="text_1">第 {{ index + 1 }} 天：</text>
			<text class="text_2">最高温度:{{item.tempMax}}</text>
			<text class="text_3">最低温度:{{item.tempMin}}</text>
			<text class="text_4">风向：{{item.windDirDay}}</text>
			<text class="text_5">风级：{{item.textDay}}</text>
		</view>

</view>

<!-- button -->
<view class="button_view">
			<!-- 选择城市 -->
			<button class="select_city_button">
							<picker class="wxml_picker" mode="region" level="city" 		bindchange="selCity">选择城市</picker>
		</button>
		<!-- 获取天气信息 -->
		<button class="query_weather_information" 				bind:tap="getWeather">获取城市天气信息</button>
</view>

2、wxss代码

/* pages/city/city.wxss */

/* 根组件的样式 */

.father_View_box {
	width: 100%;
	height: 1300rpx;
	background-image: linear-gradient(to right, #0acffe 0%, #495aff 100%);
	border-radius: 15rpx;

	/* 设置初始状态的样式 */
	transition: all 0.3s;
	transform: translateY(0);
	box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.father_View_box:hover {
	/* 设置鼠标悬停状态的样式 */
	transform: translateY(-10px);
	box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.2);
}



/* 显示查询城市的样式 */
.at_present_query_city {
	width: 100%;
	height: 240rpx;
	margin-top: 30rpx;
	background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
	line-height: 240rpx;
	border-radius: 15rpx;

	  /* 设置初始状态的样式 */
		transition: all 0.3s;
		transform: translateY(0);
		box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);

}

.at_present_query_city:hover {
			  /* 设置鼠标悬停状态的样式 */
				transform: translateY(-10px);
				box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.2);
}

/*  显示城市内容 */
.show_sity_weather_information {
	width: 100%;
	height: 120rpx;
	margin-top: 150rpx;
	padding: 20rpx;
	font-size: 28rpx;
	color: #FFCCAA;
}

.show_sity_weather_information:hover {
		animation: animate 0.5s linear infinite;
	}

.show_sity_weather_information .text_1 {
	font-size: 35rpx;
	color: orangered;
	background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
	margin-right: 15rpx;
}

.text_2 {
	font-size: 35rpx;
	background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
	margin-right: 15rpx;

}
.text_3 {
	font-size: 35rpx;
	background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
	margin-right: 15rpx;

}
.text_4 {
	font-size: 35rpx;
	background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
	margin-right: 15rpx;

}
.text_5 {
	font-size: 35rpx;
	background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
	margin-right: 15rpx;
	
}
	


@keyframes animate {

	0%,
	25% {
		text-shadow: 2px 5px 2px rgb(245, 6, 6);
	}

	50% {
		text-shadow: 2px -5px 2px #0f0;
	}

	75% {
		text-shadow: -2px 5px 2px #00f;
	}

	100% {
		text-shadow: -2px -5px 2px #f0f;
	}
}


.at_present_query_city .ar_present_hint_text {
	margin-right: 100rpx;
	font-size: 50rpx;
	font-weight: 700;
	color: #808080;
}

.city_text {
	width: 200rxp;
	height: 50rpx;
	margin-right: 24rpx;
	line-height: 30rpx;
	text-align: center;
	font-size: 50rpx;
	color: hotpink;
	/* background-image: linear-gradient(to right, #6794a1 0%, #2ccfb1 50%); */
}


/* 选择城市button */


/* 获取城市天气信息button */

.button_view {
	display: flex;
	justify-content: space-around;
	margin-top: 20rpx;
	background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
}

/* 1、选择城市 */
.select_city_button {

	background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);

	border-radius: 20rpx;
	/* 设置初始状态的样式 */
	transition: all 0.3s;
	transform: translateY(0);
	box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.select_city_button:hover {
	/* 设置鼠标悬停状态的样式 */
	transform: translateY(-10px);
	box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.2);
}


/* 2、获取城市信息 */
.query_weather_information {
	border-radius: 20rpx;
	background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);

	/* 设置初始状态的样式 */
	transition: all 0.3s;
	transform: translateY(0);
	box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.query_weather_information:hover {
	/* 设置鼠标悬停状态的样式 */
	transform: translateY(-10px);
	box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.2);
}

3、js代码

// pages/city/city.js
Page({
  data: {
    w3:[],
    city:'郑州'
	},
	// 选择城市触发的事件
selCity(e)
{
	console.log(e.detail.code[3])
	// 获取城市的id，因为请求城市天气，依靠的就是id
  this.setData({
    city:e.detail.value[1]
  })
},

  // 获取天气触发的事件
getWeather(e)
{
	const that = this
	// 向服务器发送请求
  wx.request({

		url: 'https://geoapi.qweather.com/v2/city/lookup', // 请求地址
		// 请求携带的参数
    data:{
      location:that.data.city,	// 用户选择的城市名称
      key:'0db90c3a430d46b58c83c875e6fa5de5'		// 和风API接口的key值
		},
		// 请求成功后，获取城市的 id
		success(e)
    {
			console.log(e.data)
			if (e.data.location && e.data.location != undefined) {
				// 将 locaitionId获取存到城市id中，获取城市天气的时候使用
				var cityCode = e.data.location[0].id
			}


			// 根据上面获取到的城市id ， 请求城市天气信息
      wx.request({
        url: 'https://devapi.qweather.com/v7/weather/3d', 
        data: {
          location: cityCode,		// 携带的城市id
          key: '0db90c3a430d46b58c83c875e6fa5de5'		// API  接口的key值
				},
				// 配置请求头
        header: {
          'content-type': 'application/json' 
        },
        success (res) {
          that.setData({
            w3:res.data.daily		// 拿到需要渲染的数据
					})
        }
      })
		},
		// 请求失败所触发的事件
    fail(e)
    {
      console.log("获取天气失败!!!")
    }
  })
},

4、效果图:

微信小程序天气预报源码,微信小程序开发,项目,小程序,微信小程序,notepad++文章来源地址https://www.toymoban.com/news/detail-782421.html

  • 有什么问题或需要完整的项目直接私信即可！

到了这里，关于微信小程序实战项目开发（天气预报项目实战）：内涵开发说明文档、需求文档 && 手把手分步骤教你写出自己的小程序项目 && 天气预报小程序 && 时实请求获取天气 && 自定义功能 && 完整的源代码的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】使用vscode进行小程序项目的开发

    【微信小程序】使用vscode进行小程序项目的开发

    如果我们不想写wxss，想写less、scss，但是less、scss以前都是编译成css的，这时候我们可以进行在vscode环境配置的设置 下载插件 想利用本身已经熟悉的prettier功能、vscode环境配置的设置⬇ 虽然可以利用vscode进行小程序代码的开发，但是“微信开发者工具”是脱离不了的，因为需

    2024年02月05日
    浏览(42)
  • 【小程序】零基础微信小程序开发+实战项目

    【小程序】零基础微信小程序开发+实战项目

    如何拥有一款属于你自己的小程序，惊喜就在下面！ 目前，小程序行业已经成为互联网营销的热门黑马之一，依托于各大流量平台，小程序行业具有天然的用户基础和得天独厚的资源优势，凭借其方便快捷的操作以及简单通俗的模式，仅短短一年的时间，就迎来了爆发性的增

    2024年02月11日
    浏览(46)
  • 小程序项目开发实战：打造一款微信点餐小程序

    小程序项目开发实战：打造一款微信点餐小程序

    💂 个人网站:【海拥】【游戏大全】【神级源码资源网】 🤟 前端学习课程：👉【28个案例趣学前端】【400个JS面试题】 💅 寻找学习交流、摸鱼划水的小伙伴，请点击【摸鱼学习交流群】 随着微信小程序的流行，越来越多的开发者开始涉足小程序开发。本篇文章将带领读者

    2024年02月15日
    浏览(64)
  • 最全微信小程序源码项目开发代码合集

    最全微信小程序源码项目开发代码合集

    小程序源码是用PHP和Java编程语言编写的程序，可以包含在HTML页面中，就像图像包含在页面中一样。您在本教程中构建的应用程序向您展示了如何在IDE中构建和部署微信小程序源码。 源码：y.wxlbyx.icu 创建或导入Applet源文件 在本节中，您将创建您的第一个小程序。您可能已经

    2024年02月09日
    浏览(40)
  • 【微信小程序开发】微信小程序集成腾讯位置项目配置

    【微信小程序开发】微信小程序集成腾讯位置项目配置

    腾讯位置服务官网 当然没账号的要先注册一个账号 在我的应用里创建一个新的应用，印象中需要小程序ID，去微信开发者工具里面找到自己的小程序ID填入即可 添加 key 中勾选勾选 WebServiceAPI 从官网里下载，我这里下载的是 v1.2 打开微信开发者工具 在查找小程序ID的地方下滑

    2024年02月02日
    浏览(57)
  • 【微信小程序独立开发1】项目提出和框架搭建

    【微信小程序独立开发1】项目提出和框架搭建

    前言：之前学习小程序开发时仿照别人的页面自己做了一个商城项目和小说项目，最近突发奇想，想从0开发一个关于《宠物日记》的小程序，需求和页面都由自己设计，将在这记录开发的全部流程和过程中遇到的难题等...  首先创建小程序项目，AppID在微信开发者页面自己申

    2024年01月22日
    浏览(69)
  • 【图片消消乐】单机游戏-微信小程序项目开发入门

    【图片消消乐】单机游戏-微信小程序项目开发入门

    这是一个微信小程序项目，是类似开心消消乐的休闲小游戏，老少皆宜，游戏互动里面的图片是用的任何图片素材，根据自己的需求更换图片即可。想要做游戏不知道怎么做，建议从这个小程序入手，花时间研究学习，很快就拥有属于自己的小程序。 准备 会使用微信开发工

    2024年02月10日
    浏览(51)

  • 微信小程序天气预报实战

    api接口用的和风天气 代码如下 // pages/weather/weather.js Page({   /**    * 页面的初始数据    */   data: {     apiKey: \\\"1f5e75b8a3f0472aaf2f618268b30b4e\\\",     City: \\\'\\\',     Country:\\\'\\\',     locationid:\\\"\\\",     latlongFlag: false   },   /**    * 生命周期函数--监听页面加载    */   onL

    2024年02月19日
    浏览(40)
  • HbuilderX运行uniapp项目到微信小程序时，自动打开了微信小程序开发工具但是进不去项目

    HbuilderX运行uniapp项目到微信小程序时，自动打开了微信小程序开发工具但是进不去项目

    这样选择之后，运行时一直停在打开微信开发者工具不能进入项目，如图： 这是因为你当前不是这个微信小程序的开发者，联系管理员添加你为当前小程序的开发者就行了。 或者是更换appid

    2024年02月11日
    浏览(63)
  • 【俄罗斯方块】单机游戏-微信小程序项目开发入门

    【俄罗斯方块】单机游戏-微信小程序项目开发入门

    这是一个仿俄罗斯方块小游戏的微信小程序，只需要写一小段代码就实现出来了，有兴趣的同学完全可以自己动手开发，来看看实现过程是怎样的呢，边写边做，一起来回忆小时候玩过的经典俄罗斯方块游戏吧。 💡 给读者一个小小提示 需要有HTML和CSS基础 还有JavaScript基础

    2024年02月10日
    浏览(83)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包