如果没有收到内测邀请，可以跳过本步骤
2. 创建项目
3. 编写代码
//app.jsApp({
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
}
})
{ “pages”:[ “pages/index/index”, “pages/logs/logs”
], “window”:{ “backgroundTextStyle”:”light”, “navigationBarBackgroundColor”: “#fff”, “navigationBarTitleText”: “WeChat”, “navigationBarTextStyle”:”black”
}
}
/**app.wxss**/.container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box;
}
创建页面
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>
本例中使用了<view/>、<image/>、<text/>来搭建页面结构，绑定数据和交互处理函数。
//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
})
})
}
})
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;
}
页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。
index.json 是页面的配置文件：
页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
logs 的页面结构
<!–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>
logs 页面使用<block/>控制标签来组织代码，在<block/>上使用wx:for绑定logs数据，并将logs数据循环展开节点
//logs.jsvar util = require(‘../../utils/util.js’)
Page({
data: {
logs: []
},
onLoad: function () { this.setData({
logs: (wx.getStorageSync(‘logs’) || []).map(function (log) { return util.formatTime(new Date(log))
})
})
}
})
运行结果如下：
4. 手机预览
