0601实战作业

1、写个自定义方法，携带参数

事件对象可以携带额外信息，通过使用data- 自定义传值 方法使用evt.target.dataset.获取传的值

  data: {
    sum: 0
  },
// 自定义方法
  total(evt) {
    this.setData({
      sum: evt.target.dataset.a*1 + evt.target.dataset.b*1
    })
    console.log(this.data.sum);
  },
  `

<view bindtap="total" data-a="4" data-b="5">4 + 5 = {{sum}}</view>

2、列出20个小程序api，写出功能。

名称 功能说明

wx.onAppShow    监听小程序切前台事件
wx.onAppHide    监听小程序切后台事件
wx.offAppShow    取消监听小程序切前台事件
wx.offAppHide    取消监听小程序切后台事件
wx.switchTab    跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.reLaunch    关闭所有页面，打开到应用内的某个页面
wx.redirectTo    关闭当前页面，跳转到应用内的某个页面
wx.navigateTo    保留当前页面，跳转到应用内的某个页面
wx.navigateBack    关闭当前页面，返回上一页面或多级页面
wx.showToast    显示消息提示框
wx.showModal    显示模态对话框
wx.showLoading    显示 loading 提示框
wx.showActionSheet    显示操作菜单
wx.hideToast    隐藏消息提示框
wx.hideLoading    隐藏 loading 提示框
wx.setStorageSync    wx.setStorage 的同步版本
wx.setStorage    将数据存储在本地缓存中指定的 key 中
wx.removeStorageSync    wx.removeStorage 的同步版本
wx.removeStorage    从本地缓存中移除指定 key
wx.getStorageSync    wx.getStorage 的同步版本
wx.getStorageInfoSync    wx.getStorageInfo 的同步版本
wx.getStorageInfo    异步获取当前storage的相关信息
wx.getStorage    从本地缓存中异步获取指定 key 的内容
wx.clearStorageSync    wx.clearStorage 的同步版本
wx.clearStorage    清理本地数据缓存
wx.request    发起 HTTPS 网络请求
wx.uploadFile    将本地资源上传到服务器
wx.downloadFile    下载文件资源到本地

3、生成10个页面，用navigator组件进行跳转。

navigator 页面链接

![](https://img.php.cn/upload/image/542/280/177/1626775235750843.jpg)
{
  "pages":[
    "pages/5/5",
    "pages/4/4",
    "pages/3/3",
    "pages/2/2",
    "pages/1/1",
    "pages/index/index",
    "pages/ad/ad",
    "pages/art/art",
    "pages/admin/admin",
    "pages/logs/logs"
  ],
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "默默记账",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false
  },
  "tabBar": {
    "color": "#444444",
    "selectedColor": "red",
    "backgroundColor": "#ffffff",
    "position": "bottom",
    "borderStyle": "black",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "主页",
      "iconPath": "./static/img/1.png",
      "selectedIconPath": "./static/img/2.png"
    },
    {"pagePath": "pages/ad/ad",
      "text": "广告",
      "iconPath": "./static/img/1.png",
      "selectedIconPath": "./static/img/2.png"
    },
    {"pagePath": "pages/art/art",
      "text": "文章",
      "iconPath": "./static/img/3.png",
      "selectedIconPath": "./static/img/4.png"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "./static/img/3.png",
      "selectedIconPath": "./static/img/4.png"
    }
  ]
  }
}

4、生成10个页面，用路由api进行跳转。

编号 属性 说明

1    wx.switchTab    跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
2    wx.reLaunch    关闭所有页面，打开到应用内的某个页面
3    wx.redirectTo    关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
4    wx.navigateTo    保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
5    wx.navigateBack    关闭当前页面，返回上一页面或多级页面

{
  "pages":[
    "pages/5/5",
    "pages/4/4",
    "pages/3/3",
    "pages/2/2",
    "pages/1/1",
    "pages/index/index",
    "pages/ad/ad",
    "pages/art/art",
    "pages/admin/admin",
    "pages/logs/logs"
  ],
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "默默记账",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false
  },
  "tabBar": {
    "color": "#444444",
    "selectedColor": "red",
    "backgroundColor": "#ffffff",
    "position": "bottom",
    "borderStyle": "black",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "主页",
      "iconPath": "./static/img/1.png",
      "selectedIconPath": "./static/img/2.png"
    },
    {"pagePath": "pages/ad/ad",
      "text": "广告",
      "iconPath": "./static/img/1.png",
      "selectedIconPath": "./static/img/2.png"
    },
    {"pagePath": "pages/art/art",
      "text": "文章",
      "iconPath": "./static/img/3.png",
      "selectedIconPath": "./static/img/4.png"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "./static/img/3.png",
      "selectedIconPath": "./static/img/4.png"
    }
  ]
  }
}

5.js
  goto4() {
    wx.navigateTo({
      url: '/pages/4/4',
    })
  },
  gototab() {
    wx.switchTab({
      url: '/pages/logs/logs',
    })
  },
  goto2() {
    wx.reLaunch({
      url: '/pages/2/2',
    })
  },
  goto3() {
    wx.redirectTo({
      url: '/pages/3/3',
    })
  },
5.wxml
<!--pages/5/5.wxml-->
<text>pages/5/5.wxml</text>
<view bindtap="goto4">navigateTo到页面4</view>
<view bindtap="gototab">wx.switchTab到页面logs</view>
<view bindtap="goto2">wx.reLaunch到页面2</view>
<view bindtap="goto3">wx.redirectTo到页面3</view>
4.js
  back5() {
    wx.navigateBack({
      delta: 0,
    })
  },
4.wxml
<text>pages/4/4.wxml</text>
<view bindtap="back5">返回上一级页面</view>
5、写出模块化文件，把网络通讯api，做成模块化方法，进行调用
common.js
function getData(city) {
  wx.request({
    url: 'http://apis.juhe.cn/simpleWeather/query',
    method:'POST',
    header:{'content-type':'application/x-www-form-urlencoded'},
    data:{
      city:city,
      key:'5eadc4a81863b91579e379704961ee09'
    },
    success(evt) {
        console.log(evt.data.result.future);
    }
  })
}
const _getData = getData;
export { _getData as getData };
2.js
import {getData} from "../../utils/common";
Page({
  /**
   * 页面的初始数据
   */
  data: {
    region: ['广东省', '广州', ''],
    city:'',
    t: []
  },
  bindRegionChange: function(evt) {
      this.setData({
        region:evt.detail.value,
        city:evt.detail.value[1].slice(0, -1),
        // t:getData(this.data.city)
      })
      getData(this.data.city)
      // console.log(this.data.t);
  },
2.wxml
<!--pages/2/2.wxml-->
<view class="section">
  <view class="section__title">天气</view>
  <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
    <view class="picker">
      当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
    </view>
  </picker>
</view>