Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 0601实战作业
Blogger Information
Blog 52
fans 1
comment 1
visits 38664
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
0601实战作业
小丑0o鱼
Original
431 people have browsed it

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

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

  1.   data: {
  2.     sum: 0
  3.   },
  4. // 自定义方法
  5.   total(evt) {
  6.     this.setData({
  7.       sum: evt.target.dataset.a*1 + evt.target.dataset.b*1
  8.     })
  9.     console.log(this.data.sum);
  10.   },
  12.   `
  1. <view bindtap="total" data-a="4" data-b="5">4 + 5 = {{sum}}</view>

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

名称 功能说明

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

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

navigator 页面链接

  2. ![](https://img.php.cn/upload/image/542/280/177/1626775235750843.jpg)
  6. {
  7.   "pages":[
  8.     "pages/5/5",
  9.     "pages/4/4",
  10.     "pages/3/3",
  11.     "pages/2/2",
  12.     "pages/1/1",
  13.     "pages/index/index",
  14.     "pages/ad/ad",
  15.     "pages/art/art",
  16.     "pages/admin/admin",
  17.     "pages/logs/logs"
  18.   ],
  19.   "style": "v2",
  20.   "sitemapLocation": "sitemap.json",
  21.   "window": {
  22.     "navigationBarBackgroundColor": "#ffffff",
  23.     "navigationBarTextStyle": "black",
  24.     "navigationBarTitleText": "默默记账",
  25.     "backgroundColor": "#eeeeee",
  26.     "backgroundTextStyle": "light",
  27.     "enablePullDownRefresh": false
  28.   },
  29.   "tabBar": {
  30.     "color": "#444444",
  31.     "selectedColor": "red",
  32.     "backgroundColor": "#ffffff",
  33.     "position": "bottom",
  34.     "borderStyle": "black",
  35.     "list": [{
  36.       "pagePath": "pages/index/index",
  37.       "text": "主页",
  38.       "iconPath": "./static/img/1.png",
  39.       "selectedIconPath": "./static/img/2.png"
  40.     },
  41.     {"pagePath": "pages/ad/ad",
  42.       "text": "广告",
  43.       "iconPath": "./static/img/1.png",
  44.       "selectedIconPath": "./static/img/2.png"
  45.     },
  46.     {"pagePath": "pages/art/art",
  47.       "text": "文章",
  48.       "iconPath": "./static/img/3.png",
  49.       "selectedIconPath": "./static/img/4.png"
  50.     },
  51.     {
  52.       "pagePath": "pages/logs/logs",
  53.       "text": "日志",
  54.       "iconPath": "./static/img/3.png",
  55.       "selectedIconPath": "./static/img/4.png"
  56.     }
  57.   ]
  58.   }
  59. }

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

编号 属性 说明

  1. 1    wx.switchTab    跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
  2. 2    wx.reLaunch    关闭所有页面，打开到应用内的某个页面
  3. 3    wx.redirectTo    关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
  4. 4    wx.navigateTo    保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
  5. 5    wx.navigateBack    关闭当前页面，返回上一页面或多级页面
  1. {
  2.   "pages":[
  3.     "pages/5/5",
  4.     "pages/4/4",
  5.     "pages/3/3",
  6.     "pages/2/2",
  7.     "pages/1/1",
  8.     "pages/index/index",
  9.     "pages/ad/ad",
  10.     "pages/art/art",
  11.     "pages/admin/admin",
  12.     "pages/logs/logs"
  13.   ],
  14.   "style": "v2",
  15.   "sitemapLocation": "sitemap.json",
  16.   "window": {
  17.     "navigationBarBackgroundColor": "#ffffff",
  18.     "navigationBarTextStyle": "black",
  19.     "navigationBarTitleText": "默默记账",
  20.     "backgroundColor": "#eeeeee",
  21.     "backgroundTextStyle": "light",
  22.     "enablePullDownRefresh": false
  23.   },
  24.   "tabBar": {
  25.     "color": "#444444",
  26.     "selectedColor": "red",
  27.     "backgroundColor": "#ffffff",
  28.     "position": "bottom",
  29.     "borderStyle": "black",
  30.     "list": [{
  31.       "pagePath": "pages/index/index",
  32.       "text": "主页",
  33.       "iconPath": "./static/img/1.png",
  34.       "selectedIconPath": "./static/img/2.png"
  35.     },
  36.     {"pagePath": "pages/ad/ad",
  37.       "text": "广告",
  38.       "iconPath": "./static/img/1.png",
  39.       "selectedIconPath": "./static/img/2.png"
  40.     },
  41.     {"pagePath": "pages/art/art",
  42.       "text": "文章",
  43.       "iconPath": "./static/img/3.png",
  44.       "selectedIconPath": "./static/img/4.png"
  45.     },
  46.     {
  47.       "pagePath": "pages/logs/logs",
  48.       "text": "日志",
  49.       "iconPath": "./static/img/3.png",
  50.       "selectedIconPath": "./static/img/4.png"
  51.     }
  52.   ]
  53.   }
  54. }
  1. 5.js
  3.   goto4() {
  4.     wx.navigateTo({
  5.       url: '/pages/4/4',
  6.     })
  7.   },
  8.   gototab() {
  9.     wx.switchTab({
  10.       url: '/pages/logs/logs',
  11.     })
  12.   },
  13.   goto2() {
  14.     wx.reLaunch({
  15.       url: '/pages/2/2',
  16.     })
  17.   },
  18.   goto3() {
  19.     wx.redirectTo({
  20.       url: '/pages/3/3',
  21.     })
  22.   },
  23. 5.wxml
  25. <!--pages/5/5.wxml-->
  26. <text>pages/5/5.wxml</text>
  27. <view bindtap="goto4">navigateTo到页面4</view>
  28. <view bindtap="gototab">wx.switchTab到页面logs</view>
  29. <view bindtap="goto2">wx.reLaunch到页面2</view>
  30. <view bindtap="goto3">wx.redirectTo到页面3</view>
  31. 4.js
  33.   back5() {
  34.     wx.navigateBack({
  35.       delta: 0,
  36.     })
  37.   },
  38. 4.wxml
  40. <text>pages/4/4.wxml</text>
  41. <view bindtap="back5">返回上一级页面</view>
  42. 5、写出模块化文件，把网络通讯api，做成模块化方法，进行调用
  43. common.js
  45. function getData(city) {
  46.   wx.request({
  47.     url: 'http://apis.juhe.cn/simpleWeather/query',
  48.     method:'POST',
  49.     header:{'content-type':'application/x-www-form-urlencoded'},
  50.     data:{
  51.       city:city,
  52.       key:'5eadc4a81863b91579e379704961ee09'
  53.     },
  54.     success(evt) {
  55.         console.log(evt.data.result.future);
  56.     }
  57.   })
  58. }
  59. const _getData = getData;
  60. export { _getData as getData };
  61. 2.js
  63. import {getData} from "../../utils/common";
  64. Page({
  65.   /**
  66.    * 页面的初始数据
  67.    */
  68.   data: {
  69.     region: ['广东省', '广州', ''],
  70.     city:'',
  71.     t: []
  72.   },
  73.   bindRegionChange: function(evt) {
  74.       this.setData({
  75.         region:evt.detail.value,
  76.         city:evt.detail.value[1].slice(0, -1),
  77.         // t:getData(this.data.city)
  78.       })
  79.       getData(this.data.city)
  80.       // console.log(this.data.t);
  81.   },
  82. 2.wxml
  84. <!--pages/2/2.wxml-->
  85. <view class="section">
  86.   <view class="section__title">天气</view>
  87.   <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
  88.     <view class="picker">
  89.       当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
  90.     </view>
  91.   </picker>
  92. </view>
Correction status：Uncorrected

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