题目:
在浏览器中输入网址“https://github.com/dunizb/wxapp-sCalc”,进人页面后下载小秒程序简易计算器源码demo,将其解压后使用微信小程序开发工具打开该项目,分析小程序的页面结构及相关代码,对该小程序进行调试并运行。
输入网址:https://github.com/dunizb/wxapp-sCalc
下载压缩文件,在微信小程序软件选择导入解压后的包
导入之后,主页面index.xml代码,html效果
<!--index.wxml-->
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="./img/b.jpg" ></image>
</view>
<view>
<text class="userinfo-nickname">-m0%7</text>
</view>
<view class="usermotto">
<!--<text class="user-motto">{{motto}}</text>-->
<button type="default" size="{{primarySize}}" plain="{{plain}}" hover-class="button-hover"
disabled="{{disabled}}" bindtap="toCalc"> {{motto}} </button>
</view>
<view>
<navigator url="view" class="github" hover-class="navigator-hover">
<icon type="{{iconType}}" class="icon" size="20"/>GitHub
</navigator>
</view>
</view>
index.js代码,跳转页面效果js
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
motto: '简易计算器☞',
userInfo: {},
defaultSize: 'default',
disabled: false,
iconType:'info_circle'
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
toCalc:function(){
wx.navigateTo({
url:'../calc/calc'
})
},
onLoad: function () {
console.log('onLoad');
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})
index.wxss代码,css样式
/**index.wxss**/
.userinfo {
/*display: flex;*/
/*flex-direction: column;*/
/*align-items: center;*/
/*width:256rpx;*/
/*height: 512rpx;*/
}
.userinfo-avatar {
width: 128px;
height: 128px;
margin: 20px;
border-radius: 50%;
}
.userinfo-nickname {
color:black;
margin-top:80px;
}
.usermotto {
margin-top: 35%;
}
/** 修改button默认的点击态样式类**/
.button-hover {
background-color: red;
}
/** 修改默认的navigator点击态 **/
.navigator-hover {
color:greenyellow;
}
.github{
color: green;
font-size: 14px;
text-align: center;
margin-top: 5px;
}
.icon{
vertical-align: middle;
margin-right: 2px;
}
运行效果
简易计算器效果