很有意思的是微信自己的语言竟然是抄袭,wxml相当于html,把ht换成了wx ,wxss相当于css,把c换成了wx而已。
pages是存放网页的地方。
utils是微信小程序的js工具类
app.js是小程序的脚本代码
app.json是小程序配置文件
app.wxss是小程序样式表
//app.js
App({
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
//将logs存储到缓存中
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调用app的globalData,globalData是被事先声明了的
that.globalData.userInfo = res.userInfo;
//TODO 后续补充这个,目前不是很懂下面代码
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
});
}
},
globalData:{
userInfo:null
}
})
app.json不能增加任何注释
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
pages 声明了所有界面的路径。
window 配置了所有页面的特征和标题等。
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
app.wxss 小程序公共样式表 ,详细含义可以深入学习css,大体能了解样式的含义。
index.wxml 是页面的结构文件:
<!--index.wxml 页面注释是这种注释-->
<!--class是引用的app.wxss中的定义样式-->
<view class="container">
<!--bindtap绑定一个动作:bindViewTap,bindViewTap在index.js中定义-->
<view bindtap="bindViewTap" class="userinfo">
<!--src="{{userInfo.avatarUrl}}" 这种写法是在index.js 中userInfo json对象中获取的-->
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="usermotto">
<!--{{motto}} 也是在index.js中data中的motto获得-->
<text class="user-motto">{{motto}}</text>
</view>
</view>
logs.wxml 页面结构:
<!--logs.wxml-->
<view class="container log-list">
<block wx:for="{{logs}}" wx:for-item="log">
<text class="log-item">{{index + 1}}. {{log}}</text>
</block>
</view>
里面有个for循环,这个循环的对象是logs,循环的项目是log,数据从logs.js获得。
//logs.js
//引用js用require引用外部js
var util = require('../../utils/util.js')
Page({
data: {
logs: []
},
onLoad: function () {
//设置数据用setData
this.setData({
logs: (wx.getStorageSync('logs') || []).map(function (log) {
return util.formatTime(new Date(log))
})
})
}
})
下面介绍下页面中js的结构
//logs.js
var util = require('../../utils/util.js')
Page({
data: {
logs: []
},
onLoad: function () {
this.setData({
logs: (wx.getStorageSync('logs') || []).map(function (log1) {
return util.formatTime(new Date(log1))+"-------------"
})
})
}
})
page注意大写,标准写法是Pag({
//里面写data,表示数据,数据格式是json
//,号后面可以跟方法onLoad是系统方法,表示页面加载后调用。
//this是框架自己,setData表示设置数据,设置数据也是json赋值。
})
待续。。。