目录
题目
在浏览器中输人网址 “ https://github.com/dunizb/wxapp-sCalc ",进人页面后下载小程序简易计算器源码demo,将其解压后使用微信小程序开发工具打开该项目,分析小程序的页面结构及相关代码,对该小程序进行调试并运行。
下载项目
跳转网址下载图片中的文件:
导入项目
选择解压后的文件路径并打开,导入项目。
确定,即可导入成功。
项目详细代码、分析小程序和运行结果
app.js
//app.js
App({
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
}
})
这是小程序的入口文件,它包含了小程序的全局配置和生命周期函数。其中 onLaunch
生命周期函数在小程序启动时触发,用于从本地缓存获取数据并进行一些初始化操作。getUserInfo
函数用于获取用户信息,包括登录和获取用户信息的操作。globalData
用于存储用户信息。
app.json
{
"pages":[
"pages/index/index",
"pages/calc/calc",
"pages/history/history",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#da7c0c",
"navigationBarTitleText": "简易计算器",
"navigationBarTextStyle":"white"
}
}
这是小程序的全局配置文件。其中 "pages"
字段定义了小程序的页面路径,包括首页、计算页面、历史记录页面和日志页面。 "window"
字段定义了小程序窗口的一些样式和表现,包括背景样式、导航栏颜色、标题文本以及导航栏文字颜色等。
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;
}
这是小程序的样式文件,定义了一个名为 .container
的样式类。它设置了高度为100%,采用垂直方向的列布局,内容居中显示,并在内容上下各留有 200rpx 的内边距。
project.config.json
{
"appid": "wx0f13f9920af88b98",
"compileType": "miniprogram",
"libVersion": "3.3.4",
"packOptions": {
"ignore": [],
"include": []
},
"setting": {
"coverView": true,
"es6": true,
"postcss": true,
"minified": true,
"enhance": true,
"showShadowRootInWxmlPanel": true,
"packNpmRelationList": [],
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
}
},
"condition": {},
"editorSetting": {
"tabIndent": "insertSpaces",
"tabSize": 2
}
}
project.private.config.json
{
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
"projectname": "wxapp-sCalc-master",
"setting": {
"compileHotReLoad": true
}
}
运行结果: