微信小程序 目录结构

微信小程序类似于HTML的开发，即一个微信小程序页面由页面描述文件、一个页面逻辑文件、一个样式文件来进行描述。

在主目录中的3个以app开头的文件就是小程序架构的主述文件，这3个文件不属于任何页面。

page目录下有子目录 每个子目录中保存着一个页面的相关文件，通常包含4中不同的扩展名的文件 js、wxml、wxss、json（描述界面的这4个文件必须具有相同的的路径于文件名）

                                           

微信小程序目录架构       

主配置文件app.json

{

"pages" :[

"pages/calc/calc" ,

"pages/icon/icon" ,

"pages/index/index" ,

"pages/logs/logs"

],

"window" :{

"backgroundTextStyle" : "light" ,

"navigationBarBackgroundColor" : "#fff" ,

"navigationBarTitleText" : "WeChat" ,

"navigationBarTextStyle" : "black"

}

}

逻辑层 js 文件

//app.js

App ({

onLaunch : function () {

// 展示本地存储能力

var logs = wx .getStorageSync ( 'logs' ) || []

logs .unshift (Date .now ())

wx .setStorageSync ( 'logs' , logs )

// 登录

wx .login ({

success : res => {

// 发送 res.code 到后台换取 openId, sessionKey, unionId

}

})

// 获取用户信息

wx .getSetting ({

success : res => {

if (res .authSetting [ 'scope.userInfo' ]) {

// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框

wx .getUserInfo ({

success : res => {

// 可以将 res 发送给后台解码出 unionId

this .globalData .userInfo = res .userInfo

// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回

// 所以此处加入 callback 以防止这种情况

if ( this .userInfoReadyCallback ) {

this .userInfoReadyCallback (res )

}

}

})

}

}

})

},

globalData : {

userInfo : null

}

})