简易版 微信小程序开发之页面跳转、数据绑定、获取用户信息、获取用户位置信息_微信小程序个人主页如何绑定

目录

一、全局配置app.json

二、数据绑定

2.1 编写home页面 

2.2 编写list页面

2.3 展示效果：

三、获取用户信息

3.1 方式一 

编写list页面

展示效果：

3.2 方式二

编写list页面

展示效果： 

四、获取用户位置信息

编写list页面

展示效果：

---

一、全局配置app.json

{
  "pages":[
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact",
    "pages/list/list"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "本地生活",
    "navigationBarTextStyle":"white",
    "backgroundColor": "#efefef",
    "onReachBottomDistance": 50
  },
  "tabBar": {
    "selectedColor": "#C00000",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "/images/tabs/message.png",
        "selectedIconPath": "/images/tabs/message-active.png"
      },
      {
        "pagePath": "pages/contact/contact",
        "text": "联系我们",
        "iconPath": "/images/tabs/contact.png",
        "selectedIconPath": "/images/tabs/contact-active.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

二、数据绑定

2.1 编写home页面 

（1）home.wxml

<!--pages/home/home.wxml-->
<view class="menu">
  <view class="item">
    <image src="/static/link-01.png"></image>
    <text>精品</text>
  </view>
  <view class="item">
    <image src="/static/link-01.png"></image>
    <text>精品</text>
  </view>
  <view class="item">
    <image src="/static/link-01.png"></image>
    <text>精品</text>
  </view>
  <view class="item">
    <image src="/static/link-01.png"></image>
    <text>精品</text>
  </view>
</view>
 
<navigator url="/pages/list/list?id=566">跳转页面</navigator>

（2）home.wxss 

/* pages/home/home.wxss */
image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
}
 
.menu {
  display: flex;
  /* 在水平方向排列 ，规定主轴方向*/
  flex-direction: row;
  /* 元素在水平方方向如何展示，规定在主轴方向如何展示：center */
  justify-content: space-around;
}
 
.menu .item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

2.2 编写list页面

（1）list.wxml

<!--pages/list/list.wxml-->
<!--轮播图结构-->
<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="black" autoplay interval="3000" circular>
  <swiper-item><view class="item">A</view></swiper-item>
  <swiper-item><view class="item">B</view></swiper-item>
  <swiper-item><view class="item">C</view></swiper-item>
</swiper>
 
<!--滚动视图结构-->
<scroll-view class="container1" scroll-y>
    <view>A</view>
    <view>B</view>
    <view>C</view>
</scroll-view>
 
 
<!-- 数据绑定 -->
<view>数据：{{ message }}</view>
<button bindtap="checkData">点击修改数据</button>

（2）list.js

// pages/list/list.js
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    message: "Sd"
  },
  checkData() {
    // 修改数据
    this.setData({message: "ssdss"})
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
 
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    console.log(this.options)
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
 
  }
})

（3）list.json没变

2.3 展示效果：

（1）home页面的展示效果为：

（2）点击home页面中的“跳转页面” ，就可以跳转到list页面，list页面的展示效果为：

 （3）点击list页面中的“点击修改数据”按钮 ，就可以将页面上的“数据：Sd”修改为“数据：ssdss”，

 OK，数据绑定这个功能就简单介绍到这里。

三、获取用户信息

注意：要想获取用户信息，必须经过用户授权（button）

• 已授权
• 未授权，通过调用wx.opensetting({}) 

3.1 方式一 

编写list页面

（1）list.wxml

<!--pages/list/list.wxml-->
 
<view>当前用户名：{{ name }}</view>
<ciew>头像：<image src="{{ path }}" style="height: 200rpx;width: 200rpx;"></image></ciew>
<button bindtap="getUserInfo">获取用户名</button>

（2）list.js

// pages/list/list.js
 
  getUserInfo() {
    // 打开配置，进行收到授权
    wx.openSetting({})
 
    var that = this
    // 获取用户名
    wx.getUserInfo({
      success: function(res) {
        console.log(res)
        that.setData({
          name: res.userInfo.nickName,
          path: res.userInfo.avatarUrl})
      },
      fail:function(res) {
        
      }
    })
  },

展示效果：

（1）点击home页面中的“跳转页面” ，就可以跳转到list页面，list页面的展示效果为：

（2）点击“获取用户名”按钮，则展示如下，

3.2 方式二

编写list页面

（1）list.wxml

<!--pages/list/list.wxml-->
 
<view>当前用户名：{{ name }}</view>
<ciew>头像：<image src="{{ path }}" style="height: 200rpx;width: 200rpx;"></image></ciew>
<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">获取信息</button>

（2）list.js

注意：代码里的“var that = this”是因为直接在 wx.getUserInfo函数中调用this是获取不到setData的，因此必须在此 wx.getUserInfo函数的外部导入this，才可以。

// pages/list/list.js
 
 bindGetUserInfo() {
    // 打开配置，进行收到授权
    wx.openSetting({})
 
    var that = this
    // 获取用户名
    wx.getUserInfo({
      success: function(res) {
        console.log(res)
        that.setData({
          name: res.userInfo.nickName,
          path: res.userInfo.avatarUrl})
      },
      fail:function(res) {
        
      }
    })
  },

展示效果： 

（1）点击home页面中的“跳转页面” ，就可以跳转到list页面，list页面的展示效果为：

 （2）点击“获取用户名”按钮，则展示如下， （3）可以看出来，与方式一的展示效果一样。

四、获取用户位置信息

编写list页面

（1）pages/list/list.wxml

<!--pages/list/list.wxml-->
 
<view bindtap="getLocalPath">{{ localPath }}</view>

（2）pages/list/list.js

// pages/list/list.js
 
getLocalPath() {
      var that = this
      // 获取用户位置信息
      wx.chooseLocation({
        success: function(res) {
          console.log(res)
          that.setData({localPath:res.address})
        }
      })
  },

展示效果：

（1）点击home页面中的“跳转页面” ，就可以跳转到list页面，list页面的展示效果为：

（2）点击“请选择位置”，则展示如下，