微信小程序学习笔记（day02）

day02

内容回顾

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

1.跳转

1.1对标签的绑定事件

 <view bindtap="clickMe" data-nid="123" data-name="sd">点我跳转</view>

clickMe:function(e){
      var nid=e.currentTarget.dataset.nid;
      wx.navigateTo({
        url:'/pages/redirect/redirect?id='+nid
      })
  }
})

1.2页面跳转

可以使用wx.navigateTo进行页面跳转

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

如果有参数，则利用Page下面的onLoad进行接收

Page:({
  onLoad: function (options) {
        console.log(options)
    },
    })

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

1.3 标签跳转

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

2.数据绑定

2.1 基本绑定

• wxml

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

• 展示数据

Pages({
	data:{
		message:'哈哈哈',
		name:'',
		path:'imageUrl'
	}
})

2.2数据更新

• wxml

<view>数据：{{message}}</view>
<button bindtap="changeData">点击修改数据</button>

• 修改数据

Pages({
	 data: {
        message:"hh",
    },
    changeData:function(){
    	// 利用setData进行修改数据
        this.setData({
            message:"daad"
        })
    },
})

3.获取用户信息

方式一

微信官方不推荐

<button bindtap="getUserName">获取当前用户名</button>

 getUserName:function(){
        //调用微信接口获取信息
    wx.getUserInfo({
         success:function(res){
             console.log(res)
         },
         fail:function(res){
             console.log(res)
         },
         
        })
    },

方式二

• wxml

<button open-type="getUserInfo" bindgetuserinfo="fetchInfo">获取用户信息</button>

• js

fetchInfo:function(){
     wx.getUserInfo({
	    success:function(res){
	         console.log(res)
	     },
	     fail:function(res){
	         console.log(res)
	     },
     })
 },

注意事项：

• 要想获取信息，必须经过用户授权（button）。
• 已授权
• 不授权，通过调用wx.opensettings手动打开授权

 //打开配置，手动授权
 wx.openSettings({})

4.获取用户的位置

• wxml

 <view bindtap="getLocalPath">请选择位置:{{localPath}}</view>

• js

Page({
    data: {
        localPath:'',
    },
getLocalPath:function(){
        var that=this
        wx.chooseLocation({
          success:function(res){
            that.setData({localPath:res.address})
          }
        })
    },
})

5.for指令

• wxml

<text>商品列表</text>
<view>
    <view wx:for="{{dataList}}">{{index}}---{{item}}</view>
</view>
<view wx:for="{{userinfo}}">{{index}}--{{item}}</view>

• js

Page({
    data: {
        dataList:['1','2','3'],
        userinfo:{
            name:'12',
            age:1
        }
    },
})

6.获取图片

• wxml

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

• js

data: {
        imageList:['/static/邮件.png','/static/邮件.png',]
    },
    uploadImage:function(){
        var that=this
        wx.chooseImage({
            count:9,
            sizeType:['original','compressed'],
            sourceType:['album','camera'],
            success:function(res){
                console.log(res)
                that.setData({imageList:that.data.imageList.concat(res.tempFilePaths)})
            },
            fail:function(res){

            },
            complete:function(res){

            }
        });
    },

注意事项：图面目前只是上传到了内存

总结

• 标签（组件）

text、view、image、navigator（跳转到其他页面，只能跳转到非tabbar页面）、button（建议获取用户信息时）

• 事件
• bindtap

  <view bindtap='func' data-xx='123'></view>

  func:function(e){
  		e.currentTarget.dataset
  }

• API

 -wx.navigateTo({
 	url:
 })

 wx.openSetting({})

• getUserInfo
• chooseLocation
• chooseImage
• 数据绑定
• for指令