本篇文章给大家谈谈在小程序里添加天气插件,以及手机天气预报小程序怎么添加对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
今天给各位分享在小程序里添加天气插件的知识,其中也会对手机天气预报小程序怎么添加进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录一览:
华为麦芒10se桌面小程序怎么添加天气
1、首先进入华为手机系统后,长按手机桌面的空白区域。2、之后,在编辑状态下,点击窗口小工具的图标。3、之后,点天气进入。4、进入后,选择需要使用的天气小工具样式。5、添加后,再次点击空白区域,退出编辑。即可添加桌面天气小工具。
麦芒10SE是中国电信、华为共同推出的年轻手机品牌。
华为麦芒10SE这款手机可是有着超大的5000mAh的电池容量足够小伙伴们一天使用的了,并且拥有22.5W的快充,非常适合对于性能没有什么要求的人。
开发中怎样在小程序中添加天气组件
首先分析制作的思路:
1.在app.json文件的pages数组里加上main文件夹和template(模板)文件夹的路径。
2.在main.js文件中,在onLoad()函数中调用loadInfo()函数。
3. 自定义获取位置的函数loadInfo(),调用wx.getLocation,用于获取当前的纬度(latitude)和经度(longitude)。在loadInfo()函数中接着调用loadCity()函数。
4. 自定义获取城市的函数loadCity(),调用wx.request,在“百度地图开放平台”网站中注册自己的AK,通过获取城市信息的网址(http://api.map.baidu.com/geocoder/v2/?ak=自己的aklocation=纬度值,经度值output=json)实现当前城市名称的获取。
在loadCity()函数中接着调用loadWeather()函数。
5.自定义获取天气的函数loadWeather(),根据已有的城市名称,通过获取天气信息的网址(http://wthrcdn.etouch-/weather_mini?city=城市名)实现天气信息的
数据获取。
6.在main.wxml文件中,未来天气部分通过import调用了自定义模板文件itemtpl.wxml。
然后分析项目中文件的源码。
app.json文件的代码如下:
{
"pages":[
"pages/main/main",
"pages/template/itemtpl",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "天气",
"navigationBarTextStyle":"black"
}
}
main.wxml的代码如下:
<view class='cont'
<!-- 今日天气--
<view class='today'
<view class='info'
<view class='tempe'{{today.wendu}}°C</view
<view class='weather'{{today.todayInfo.type}}{{today.todayInfo.fengxiang}}</view
<view温馨提示:{{today.ganmao}}</view
<view class='city'{{city}}</view
</view
</view
<!-- 未来天气--
<import src="../template/itemtpl"/
<view class='future'
<block wx:for="{{future}}"
<template is="future-item" data="{{item}}"/
</block
</view
</view
main.wxss文件的代码如下:
/**/
.cont{
font-size:30rpx;
width:100%;
height:100%;
}
.today{
padding:50rpx 0 0 0;
height:50%;
}
.info{
padding:20rpx;
background:rgba(0,0,0,.8);
line-height: 1.5em;
color:#eee;
}
.tempe{
font-size:90rpx;
text-align: center;
margin:30rpx 0;
}
.weather{
text-align: center;
}
.city{
font-size:40rpx;
color:#f60;
text-align: right;
margin: 30rpx 10rpx 0 0;
}
.future{
display:flex;
flex-direction: row;
height:100%;
padding:20rpx 0 20rpx 10rpx;
background:rgba(0,0,0,.8);
text-align: center;
margin:50rpx 0 70rpx 0;
color:#eee;
}
.future-item{
min-height: 100%;
width:160rpx;
margin: 0 10rpx;
border:solid 1px #f90;
padding:10rpx 0 0 0;
line-height:2em;
}
main.js文件的代码如下:
//
Page({
data: {
// weatherData:''
city:"" ,
today:{},
future:{},
},
onLoad: function () {
this. loadInfo();
},
//自定义获取位置
loadInfo:function(){
var page=this;
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: function (res) {
var latitude = res.latitude
var longitude = res.longitude
console.log(latitude, longitude);
page.loadCity(latitude, longitude);
}
})
} ,
//自定义获取城市
loadCity: function (latitude, longitude){
var page = this;
wx.request({
url: 'http://api.map.baidu.com/geocoder/v2/?ak=自己的AK location=' + latitude + ',' + longitude + 'output=json',
header: {
'content-type': 'application/json'
},
success: function (res) {
console.log(res);
var city=res.data.result.addressComponent.city;
city=city.replace("市","");
page.setData({
city:city
});
page.loadWeather(city);
}
})
},
//自定义获取天气
loadWeather: function (city) {
var page = this;
wx.request({
url: 'http://wthrcdn.etouch-/weather_mini?city=' + city,
header: {
'content-type': 'application/json'
},
success: function (res) {
console.log(res);
var future=res.data.data.forecast;
var todayInfo=future.shift();
var today=res.data.data;
today.todayInfo=todayInfo;
page.setData({
today:today,
future:future,
});
}
})
}
})
itemtpl.wxml的代码如下:
<!-- 模板文件--
<template name="future-item"
<view class="future-item"
<view{{item.date}}</view
<view{{item.type}}</view
<view{{item.fengxiang}}</view
<view{{item.low}}</view
<view{{item.high}}</view
</view
</template
至此,案例制作完成。
如何把天气添加到小程序?
1. 首先如果
在小程序里添加天气插件我们想要加天气情况添加到手机桌面上我们就需要先在手机中-一个天气软件华为手机是自带的天气软件所以我们可以直接在桌面上找到这个天气图标点击打开
2.然后我们返回到手机桌面
在小程序里添加天气插件,进入到手机桌面之后我们用两个手指按住屏幕然后同时向中间靠拢接下来桌面就会进入到设置模式
3. 进入到桌面的设置模式之后我们就可以在桌面的下方找到小窗口小工具的图标点击这个图标
4. 然后我们就可以在下方找到所有的窗口小工具的图标接下来我们在图标中找到天气应用的小工具点击选中这个小工具
5. 接下来我们看到上方的手机桌面界面然后在这个界面中通过左右滑动调整手机桌面
在小程序里添加天气插件,找到我们想要放置天气情况的桌面
6. 然后我们就可以按住下方的天气小工具然后将工具拖动到手机桌面中
在小程序里添加天气插件了
拖动完成之后我们就可以点击home键然后返回到桌面,接下来我们就可以直接在界面上查看天气情况了
华为p20怎么在桌面添加天气时间小程序?
可以通过以下方法添加天气、时钟等桌面小工具。
1、在桌面上双指捏合,进入桌面编辑状态。
2、点击窗口小工具,向左滑动可查看所有小工具。
3、部分小工具(如天气)会有多种样式,点击该图标可以展开所有的样式,向右滑动可以收拢。
4、点击需要的小工具图标,即可将其添加到当前屏幕。若当前屏幕没有空间,可长按并拖动该图标,添加到其它屏幕。
oppo手机如何添加天气插件
插件即桌面小部件,也叫桌面控件,就是能直接显示在Android系统桌面上的小程序,目前OPPO手机自带的插件有天气、时钟、日历等。手机桌面添加小插件的方式如下:1、ColorOS12及以上版本:可双指放在屏幕斜对角,向内捏合进入桌面编辑界面,选择“卡片”,选择需要的插件,点击添加即可。2、ColorOS3.0-11.3版本:可双指放在屏幕斜对角,向内捏合进入桌面编辑界面,选择“插件”,选择需要的插件,点击添加即可。3、其他版本,可长按桌面空白处(或点击菜单键),点击插件,即可添加插件。手机桌面小插件的删除方式如下:长按需要删除的插件后松开手,点击插件图标的“X删除”即可。温馨提示:ColorOS3.0及以上版本手机取消自带天气插件,您也可以自己-第三方插件程序,安装到手机存储,再添加插件即可。因机型和系统版本不同操作路径可能会略有差异,请以手机实际操作界面显示为准。本回答适用于所有OPPO机型。
小程序中没有天气预报,怎添加?
恢复屏幕上删除了的天气预报:
方案1:长按桌面空白区域,点击“窗口小工具”,找到“天气”小工具,并将“天气”小工具拖动到主屏幕空白区域即可。
方案2:如果“窗口小工具”中找不到“天气”小工具,请您按照以下方式操作:
EMUI 5.X及以下:进入设置应用
管理天气,点击启用天气应用,然后按照方案1进行操作。
EMUI 8.0:进入设置应用和通知应用管理,选择更多显示系统进程,查找 “天气小工具”,如果找不到,则“天气小工具”被卸载。请您回到桌面下拉,在搜索框中输入“天气小工具”,选择“恢复”,然后按照方案1操作即可。
关于在小程序里添加天气插件和手机天气预报小程序怎么添加的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。
在小程序里添加天气插件的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于手机天气预报小程序怎么添加、在小程序里添加天气插件的信息别忘了在本站进行查找喔。
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
暂时没有评论,来抢沙发吧~