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，写出功能。

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

• navigator 页面链接

• target 的合法值

• open-type 的合法值

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进行跳转。

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>

更多相关文章

1. 【记账后台管理系统】用户列表、用户日志列表渲染、记账分类动态
2. 微信小程序数据操作、自定义事件、微信API、路由组件、变量作用
3. PHP:【微信小程序】微信小程序API，微信小程序路由，微信小程序作用
4. 微信小程序介绍、配置、视图层、逻辑层、页面数据交互等知识点学
5. 【TP实战】记账后台管理系统实战开发（用户管理页面增删改查）
6. php获取当前的定位城市
7. PHP:使用curl请求聚合支付的驾考宝典题库接口数据, 并渲染到页面
8. 本地git的配置和一些命令
9. 关于获得当前的index的方法

随机推荐

1. 通过 Android SDK Manager 安装面向 Andr
2. 常用的布局和View常用属性
3. Android应用程序开发的五大概念
4. Eclpise导入android SDK自带的API demos
5. Android(安卓)json 解析
6. Android(安卓)BitTube 学习
7. 第20章、OnCheckedChangeListener事件（从
8. Android关于线程更新UI的方法
9. Android(安卓)的属性分析
10. Android和Linux kernel发展史