第一章作业

在浏览器中输人网址“https://github.com/dunizb/wxapp-sCalc”，进人页面后下序简易计算器源码 demo，将其解压后使用微信小程序开发工具打开该项目，分析小页面结构及相关代码，对该小程序进行调试并运行。

 

第一步

 

在浏览器打开链接 https://github.com/dunizb/wxapp-sCalc 

 第二步 

 

下载解压Download ZIP文件

 第三步 

 

打开微信开发者工具app，导入项目

 导入成功后，运行效果

 

 源代码如下 

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

<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**/

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

}

 

 

.github-info{

  padding: 10px 5px;

  font-size: 16px;

  font-family: "Microsoft YaHei";

  line-height: 20px;

  margin-bottom: 10px;

}

.url{

  color: blue;

}