app.js、app.json、app. wxml、app.wx
4个文件详解
在写小程序创建项目的时候每一个一般都会有
js,json wxml ,wxss
一个选择一个一个创建
也可以一键创建
创建的时候选择Component 输入名字 这四个就一下创建了
这样创建写的时候js ,json里面不符合自己的修改下即可.
一、app.js里面放的是我们的脚本，在这个文件中监听并处理我们小程序的生命周期，声明一些全局变量
//app.js
App({
//当程序初始化的时候执行onLaunch里面的内容
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
//全局的方法
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
//全局属性
globalData:{
userInfo:null
}
})
二、app.json是小程序全局的配置，配置小程序是有哪些页面组成的，还有配置小程序的窗口，如背景颜色、导航的颜色、导航文章样式
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#000",
"navigationBarTitleText": "微信",
"navigationBarTextStyle":"white"
}
}
三、app.wxss：全局样式
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
四、Pages
1、index.js
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})
2、index.wxml
<!--index.wxml-->
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
3、index.wxss
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}
4、创建一个文件，配置index.json,优先级比全局更高！范围越小优先级会比较高！
{
"navigationBarTitleText": "首页"
}
