本文主要是介绍实习日志day5——6.22，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
今日学习如使用flex对个人页面进行美化以及使用免费开放的接口实现天气预报、一言等小功能页面。
1)天气预报界面
//index.js
//获取应用实例
const app = getApp()
Page({
data:{
msg:"Home",
id:"txt",
index:"5",
yiyan:{},
weather:{},
flag:true,
},
click:function(){
var _this = this;
//发起一个网络请求
wx.request({
url: 'https://v1.hitokoto.cn/', //仅为示例，并非真实的接口地址
data: {
c: "a"
},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
// console.log(res.data)
_this.setData({
yiyan: res.data
})
}
});
//发起一个网络请求 weather
wx.request({
url: 'https://www.tianqiapi.com/api/', //仅为示例，并非真实的接口地址
method:"get",
dataType:"json",
data: {
version: "v1",
city:'湛江'
},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data)
_this.setData({
weather:res.data,
flag:true
})
console.log(res.data);
}
})
},
onLoad: function () {
var _this = this;
wx.request({
url: 'https://v1.hitokoto.cn/', //仅为示例，并非真实的接口地址
method:"get",
dataType:"json",
//请求参数
data: {
c:"a",
encode:"json"
},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
_this.setData({
yiyan: res.data
})
}
})
}
})
2)我的主页页面
// pages/mine/mine.js
Page({
/**
* 页面的初始数据
*/
data: {
uicon: '../../assets/icons/my.png',
uname: '用户名',
model: '',
system: '',
screenHeight: '',
screenWidth: '',
language: '',
version: ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var _this = this;
// 获取手机系统信息
wx.getSystemInfo({
success: function (res) {
console.log(res);
_this.setData({
model: res.model,
system: res.system,
screenHeight: res.screenHeight,
screenWidth: res.screenWidth,
language:res.language,
version:res.version
})
}
});
wx.getSetting({
success(res) {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success: function (res) {
_this.setData({
uicon: res.userInfo.avatarUrl,
uname: res.userInfo.nickName
})
}
})
} else {
bindGetUserInfo();
}
}
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
实现的效果图：
这篇关于实习日志day5——6.22的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
