day02微信小程序笔记-跳转、数据绑定、用户信息、定位、for、上传图片

1. 跳转

　　1.1 对标签进行绑定点击事件-index.wxml、index.js

<view bindtap="cilckMe" data-nid="123456">点我跳转</view>

page({

　　cilckMe: function (e) {

　　var nid = e.currentTarget.dataset.nid;

　　console.log(nid)

　　})

　　}

})

 

　　1.2 页面跳转-index.js

　　// 跳转
　　wx.navigateTo({
　　url: '/pages/recirect/redirect?id='+nid,
})

　　1.3 跳转的页面如果想要接收参数，可以在 onLoad 方法中接收。-redirect.js

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options);
  },
)}

　　注意事项：wx.navigateTo，只能跳转非 tabbar页面

 

　　1.4 通过标签跳转

<navigator url="/pages/recirect/redirect?id=654321">跳转页面</navigator>

　　

 

2. 数据绑定：

　　bind.wxml

<text>数据绑定</text>
<view>数据：{{ message }}</view>
<view>数据1：{{ message }}</view>

<button bindtap="changeData">修改数据</button>

　　bind.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    message: "葫芦娃"
  },
  changeData: function (){
    // 获取数据
    console.log(this.data.message);
    // 修改数据
    this.setData({message: "葫芦娃爷爷"})
    console.log(this.data.message);
  },
)}

　

3. 获取用户信息：- bind.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>
        <view>用户头像：<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
        </view>
        <view><text class="userinfo-nickname">当前用户名：{{userInfo.nickName}}</text>
        </view>
    </block>
  </view>
</view>

　　- bind.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUseGetUserProfile: false,
  },


  /**
   * 获取用户信息
   */
getUserProfile(e) {
  // 推荐使用 wx.getUserProfile 获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
  // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
  wx.getUserProfile({
    desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
    success: (res) => {
      this.setData({
        userInfo: res.userInfo,
        hasUserInfo: true
      })
    }
  })
},

　　

4. 获取用户位置信息：- xx.wxml

<view bindtap="getLocalPath">{{ localPath }}</view>

　　-- xx.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    localPath: '请选择位置'

  },


  /**
   * 获取用户位置
   */
  getLocalPath: function () {
    var that = this
    wx.chooseLocation({
      success: function (res) {
        that.setData({ localPath:res.address })
      },
    })
  },

)}

　

5. for指令- x.wxml

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

<view>
  <view wx:for="{{ dataList }}">
  {{ index }}-{{ item }}</view>
</view>
<text>------------------------</text>

<view>
  <view wx:for="{{ dataList }}" wx:for-index="idx" wx:for-item="ite">
  {{ idx }}-{{ ite }}</view>
</view>
<text>------------------------</text>

<view>
  {{ userInfo.name }}-
  {{ userInfo.age }}
</view>
<text>------------------------</text>

<view wx:for="{{ userInfo }}">{{ index }}-{{ item }} </view>

　　x.js

 /**
   * 页面的初始数据
   */
  data: {
    dataList: ['商品a','商品b','商品c'],
    userInfo: {
      name: "阿呆",
      age: 18
    }

  },

　　

6.上传图片-  xx.wxml

　　

<view bindtap="uploadIame">请上传图片</view>
<view class="container">
  <image wx:for="{{ imageList }}" src="{{ item }}">
  </image>
</view>

　　xx.js

  /**
   * 页面的初始数据
   */
  data: {
    imageList: ["/static/bg.png"]
  },


   /**
   * 上传图片
   */
  uploadIame: function () {
    var that = this

    wx.chooseMedia({
      count: 9,
      mediaType: ['image'],
      sourceType: ['album', 'camera'],
      maxDuration: 30,
      camera: 'back',
      success(res) {
        console.log(res.tempFiles)
        // console.log(res.tempFiles.size)
        let tempFiles = [];
        for (var i=0;i<res.tempFiles.length;i++){
          console.log(res.tempFiles[i].tempFilePath)
          tempFiles.push(res.tempFiles[i].tempFilePath)
        }
        console.log(tempFiles)
        that.setData({
          // 只显示自己选择的图片-单张/多张
          // imageList: tempFiles

          // 默认图片+选择的图片
          imageList: that.data.imageList.concat(tempFiles)
        })
      }
  });
  },