当前位置：网站首页>Simple wechat applet development page Jump, data binding, obtaining user information, obtaining user location information

{
  "pages":[
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact",
    "pages/list/list"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": " Local life ",
    "navigationBarTextStyle":"white",
    "backgroundColor": "#efefef",
    "onReachBottomDistance": 50
  },
  "tabBar": {
    "selectedColor": "#C00000",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": " home page ",
        "iconPath": "/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": " news ",
        "iconPath": "/images/tabs/message.png",
        "selectedIconPath": "/images/tabs/message-active.png"
      },
      {
        "pagePath": "pages/contact/contact",
        "text": " Contact us ",
        "iconPath": "/images/tabs/contact.png",
        "selectedIconPath": "/images/tabs/contact-active.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

Two 、 Data binding

2.1 To write home page

（1）home.wxml

<!--pages/home/home.wxml-->
<view class="menu">
  <view class="item">
    <image src="/static/link-01.png"></image>
    <text> The high-quality goods </text>
  </view>
  <view class="item">
    <image src="/static/link-01.png"></image>
    <text> The high-quality goods </text>
  </view>
  <view class="item">
    <image src="/static/link-01.png"></image>
    <text> The high-quality goods </text>
  </view>
  <view class="item">
    <image src="/static/link-01.png"></image>
    <text> The high-quality goods </text>
  </view>
</view>

<navigator url="/pages/list/list?id=566"> Jump to the page </navigator>

（2）home.wxss

/* pages/home/home.wxss */
image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
}

.menu {
  display: flex;
  /*  Arrange horizontally  , Specify the spindle direction */
  flex-direction: row;
  /*  How elements are displayed horizontally , Specify how to display in the spindle direction ：center */
  justify-content: space-around;
}

.menu .item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

2.2 To write list page

（1）list.wxml

<!--pages/list/list.wxml-->
<!-- Rotation chart structure -->
<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 structure -->
<scroll-view class="container1" scroll-y>
    <view>A</view>
    <view>B</view>
    <view>C</view>
</scroll-view>


<!--  Data binding  -->
<view> data ：{
   { message }}</view>
<button bindtap="checkData"> Click modify data </button>

（2）list.js

// pages/list/list.js
Page({

  /**
   *  Initial data of the page 
   */
  data: {
    message: "Sd"
  },
  checkData() {
    //  Modifying data 
    this.setData({message: "ssdss"})
  },

  /**
   *  Life cycle function -- Monitor page loading 
   */
  onLoad(options) {

  },

  /**
   *  Life cycle function -- Listening page first rendering completed 
   */
  onReady() {
    console.log(this.options)
  },

  /**
   *  Life cycle function -- Monitor page display 
   */
  onShow() {

  },

  /**
   *  Life cycle function -- Monitor page hidden 
   */
  onHide() {

  },

  /**
   *  Life cycle function -- Monitor page uninstall 
   */
  onUnload() {

  },

  /**
   *  Page related event handler -- Monitor user pull-down action 
   */
  onPullDownRefresh() {

  },

  /**
   *  Handling function of page pull bottom event 
   */
  onReachBottom() {

  },

  /**
   *  Users click the upper right corner to share 
   */
  onShareAppMessage() {

  }
})

（3）list.json It hasn't changed

2.3 Show the effect ：

（1）home The display effect of the page is ：

（2） Click on home On the page “ Jump to the page ” , You can jump to list page ,list The display effect of the page is ：

（3） Click on list On the page “ Click modify data ” Button , You can put “ data ：Sd” It is amended as follows “ data ：ssdss”,

OK, The function of data binding is briefly introduced here .

3、 ... and 、 Get user information

Be careful ： To get user information , Must be authorized by the user （button）
Authorized
unauthorized , By calling wx.opensetting({})

3.1 Mode one

To write list page

（1）list.wxml

<!--pages/list/list.wxml-->

<view> Current user name ：{
   { name }}</view>
<ciew> Head portrait ：<image src="{
   { path }}" style="height: 200rpx;width: 200rpx;"></image></ciew>
<button bindtap="getUserInfo"> Get username </button>

（2）list.js

// pages/list/list.js

  getUserInfo() {
    //  Open configuration , Proceed to receive authorization 
    wx.openSetting({})

    var that = this
    //  Get username 
    wx.getUserInfo({
      success: function(res) {
        console.log(res)
        that.setData({
          name: res.userInfo.nickName,
          path: res.userInfo.avatarUrl})
      },
      fail:function(res) {
        
      }
    })
  },

Show the effect ：

（1） Click on home On the page “ Jump to the page ” , You can jump to list page ,list The display effect of the page is ：

（2） Click on “ Get username ” Button , Then it is shown as follows ,

3.2 Mode two

To write list page

（1）list.wxml

<!--pages/list/list.wxml-->

<view> Current user name ：{
   { name }}</view>
<ciew> Head portrait ：<image src="{
   { path }}" style="height: 200rpx;width: 200rpx;"></image></ciew>
<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo"> pick up information </button>

（2）list.js

Be careful ： In code “var that = this” Because it's directly in wx.getUserInfo Call in function this You can't get setData Of , So it must be here wx.getUserInfo External import of function this, Can only be .

// pages/list/list.js

 bindGetUserInfo() {
    //  Open configuration , Proceed to receive authorization 
    wx.openSetting({})

    var that = this
    //  Get username 
    wx.getUserInfo({
      success: function(res) {
        console.log(res)
        that.setData({
          name: res.userInfo.nickName,
          path: res.userInfo.avatarUrl})
      },
      fail:function(res) {
        
      }
    })
  },

Show the effect ：

（1） Click on home On the page “ Jump to the page ” , You can jump to list page ,list The display effect of the page is ：

（2） Click on “ Get username ” Button , Then it is shown as follows , （3） You can see it , The display effect is the same as that of mode 1 .

Four 、 Get user location information

To write list page

（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
      //  Get user location information 
      wx.chooseLocation({
        success: function(res) {
          console.log(res)
          that.setData({localPath:res.address})
        }
      })
  },