HTML周记4(AJAX/VUE/微信小程序）_如何用ajax,vue做一个微信小程序-CSDN博客

本文链接：https://blog.csdn.net/weixin_49000273/article/details/118391635

文章目录

利用AJAX接上网上的天气预报接口，做天气预报界面
- 一、添加Jquery事件
- 二、HTML主体代码
结合Vue的相关知识来做一个简单的温度转换
- 代码
微信小程序

利用AJAX接上网上的天气预报接口，做天气预报界面

一、添加Jquery事件

$(document).ready(function() {
			$("button").click(function() {
						var city = $("#city").val();
		            $.ajax({	 
		                type: "GET",	//请求方式	 
		                url: "http://wthrcdn.etouch.cn/weather_mini?city="+city,	
			dataType:"json",
			success:function(result){
				addBox(result.data.forecast);
			}
		});
			});
		});		
			
				
		function addBox(json_data) {
			
				$.each(json_data, function(index, obj) {
					
					$("#box").append("<div'>" +
						
							"<p>" + obj['date'] + "</p>" +
							
							
							"<p>" + obj['high'] + "</p>" +
							
							"<p>" + obj['fengli'] + "</p>" +
							
							"<p>" + obj['low'] + "</p>" +
							
							"<p>" + obj['fengxiang'] + "</p>" +
							
							"<p>" + obj['type'] + "</p>" +
							
							"</div>");
				});							
		}

二、HTML主体代码

代码如下（示例）：

<body>
	<div>
		<h3>请输入城市：</h3>
		城市：<input type="text" id="city"/>
		<br>
		<button type="button">提交</button>
	</div>
	
	<br>
	
	<div id="box"></div>	
	
</body>

结合Vue的相关知识来做一个简单的温度转换

代码

<html>
	<head>
		<meta charset="utf-8">
			
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<div>
				请输入摄氏温度：<input v-model="ctemp" />
				<br >
				<br >
				华氏温度：<child v-bind:temp="ctemp"></child>
			</div>
			
		</div>
		<script type="text/javascript">
			Vue.component('child',{
				props:{
					['temp']:Number,
				},
				template:'<span>{{temp*9/5+32}}</span>'
			})
			new Vue({
				el:'#app',
				data:{
					ctemp:0
				}
			})
		</script>
	</body>
</html>

微信小程序

一、下载地址

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

开发者工具下载

二、小程序项目

打开开发者工具后，新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，给你的项目起一个好听的名字，勾选 “不使用云服务” （注意: 你要选择一个空的目录才可以创建项目），点击新建，你就得到了你的第一个小程序了，点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

三、小程序与普通网页开发的区别

网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。而如上文所述，小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的

四、微信小程序简单的界面

1.Pages

这里要写的是小程序里面你所创建界面的路径，以便于跳转等功能
代码如下

"pages":[
"pages/index/index",
"pages/fenglei/fenglei",
"pages/message/message",
"pages/person/person",
"pages/logs/logs"

2.TabBar

tabBar是微信小程序底下的导航栏
部分代码如下

"tabBar":{
"list":[{
"pagePath“：“pages/index/index",
"text":"分类"
"iconPath":"icon/_index.png",
"selectedIconPath":"icon/index.png"},

...
}