近期因为上次说有可能以后做这个,然后看了一下这个,原来学reactnative的时候就忘了做笔记,现在好久不用都忘了,然后吸取上次教训,开始就做笔记,看一下目录结构
目录结构很清晰吧,我感觉和reactnative特别像,那个简单的index举个例子,有三种格式,js,wxml,wxss和前端的很像很像有木有
index.js
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
motto: 'Hello Fanyafeng',
userInfo: {}
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: 'pages/component/logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
that.update()
})
}
})
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>
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: 10px;
}
这三个文件横向去看就知道了,wxss是控制样式的,这里的命名和wxml中对应,wxml进行页面布局,js进行数据操作等等
这是这三种文件的基本关系吧,再来看最重要的就是app的三个文件
基本可以类比,这里着重说一下app.json的作用
我感觉有点像android的清单文件,还有就是首页的框架布局,以及一些简单的配置
看一下源代码
{
"pages":[
"pages/component/index",
"pages/component/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
},
"networkTimeout": {
"request": 10000,
"connectSocket": 10000,
"uploadFile": 10000,
"downloadFile": 10000
},
"debug": true
}