然后我们需要新建一个app.js注册我们的小程序应用
小程序初始化和页面初始化是两回事。
"window": {
//导航的背景颜色
"navigationBarBackgroundColor": "#f0f",
//字体的颜色
"navigationBarTextStyle": "black",
//表头的标题
"navigationBarTitleText": "祝你前程似锦，归来仍是少年",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false
}
微信小程序的view等同于div
/* pages/index/index.wxss */
.indexContainer{
/* flex布局默认是x轴，默认是水平方向 */
display: flex;
/* 改为纵向排列 */
flex-direction: column;
/* 设置侧轴为居中 */
align-items: center;
/* 下面的是控制主轴的，现在主轴是用不上 */
/* justify-content: center; */
/* background-color: red; */
}
.tp {
width: 164rpx;
height: 164rpx;
border-radius: 50%;
margin: 100rpx 0;
}
.goStudy{
width: 300rpx;
height: 80rpx;
/* 设置了行高字体就居中了 */
line-height: 80rpx;
text-align: center;
font-size: 28rpx;
border:1rpx solid #333;
/* background-color: red; */
}
<view class="indexContainer">
<image src="https://i0.hdslb.com/bfs/face/44a889c40e21ab250d73c3a25419c44200d471d9.jpg@150w_150h.jpg" class="tp"></image>
<view>
<text>我要飞的更高</text>
</view>
<text>Hello World</text>
</view>
flex的布局是一个弹性盒子，所以它的高度是由里面的内容撑开的。
给page加一个100%就好了
小程序中页面使用的动态数据都会找js中的data要。
vue中的this指的是当前组件的对象，小程序中指的是当前页面的实例对象。
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
//这个时候就已经会监听到整个页面的数据了
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
resdata:{}
},
handleChild:function(){
console.log('nihao');
// wx.navigateTo({
// url: '/pages/logs/logs',
// })
wx.redirectTo({
url: '/pages/logs/logs',
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
wx.request({
url: 'https://devapi.qweather.com/v7/weather/now',
method: 'GET',//方法分GET和POST，根据需要写
data:{
location:"101101100",
key:"aa7381071db44742bb8fcbdb3daa0bd6"
},
header: {//定死的格式，不用改，照敲就好
'Content-Type': 'application/json'
},
success: function (res) {//这里写调用接口成功之后所运行的函数
console.log(res.data);//调出来的数据在控制台显示，方便查看
console.log(typeof(res.data));
that.setData({
resdata: res.data,//res.data就是你调出来的所有数据（当然也可以在这里面自定义想要调用的数据），然后把值赋给resdata，之后对resdata进行处理即可，具体见wxml
})
},
fail: function (res) {//这里写调用接口失败之后所运行的函数
console.log('.........fail..........');
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
tabBar指的是底部导航菜单
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"iconPath":"",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"iconPath":"",
"text": "日志"
}
]
},
只要有tabBar底部导航菜单的页面我都跳转不过去。
视图层是展示给用户看的页面，逻辑层是给用户提供的数据。
生命周期里面的方法不管那个其实都是页面加载时候自动调用的。
如果是需要页面加载需要调用的事件方法，那么我们就把方法写进去。
中文占两个字节
一旦是后台的变量显示到页面我们就要用到表达式{ {}}
用户第一次授权了以后再进来头像应该一直在。
重新加载小程序data里面的数据是会重新初始化的。
授权以后我们需要用到一个api
用箭头函数以后this指向了当前的页面，否则this指向的是wx.
回调数据的显示
调用函数，然后把返回的数据设置到data里面
然后利用公式把数据显示到页面上。
页面的跳转
利用点击事情类似click,小程序里面是 catchtap=“handleChild” 或者bindtap
wx.navigateTo({
url: ‘/pages/logs/logs’,
})
bindgetuserinfo=“handleGetUserInfo” 点击按钮会调用该办法
open-type=“getUserInfo” 用户授权以后会调用该方法