第一章作业

最新推荐文章于 2024-10-31 15:17:34 发布

@十九810

最新推荐文章于 2024-10-31 15:17:34 发布

阅读量112

点赞数 4

文章标签：微信小程序

本文链接：https://blog.csdn.net/2302_78582801/article/details/136434980

版权

在浏览器里输入：GitHub - dunizb/wxapp-sCalc: :speech_balloon:微信小程序版简易计算器demo，适合入门练手

进入页面后下载小程序简易计算器源码demo,将其解压后使用微信小程序开发工具打开

#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>

#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;

}

导出图