微信小程序——day02

1. 页面跳转

方法1：绑定事件进行跳转(常用)方法2：通过标签进行跳转 2.数据绑定

2.1 基本显示2.2 数据更新 3. 获取用户信息4.获取用户位置信息5. for指令6.上传图片

wxml页面

绑定事件跳转

js页面

clickMe : function(e) {
    console.log(e); 
    var nid = e.target.dataset.nid;
    
    wx.navigateTo({
        url: '/pages/skip/skip?nid=' + nid,
    })
}

在跳转完成后，在跳转页面中的onLoad函数中获取参数

onLoad: function (options) {
    console.log(options);
    this.setData({
        nid : options.nid,
    })
}

注意事项：只能跳转到非tabbar的页面。

wxml页面

标签跳转

在html页面中，这样content就与name进行了绑定

在vue.js中，message的值就是js中data中message的值，在微信小程序中，自然也支持这样的写法。

    
{{message}}

wxml

数据1：{{message}}

js

Page({
    
    data: {
        message:"1001001",
    }
)}

结果显示就是

数据1：1001001

在微信小程序中，默认绑定的数据都存在于本页面的js文件的data中，而且我们每次对data中的值进行替换时，都希望页面上的值也跟着替换。

html

数据：{{message}}
点击修改数据

js

Page({
    data: {
        message:"1001001",
    },
    changeData:function(){
        // 修改数据
        this.setData({ message: "漠殇"});
    }
})

我们不采用在data中直接赋值的方式，那样即使data中的数据变化了，页面的数据也不会进行变换。

我们修改数据使用this.setData({})

在微信中，想要获取用户信息，就需要调用微信的API，获取用户信息的API为wx.getUserProfile,我们再使用数据绑定的知识，写出下面的页面。

html

用户名：{{userName}}
头像
    
 


获取用户信息

js

Page({

    
    data: {
        userName : "",
        imgurl: "/static/default.png",
        location: "",
    },

    getUserProfile: function() {
        
        wx.getUserProfile({
            desc: '学习交流', 
            success: (res) => {
                console.log(res);
                this.setData({
                    userName : res.userInfo.nickName,
                    imgurl: res.userInfo.avatarUrl,
                })
            }
        })
    },
}）

与获取用户信息一样，需要调用wx.chooseLocationAPI

html

当前位置：{{location}} 
获取位置

js

getLocation: function() {
    wx.chooseLocation({
        success : (res) => {
            console.log(res);
            this.setData({
                location: res.address,
            })
        }
    })
},

在微信小程序中，也存在着for循环，用法为wx:for={{遍历的列表}}

其中下标默认是index，值默认是item，用法和Java的增强for循环有点类似。

如果不想使用默认的下标和默认的值的名称，可以使用

" wx:for-index="下标" wx:for-item="值"

js页面的值

data: {
    datalist:["王城罗", "王鑫龙", "王佳琪", "孟凡", "李超平", "高凝"],
        userInfo: {
            name: "237",
                age: 3,
        }
}

wxml

    {{index}} -- {{item}}
    {{idx}} -- {{x}}



    {{userInfo.name}}
    {{userInfo.age}}



    {{index}} -- {{item}}

结果

API:wx.chooseImage

wxml

请上传图片

  

js

Page({

  
  data: {
    imageList: ["/static/hh.jpg", "/static/hh.jpg"],
  },

  uploadImage: function() {
    wx.chooseImage({
      count: 9, 
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'], 
      success: (res) => {
        console.log(res)
        this.setData({
          imageList: this.data.imageList.concat(res.tempFilePaths), 
        })
      },
    })
  },
})