?? ??

??? ???? ??

???? ?? ???? "??"? ?????. tools? ?? ? ????? ??????? ? ?? ??? ?? ??? ???? ??? ? ? ????. ?? ???? ???? ?? app.js, app.json ? app.wxss???. ? ? .js ???? ???? ??, .json ???? ?? ??, .wxss ???? ??? ?? ?????. WeChat ???? ??? ??? ?? ??? ????? ?????.

??? ???? ?? ???? WeChat ???? ???? ??? ? ??? ? ? ??? ??? ???? ??? ?????.

app.js? ?? ????? ???? ?????. ???? ???? ??? ???? ? ???? ? ???? ?? ??? ??? ? ????. ? ???? ?? ???? ?? ?? ? ?? ??? ?? ??????? ???? ??? API? ?????. ?? ??? API? ?? ??? ????? API ???

//app.js
App({
 onLaunch: function () {
 //調(diào)用API從本地緩存中獲取數(shù)據(jù)
 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{
  //調(diào)用登錄接口
  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? ?????. app.json? ?? ???? ?? ?? ?????. ? ????? ?? ????? ?? ???? ???? ??? ????, ?? ????? ? ???? ????, ?? ??? ???? ????, ?? ??? ??? ? ????. ? ???? ??? ??? ? ????. ? ?? ?? ??? ??? ?? ?? ??

{
 "pages":[
 "pages/index/index",
 "pages/logs/logs"
 ],
 "window":{
 "backgroundTextStyle":"light",
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTitleText": "WeChat",
 "navigationBarTextStyle":"black"
 }
}

app.wxss? ?????. ?? ???? ?? ?? ??? ?????. ??? ?? ??? ??? ??? ?? 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;
}

??? ???

? ?????? ? ???? ????. ???? ?? ???, ? ?? ???? ?? ???? ?? ?? ?? ???? ?? ??? ????? ????. ?? ?? ????? ? ???? [?? + ??? ??]? app.json? ???? ???? ??, ???? ? ?? ???? ?? ????? ???????.
? ?? ???? ???? index.js, index.wxml, index.wxss, index.json? ?? ??? ??? ??? ??? ?? 4?? ?? ?? ??? ??? ?????. .js ???? ?? ??? ???? ????, .json ???? ?? ??? ?? ????, .wxss ???? ?? ??? ??? ?? ????, .wxml ???? ?? ??? ??? ?? ?????.

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.js? ???? ???? ?????. ? ????? ???? ?????? ??? ???? ? ????, ?? ???? ????? ????, ???? ?? ? ????, ???? ??? ? ????. ???? ??? ?

//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
 data: {
 motto: 'Hello World',
 userInfo: {}
 },
 //事件處理函數(shù)
 bindViewTap: function() {
 wx.navigateTo({
  url: '../logs/logs'
 })
 },
 onLoad: function () {
 console.log('onLoad')
 var that = this
 //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
 app.getUserInfo(function(userInfo){
  //更新數(shù)據(jù)
  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 ?? ??? ?? ??? ?????. ??? ??? ?? ??? ??? app.json? ?? ??? ????? ?? ?????.

?? ??? ??

<!--logs.wxml-->
<view class="container log-list">
 <block wx:for-items="{{logs}}" wx:for-item="log">
 <text class="log-item">{{index + 1}}. {{log}}</text>
 </block>
</view>

?? ???? ??? ???? ??? ????, ?? wx:for-items? ???? ?? ???? ?????, ?? ???? ???? ??? ?????.

//logs.js
var 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. ??? ??????

??? ?? ?? ?? ????? "????"? ???? "????"? ??? ? QR ??? ???? WeChat ??????? ??? ???.

?? WeChat Mini ???? ?? ???? ?? ?? ?????. ???? ?? ??? ?? ???????. ? ???!

?? ??? ?? ??? ? ?? ?? ?? ??? ??? PHP ??? ????? ??????!