在浏览器输入网址http://github.com/dunizb/wxapp-sCalchttp://github.com/dunizb/wxapp-sCalc进入页面后下载小程序简易计算器源码demo,将其解压后使用微信小程序开发工具打开该项目,分析小程序的页面结构及相关代码,对该小程序进行调试并运行。
操作步骤
1.输入并打开网址
2.点击绿色的“<>Code”下方的红线标注
3.下载完,打开文件
4.打开微信开发者工具,项目——导入项目——选择文件夹,单击不使用云服务。
运行结果与代码
index.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.wxml
<!--index.wxml-->
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
</view>
<view>
<text class="userinfo-nickname">{{userInfo.nickName}}(Dunizb)</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.wxss
/**index.wxss**/
.userinfo {
/*display: flex;*/
/*flex-direction: column;*/
/*align-items: center;*/
/*width:256rpx;*/
/*height: 512rpx;*/
}
.userinfo-avatar {
width: 128px;
height: 128px;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
margin-top:80px;
}
.usermotto {
margin-top: 35%;
}
/** 修改button默认的点击态样式类**/
.button-hover {
background-color: red;
}
/** 修改默认的navigator点击态 **/
.navigator-hover {
color:blue;
}
.github{
color: green;
font-size: 14px;
text-align: center;
margin-top: 5px;
}
.icon{
vertical-align: middle;
margin-right: 2px;
}
view.wxml
<view class="github-info">
<view>微信小程序不支持跳转第三方网页</view>
<view>手动复制GitHub地址吧:</view>
<view class="url">https://github.com/dunizb/wxapp-sCalc</view>
</view>
<view class="github-info">
<view>另外,如果你不喜欢计算器,我还做了一个豆瓣电影的微信小程序</view>
<view>GitHub地址:</view>
<view class="url">https://github.com/dunizb/wxapp-movie</view>
</view>
view.wxss
.github-info{
padding: 10px 5px;
font-size: 16px;
font-family: "Microsoft YaHei";
line-height: 20px;
margin-bottom: 10px;
}
.url{
color: blue;
}