search

博客列表 >0601实战作业

0601实战作业

千山暮雪
千山暮雪原创
2021年06月05日 17:27:57506浏览

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.   },
  1. <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

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

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

5.js

  1.   goto4() {
  2.     wx.navigateTo({
  3.       url: '/pages/4/4',
  4.     })
  5.   },
  7.   gototab() {
  8.     wx.switchTab({
  9.       url: '/pages/logs/logs',
  10.     })
  11.   },
  12.   goto2() {
  13.     wx.reLaunch({
  14.       url: '/pages/2/2',
  15.     })
  16.   },
  17.   goto3() {
  18.     wx.redirectTo({
  19.       url: '/pages/3/3',
  20.     })
  21.   },

5.wxml

  1. <!--pages/5/5.wxml-->
  2. <text>pages/5/5.wxml</text>
  3. <view bindtap="goto4">navigateTo到页面4</view>
  4. <view bindtap="gototab">wx.switchTab到页面logs</view>
  5. <view bindtap="goto2">wx.reLaunch到页面2</view>
  6. <view bindtap="goto3">wx.redirectTo到页面3</view>

4.js

  1.   back5() {
  2.     wx.navigateBack({
  3.       delta: 0,
  4.     })
  5.   },

4.wxml

  1. <text>pages/4/4.wxml</text>
  2. <view bindtap="back5">返回上一级页面</view>

5、写出模块化文件，把网络通讯api，做成模块化方法，进行调用

common.js

  1. function getData(city) {
  2.   wx.request({
  3.     url: 'http://apis.juhe.cn/simpleWeather/query',
  4.     method:'POST',
  5.     header:{'content-type':'application/x-www-form-urlencoded'},
  6.     data:{
  7.       city:city,
  8.       key:'5eadc4a81863b91579e379704961ee09'
  9.     },
  10.     success(evt) {
  11.         console.log(evt.data.result.future);
  12.     }
  13.   })
  14. }
  16. const _getData = getData;
  17. export { _getData as getData };

2.js

  1. import {getData} from "../../utils/common";
  3. Page({
  5.   /**
  6.    * 页面的初始数据
  7.    */
  8.   data: {
  9.     region: ['广东省', '广州', ''],
  10.     city:'',
  11.     t: []
  12.   },
  14.   bindRegionChange: function(evt) {
  16.       this.setData({
  17.         region:evt.detail.value,
  18.         city:evt.detail.value[1].slice(0, -1),
  19.         // t:getData(this.data.city)
  20.       })
  21.       getData(this.data.city)
  22.       // console.log(this.data.t);
  24.   },

2.wxml

  1. <!--pages/2/2.wxml-->
  2. <view class="section">
  3.   <view class="section__title">天气</view>
  4.   <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
  5.     <view class="picker">
  6.       当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
  7.     </view>
  8.   </picker>
  9. </view>
上一条：【记账小程序】收入和支出首页展示与数字键功能、编辑后端分类列表接口API与记账成功提示下一条：一些对于自己需要具备的能力的提醒
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多