第一章 小程序概述

一、操作题

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

二、操作步骤

     1.在浏览器中输人网址  https://github.com/dunizb/wxapp - sCale  ，下载并解压安装包，导入导入微信开发者工具中。如图：

三、运行结果与代码

 1、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
      })
    })
  }
})

2、history.wxml代码

<view class="content">
        <block wx:for="{{logs}}" wx:for-item="log">
            <view class="item">{{log}}</view>
        </block>
    <!--<scroll-view scroll-y="true" scroll-x="true" style="height: 500px;" >-->
        
        <!--<view class="item">1</view>
        <view class="item">1</view>
        <view class="item">1</view>
        <view class="item">1</view>
        <view class="item">1</view>
        <view class="item">1</view>
        <view class="item">1</view>
        <view class="item">1</view>
        <view class="item">1</view>
        <view class="item">1</view>
        <view class="item">1</view>
        <view class="item">1</view>-->
    <!--</scroll-view>-->
</view>

3、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>

4、logs.wxml代码

<!--logs.wxml-->
<view class="container log-list">
  <block wx:for="{{logs}}" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view>

5、运行结果图