day02 微信小程序
今日概要
指令、api、页面
1.跳转
1>对标签绑定点击事件
<view bindtap="clickMe" data-id="2020110157" data-name="任维民">点我跳转</view>
/* 点击绑定的事件 */ clickMe: function(e){ console.log("点我了"); var id = e.currentTarget.dataset.id; var name = e.currentTarget.dataset.name; console.log("id = ",id); console.log("name = ",name); }
2>页面跳转
//跳转 wx.navigateTo({ url: "/pages/redirect/redirect?id="+id, })
跳转到的页面如果想要接收参数id,可以在onload方法中接收
/** *生命周期函数--监听页面加载 */ onLoad: function (options) { console.log(options) },
2.绑定
1>之前版本的数据绑定
<html> ... <div id="content"></div> <script> var name = "王权富贵"; $("#content").val(name); </script> </html>
2>微信小程序的数据绑定<html>
Vue.js
... <div id="content">{{name}}</div> <script> new Vue({
el:"#app",
data:{
name:"王权富贵"
}
})</script> </html>
3>基本显示
- wxml
<view>数据1:{{message1}}</view>
- 展示数据
/** * 页面的初始数据 */ data: { message1:"王权富贵", },
4>数据更新
- wxml
<view>数据2:{{message2}}</view> <button bindtap="changeData">点击修改数据</button>
- 修改数据
/*页面的初始数据*/ data: { message2:"东方月初", }, /*按钮button,修改数据*/ changeData:function(){//修改message1与message2的值(正确,前后端同时修改数据) this.setData({message2:"白月初"}); },
3.获取用户信息
方式一:
- wxml
<view>当前用户名:{{name}}</view> <view>当前用户头像: <image src="{{path}}" style="height:200rpx;width:200rpx;"></image> </view> <button bindtap="getUserName">获取当前用户名</button>
- 获取用户信息,获取并修改头像
/*页面的初始数据*/ data: { path:"/image/portrait.png" }, /*块view,获取用户名*/ getUserName:function(){ var that = this; console.log("正在获取中..."); wx.getUserInfo({ success:function(res){ //调用成功后触发 console.log("Success",res); that.setData({name:res.userInfo.nickName}); that.setData({path:res.userInfo.avatarUrl}); }, fail:function(res){ //调用失败后触发 console.log("Fail",res); } }) }
方式二
- wxml
<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
- js
//授权登录button,允许微信小程序获取用户信息 bindGetUserInfo:function(){ var that = this; console.log("正在授权登录中..."); wx.getUserInfo({ success:function(res){ //调用成功后触发 console.log("Success",res); that.setData({name:res.userInfo.nickName}); that.setData({path:res.userInfo.avatarUrl}); }, fail:function(res){ //调用失败后触发 console.log("Fail",res); } }) }
注意事项:
1>想要获取用户信息,必须经过用户授权(button)
2>已授权
3>不授权
想要再次通过调用 wx.opensettings 手动允许授权