小程序天气插件（小程序天气插件怎么用）

本篇文章给大家谈谈小程序天气插件，以及小程序天气插件怎么用对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 今天给各位分享小程序天气插件的知识，其中也会对小程序天气插件怎么用进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、华为p20怎么在桌面添加天气时间小程序？
• 2、oppo手机怎么添加墨迹天气插件
• 3、开发中怎样在小程序中添加天气组件
• 4、华为麦芒10se桌面小程序怎么添加天气

华为p20怎么在桌面添加天气时间小程序？

可以通过以下方法添加天气、时钟等桌面小工具。
1、在桌面上双指捏合，进入桌面编辑状态。
2、点击窗口小工具，向左滑动可查看所有小工具。
3、部分小工具（如天气）会有多种样式，点击该图标可以展开所有的样式，向右滑动可以收拢。
4、点击需要的小工具图标，即可将其添加到当前屏幕。若当前屏幕没有空间，可长按并拖动该图标，添加到其它屏幕。

oppo手机怎么添加墨迹天气插件

插件即桌面小部件小程序天气插件，也叫桌面控件，就是能直接显示在Android系统桌面上小程序天气插件的小程序，目前OPPO手机自带的插件有天气、时钟、日历等。
手机桌面添加小插件的方式如下小程序天气插件：
1、ColorOS12及以上版本：可双指放在屏幕斜对角，向内捏合进入桌面编辑界面，选择“卡片”，选择需要的插件，点击添加即可。
2、ColorOS3.0-11.3版本：可双指放在屏幕斜对角，向内捏合进入桌面编辑界面，选择“插件”，选择需要的插件，点击添加即可。
3、其他版本，可长按桌面空白处（或点击菜单键），点击插件，即可添加插件。
手机桌面小插件的删除方式如下：
长按需要删除的插件后松开手，点击插件图标的“X删除”即可。
温馨提示：
ColorOS3.0及以上版本手机取消自带天气插件，您也可以自己-第三方插件程序，安装到手机存储，再添加插件即可。
因机型和系统版本不同操作路径可能会略有差异，请以手机实际操作界面显示为准

开发中怎样在小程序中添加天气组件

首先分析制作的思路：
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
至此，案例制作完成。

华为麦芒10se桌面小程序怎么添加天气

1、首先进入华为手机系统后，长按手机桌面的空白区域。2、之后，在编辑状态下，点击窗口小工具的图标。3、之后，点天气进入。4、进入后，选择需要使用的天气小工具样式。5、添加后，再次点击空白区域，退出编辑。即可添加桌面天气小工具。
麦芒10SE是中国电信、华为共同推出的年轻手机品牌。
华为麦芒10SE这款手机可是有着超大的5000mAh的电池容量足够小伙伴们一天使用的了，并且拥有22.5W的快充，非常适合对于性能没有什么要求的人。 关于小程序天气插件和小程序天气插件怎么用的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 小程序天气插件的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于小程序天气插件怎么用、小程序天气插件的信息别忘了在本站进行查找喔。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。