内容回顾

  • 搭建环境
  • 全局配置
    • pages
    • window
    • tabbar
  • 页面
    • json
    • js
    • wxml
    • wxss
  • flex布局
    • display: flex
    • flex-direction: row/column
    • justify-content:…
    • align-item:…
  • 小程序开发
    • 组件（标签）
      • text
      • view
      • image
    • 样式
      • rpx

今日概要

  • 指令
  • api
  • 页面

今日内容

1. 跳转

1.1 对标签绑定点击事件

data-xxx=””，对跳转事件传值，传的值在.currentTarget.dataset中查到

  1. <view bindtap="clickMe" data-nid="123" data-name="SD" >点我跳转</view>
  1. Page({
  2.   ...
  3.   /**
  4.    *  点击绑定的事件
  5.   */
  6.   clickMe:function(e){
  7.     var nid = e.currentTarget.dataset.nid;
  8.     console.log(nid);
  9.   }
  10. })

1.2 页面跳转

注意事项：跳转链接可拼接，只能跳转到 非tabbar的页面

  1. wx.navigateTo({
  2.     url: '/pages/redirect/redirect?id='+nid
  3. })

跳转到的页面如果想要接受参数，可以在onLoad方法中接受。

redirect.js

  1. Page({
  2. /**
  3.    * 生命周期函数--监听页面加载
  4.    */
  5.   onLoad: function (options) {
  6.     console.log(options);
  7.   }
  8. })

1.3 通过标签跳转

  1. <navigator url="/pages/redirect/redirect?id=666">跳转到新页面</navigator>

id=“666”,表示将该参数传到跳转页面

2.数据绑定

  • vue ``` …

  2. -  vue.js

{{message}}

  1. <script>
  2.     new Vue({
  3.       el: '#app',
  4.       data: {
  5.         message: '老男孩教育Python'
  6.       }
  7.     })
  8. </script>

  2. <a name="4daa45d2"></a>
  3. #### 2.1 基本显示
  5. -  wxml
数据1：{{message}} - 展示数据 // pages/bind/bind.js Page({ /* 页面的初始数据 */ data: { message:”沙雕李业”, } )} <a name="8b729ee3"></a> #### 2.2 数据更新 - wxml 数据2：{{message}} 

  2. -  修改数据

Page({ data: { message:”沙雕李业”, }, changeData:function(){ // 修改数据 this.setData({ message: “大沙雕李业”}); } })

  2. <a name="56503967"></a>
  3. ### 3.获取用户信息
  5. <a name="56ddc8a6"></a>
  6. #### 方式一
  8. -  wxml
获取当前用户名 - jsjavascript getUserName:function(){ // 调用微信提供的接口获取用户信息 wx.getUserInfo({ success: function (res) { // 调用成功后触发 console.log(‘success’,res) }, fail:function(res){ // 调用失败后触发 console.log(‘fail’, res) } }) }, <a name="e1ddf6ee"></a> #### 方式二 - wxml - js xxxx:function(){ wx.getUserInfo({ success: function (res) { // 调用成功后触发 console.log(‘success’, res) }, fail: function (res) { // 调用失败后触发 console.log(‘fail’, res) } }) } <a name="1a63ac23"></a> #### 示例 - wxml 当前用户名：{{name}} 当前头像：Day02 页面跳转 数据绑定 用户信息获取 - 图1 - js <br />注意事项： // pages/login/login.js Page({ / 页面的初始数据 / data: { name:””, path: “/static/default.png” }, fetchInfo:function(){ var that = this; wx.getUserInfo({ success:function(res){ console.log(res); that.setData({ name:res.userInfo.nickName, path:res.userInfo.avatarUrl }) } }) }, / 生命周期函数—监听页面加载 / onLoad: function (options) { }, / 生命周期函数—监听页面初次渲染完成 / onReady: function () { }, / 生命周期函数—监听页面显示 / onShow: function () { }, / 生命周期函数—监听页面隐藏 / onHide: function () { }, / 生命周期函数—监听页面卸载 / onUnload: function () { }, / 页面相关事件处理函数—监听用户下拉动作 / onPullDownRefresh: function () { }, / 页面上拉触底事件的处理函数 / onReachBottom: function () { }, /* 用户点击右上角分享 */ onShareAppMessage: function () { } }) - 想要获取用户信息，必须经过用户授权（button）。 - 已授权 - 不授权，通过调用wx.openSetting // 打开配置，手动授权。 // wx.openSetting({}) <a name="7d11ef6f"></a> ### 4.获取用户位置信息 - wxml {{localPath}} - js data: { localPath:”请选择位置”, }, getLocalPath:function(){ var that = this; wx.chooseLocation({ success: function(res) { that.setData({localPath:res.address}); }, }) }, <a name="23c987e3"></a> ### 5. for指令 - wxml 商品列表 {{index}} - {{item}} {{idx}} - {{x}} {{userInfo.name}} {{userInfo.age}} {{index}} - {{item}} - js data: { dataList:[“白浩为”,”海狗”,”常鑫”], userInfo:{ name:”alex”, age:18 } }, <a name="70e8e3c1"></a> ### 6.获取图片 - wxml 请上传图片 Day02 页面跳转 数据绑定 用户信息获取 - 图2 - js data: { imageList: [“/static/hg.jpg”, “/static/hg.jpg”] }, uploadImage:function(){ var that = this; wx.chooseImage({ count:9, sizeType: [‘original’, ‘compressed’], sourceType: [‘album’, ‘camera’], success:function(res){ // 设置imageList，页面上图片自动修改。 // that.setData({ // imageList: res.tempFilePaths // }); // 默认图片 + 选择的图片； that.setData({ imageList: that.data.imageList.concat(res.tempFilePaths) }); } }); }, 注意：图片目前只是上传到了内存。 <a name="25f9c7fa"></a> ## 总结 - 标签（组件） - text - view - image - navigator，跳转到其他页面（默认只能跳转到非tabbar页面） - button，按钮（特殊：建议获取用户信息时） - 事件 - bindtap 

  1. ```
  2. func:function(e){
  3.     e.currentTarget.dataset
  4. }

  • api

    • navigateTo 

      1. wx.navigateTo({
      2. url: '/pages/redirect/redirect?id='+nid,
      3. })

    • openSetting 

      1. wx.openSetting({})

    • getUserInfo
      ``` wx.getUserInfo({ success:function(res){ console.log(res); } })

注意：结合button按钮实现

  2.    -  chooseLocation

wx.chooseLocation({ success: function(res) {

  1.   },
  2. })
  2.    -  chooseImage

wx.chooseImage({ count:9, sizeType: [‘original’, ‘compressed’], sourceType: [‘album’, ‘camera’], success:function(res){

  1.   }
  2. });
  2. -  数据绑定 
  3. -  for指令<br />注意：setData + that 
  5. <a name="116e0772"></a>
  6. ## 作业
  8. 1.  拍卖详细页面<br />![](assets/1578372522526.png#crop=0&crop=0&crop=1&crop=1&id=HpOmU&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=) 
  9. 2.  发布消息的页面 <br />![](assets/1578372545461.png#crop=0&crop=0&crop=1&crop=1&id=gYhCB&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=)

```

  1. 功能点：
    • 拍卖列表页面通过for循环+后端数据展示信息。
    • 点击拍卖列表中的某项拍卖时，需要将自己的ID传递给 拍卖详细页面。
    • 上传图片
    • 选择位置