微信小程序开发实战（二）-一一网

内容回顾

搭建环境
全局配置
- pages
- window
- tabbar
页面
- .json
- .js
- .wxml
- .wxss
flex 布局
- display: flex
- flex-direction: row/column // 主轴方向
- justify-content: flex-start/center/space-around/space-between/flex-end
- align-item: flex-start/center/space-around/space-between/flex-end
小程序开发
- 组件（标签）
  - text
  - view
  - image
样式
- rpx(750)

今日概要

指令
api
页面

内容

设置默认加载打开的页面

跳转

对标签绑定点击事件

<!--pages/home/home.wxml-->
<view bindtap="clickMe" data-nid="123" data-name="Jack">点我跳转</view>
复制代码

// pages/home/home.js
Page({
    ...
   /**
   * 点击绑定事件跳转函数
   */
  clickMe: function (e) {
    var nid = e.currentTarget.dataset.nid;
    var name = e.currentTarget.dataset.name;
    console.log(nid, name);
  }
})
复制代码

页面跳转

// pages/home/home.js
    // 跳转，可以加参数
    wx.navigateTo({
      url: '/pages/redirect/redirect?nid=' + nid,
    })
复制代码

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

// pages/redirect/redirect.js
Page({
   ...
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options);
    console.log(options.nid);
  },
})
复制代码

注意事项： 只能跳到非 ·tabbar· 页面

通过标签跳转

<!--pages/home/home.wxml-->
<navigator url="/pages/redirect/redirect?id=666">点我跳转(通过标签跳转)</navigator>
复制代码

数据绑定

以往的传统方式写法

<html>
    ...
    
    <div id="content"></div>
    
    <script>
        var name = "Jack";
        $('#content').val(name);
    </script>
</html>
复制代码

目前流行框架的写法（vue.js）

<div id="app">
    <div>{{message}}</div>
</div>
    
<script>
    new Vue({
      el: '#app',
      data: {
        message: 'vue模板语法'
      }
    })
</script>
复制代码

小程序写法

wxml

<!--pages/bind/bind.wxml-->
<text>绑定数据页面</text>

<view>数据1：{{message}}</view>
<view>数据2：{{message}}</view>

<button bindtap="changeData">点击修改数据</button>
复制代码

// pages/bind/bind.js
Page({
  ...
  /**
   * 页面的初始数据
   */
  data: {
    message: "How are you?"
  },

  changeData: function () {
    // 获取数据
    var msg = this.data.message;
    console.log(msg);
    
    // 修改数据（错误，只改后端）
    this.data.message = "I'm fine, thank you.";
    console.log(this.data.message);

    // 修改数据（正确的双向绑定修改数据）
    this.setData({message: "I'm fine, thank you."});
  },
  ...
})
复制代码

效果如下所示（分别为点击按钮前后）：

获取用户信息

wxml

<view class="container">
  <view class="userinfo">
    <block wx:if="{{!hasUserInfo}}">
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称  </button>
      <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname"> {{userInfo.nickName}} </text>
    </block>
  </view>
</view>
复制代码

bind.js

// pages/bind/bind.js
Page({
  ...
  /**
   * 页面的初始数据
   */
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUseGetUserProfile: false,

    message: "How are you?",
    name: ""
  },

   /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },

  getUserProfile: function () {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 调用微信接口获取当前用户信息
    wx.getUserProfile({
      desc: '获取用户信息用于测试',
      success: (res) => {
        console.log("getUserProfile success: ", res);
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    }) 
  },

  getUserInfo: function (e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    this.setData({
      userInfo: e.userInfo,
      hasUserInfo: true
    })
  },
  ...
})
复制代码

运行效果如下：

获取用户位置信息

bind.wxml

<button bindtap="getLocalPath"> {{localPath}} </button>
复制代码

bind.js

Page({
   data: {
       localPath: "点击获取位置信息"
   },

  ...
  // 获取地理位置信息
  getLocalPath: function () {
    var that = this;
    wx.chooseLocation({
      success: function (res) {
        console.log("location: ", res);
        that.setData({localPath: res.address});
      }
    })
  },
  ...
复制代码

运行效果如下所示：

for 指令

goods.wxml

<!--pages/goods/goods.wxml-->
<text>商品列表</text>

<!-- 遍历列表 -->
<view>
  <!-- 默认方式 -->
  <view wx:for="{{goodsList}}"> {{index}} - {{item}}</view>
  <!-- 自定义方式 -->
  <view wx:for="{{goodsList}}" wx:for-index="ids" wx:for-item="itm"> {{ids}} - {{itm}} </view>
</view>

<!-- 遍历字典 -->
<view>{{userInfo.name}}, {{userInfo.age}}</view>
<view>
  <view wx:for="{{userInfo}}">{{index}}: {{item}}</view>
</view>
复制代码

goods.js

// pages/goods/goods.js
Page({
  ...
  /**
   * 页面的初始数据
   */
  data: {
    goodsList: ["洗衣机", "冰箱", "空调"],
    userInfo: {
      name: "Alex",
      age: 18
    }
  },
  ...
})
复制代码

获取和上传图片

publish.wxml

<!--pages/publish/publish.wxml-->
<text>上传图片页面</text>

<view>************************</view>

<button bindtap="uploadImage">请上传图片</button>
<view class="container">
  <image wx:for="{{imageList}}" src="{{item}}" wx:key="key"></image>
</view>
复制代码

publish.js

// pages/publish/publish.js
Page({
  data: {
    imageList: ["/static/others/iphone7.jpeg", "/static/others/ios.jpeg"]
  },
// 上传图片
  uploadImage: function () {
    var that = this;

    wx.chooseImage({
      count: 9,
      sizeType: ["original", "compressed"],
      sourceType: ["album", "camera"],
      success: function (res) {
        console.log("success:", res);
        // 设置imageList，页面上的图片自动修改
        // that.setData({imageList: res.tempFilePaths});

        // 追加的方式：默认图片 + 选择的图片
        var newImageList = that.data.imageList.concat(res.tempFilePaths);
        that.setData({imageList: newImageList});
      },
      fail: function (res) {
        console.log("fail:", res);
      }
    })
  },
  ...
})
复制代码

注意：这里只是上传到内存的，页面刷新后就会清掉，要想真实的上传上去，需要有自己的后台服务器来存储，然后将相应的路径修改为服务器存储的路径即可。

总结

标签（组件）

text
view
image
navigator，跳转到其他页面（默认只能跳转到非tabbar页面）
button，按钮

事件

bindtab

<view bindtap="func"></view>

<view bindtap="func" data-xx="123"></view>
复制代码

func: function(e) {
    e.currentTarget.dataset
}
复制代码

api

wx.navigateTo 跳转

// 跳转
    wx.navigateTo({
      url: '/pages/redirect/redirect?nid=' + nid,
    })
复制代码

wx.getUserProfile 获取用户信息

  onLoad: function (options) {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },

  // 获取用户信息：最新用法
  getUserProfile: function () {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 调用微信接口获取当前用户信息
    wx.getUserProfile({
      desc: '获取用户信息用于测试',
      success: (res) => {
        console.log("getUserProfile success: ", res);
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    }) 
  },
复制代码

wx.chooseLocation 获取地理位置信息

  // 获取地理位置信息
  getLocalPath: function () {
    var that = this;
    wx.chooseLocation({
      success: function (res) {
        console.log("location: ", res);
        that.setData({localPath: res.address});
      }
    })
  },
复制代码

    wx.chooseImage({
      count: 9,
      sizeType: ["original", "compressed"],
      sourceType: ["album", "camera"],
      success: function (res) {
        console.log("success:", res);
        // 设置imageList，页面上的图片自动修改
        // that.setData({imageList: res.tempFilePaths});

        // 追加的方式：默认图片 + 选择的图片
        var newImageList = that.data.imageList.concat(res.tempFilePaths);
        that.setData({imageList: newImageList});
      },
      fail: function (res) {
        console.log("fail:", res);
      }
    })
复制代码