0601实战作业 - 作业

Home > List of blog posts > 0601实战作业

Blogger Information

Blog 34

fans 0

comment 0

visits 18400

Special Recommendation

More>

Related recommendations

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 页面链接

编号	属性	类型	默认值	必填	说明
1	target	string	self	否	在哪个目标上发生跳转，默认当前小程序
1	url	string	否	当前小程序内的跳转链接
2	open-	type string	navigate	否	跳转方式
3	delta	number 1	否	当 open-type 为 ‘navigateBack’ 时有效，表示回退的层数
4	app-id	string	否	当 target=”miniProgram”时有效，要打开的小程序
5	path	string	否	当 target=”miniProgram”时有效，打开的页面路径，如果为空则打开首页
6	extra-data	object	否	当 target=”miniProgram”时有效，需要传递给目标小程序的数据，目标小程序可在 App.onLaunch()，App.onShow() 中获取到这份数据。
7	version	string release	否	当 target=”miniProgram”时有效，要打开的小程序版本
8	hover-class	string navigator-hover	否	指定点击时的样式类，当 hover-class=”none”时，没有点击态效果
9	hover-stop-propagation	boolean	false 否	指定是否阻止本节点的祖先节点出现点击态
10	hover-start-time	number 50	否	按住后多久出现点击态，单位毫秒
11	hover-stay-time	number 600	否	手指松开后点击态保留时间，单位毫秒
12	bindsuccess	string	否	当 target=”miniProgram”时有效，跳转小程序成功
13	bindfail	string	否	当 target=”miniProgram”时有效，跳转小程序失败
14	bindcomplete	string	否	当 target=”miniProgram”时有效，跳转小程序完成

target 的合法值

编号	值	说明
1	self	当前小程序
2	miniProgram	其它小程序

open-type 的合法值

编号	值	说明
1	switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
2	reLaunch	关闭所有页面，打开到应用内的某个页面
3	redirect	关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
4	navigate	保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
5	navigateBack	关闭当前页面，返回上一页面或多级页面
6	exit	退出小程序，target=”miniProgram”时生效

app.json

{
  "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"
    }
  ]
  }
}

<text>pages/5/5.wxml</text>
<navigator url="/pages/4/4">保留当前页面，跳转到4页面。但是不能跳到 tabbar 页面</navigator>
<navigator url="/pages/logs/logs" open-type="switchTab">跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面</navigator>
<navigator url="/pages/2/2" open-type="reLaunch">关闭所有页面，打开到应用内2页面</navigator>

<text>pages/4/4.wxml</text>
<navigator url="/pages/3/3" open-type="redirect">关闭当前页面，跳转到应用3页面。但是不允许跳转到 tabbar 页面</navigator>

<text>pages/3/3.wxml</text>
<navigator open-type="navigateBack">关闭当前页面，返回上一页面或多级页面</navigator>

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

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

app.json

{
  "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>

Correcting teacher：

欧阳克

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

0318作业

2021-03-19 12:46:35