微信小程序第一次作业

操作题

先搜索网址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>
</view>

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

运行结果