微信小程序入门

创建一个入门程序

这是index.vxml代码

<!--index.wxml-->
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<view class="container" >
  <view>
    {{msg}}
  </view>
  <view>
  <button bindtap="getUserInfo" type="primary">获取用户信息</button>
  昵称：{{nickName}}
  <image style="width: 100px; height: 100px;" src="{{url}}" mode=""/>
  </view>
  <view>
    <button bind:tap="wxLogin" type="warn">微信登录</button>
    授权码：{{code}}
  </view>

  <view>
    <button bind:tap="sendRequest" type="default">发送请求</button>
  </view>

</view>

这是index.js

// index.js
Page({
    data:{
      msg:'hello word',
      nickName:'',
      url:'',
      code:''
    },
    //获取微信用户的头像和昵称
    getUserInfo(){
      wx.getUserProfile({
        desc: '获取用户信息',
        success:(res) =>{
          console.log(res.userInfo)
          //为数据赋值
          this.setData({
            nickName:res.userInfo.nickName,
            url:res.userInfo.avatarUrl
          })
        }
      })

    },

    //微信登录，获取微信登录的授权码
    wxLogin(){
      wx.login({
        success: (res) => {
          console.log(res.code)
          this.setData({
            code:res.code
          })
          
        },
      })

    },

    //发送请求
    sendRequest(){
      wx.request({
        url: 'http://localhost:8080/user/shop/status',
        method:'GET',
        success:(res)=>{
          console.log(res.data)
        }
      })

    }
})

这段代码是一个微信小程序页面的逻辑部分，使用了微信小程序的API来实现用户信息的获取、微信登录授权以及发送网络请求的功能。下面是对每个函数和关键点的详细解释：

1. Page 函数

Page 是微信小程序中定义页面的核心函数，它接收一个对象作为参数，这个对象包含了页面的初始数据、生命周期函数、事件处理函数等。

2. data 对象

在 Page 函数的参数对象中，data 属性用于存储页面的初始数据。在这个例子中，data 包含了四个字段：msg（显示信息，但拼写错误应为 hello world）、nickName（用于存储用户的昵称）、url（用于存储用户的头像URL）、code（用于存储微信登录的授权码）。

3. getUserInfo 函数

这个函数用于获取微信用户的头像和昵称。它调用了微信小程序的 wx.getUserProfile API，该API需要用户授权后才能获取到用户信息。在成功回调中，通过 console.log(res.userInfo) 打印了用户信息，并使用 this.setData 方法更新了页面数据中的 nickName 和 url 字段。

4. wxLogin 函数

这个函数用于实现微信登录，获取微信登录的授权码。它调用了 wx.login API，该API会返回一个登录凭证（code）。这个 code 是后续发起请求时用于换取 session_key 或 openid 等敏感信息的关键。在成功回调中，通过 console.log(res.code) 打印了授权码，并使用 this.setData 方法更新了页面数据中的 code 字段。

5. sendRequest 函数

这个函数用于发送网络请求。它调用了 wx.request API，向指定的URL（在这个例子中是 'http://localhost:8080/user/shop/status'）发送GET请求。这个URL应该是你的后端服务地址，用于处理一些业务逻辑。在成功回调中，通过 console.log(res.data) 打印了服务器返回的数据。

注意事项

• msg 字段的拼写错误（hello word 应为 hello world）可能会影响页面上的显示。
• wx.getUserProfile API 需要用户主动触发才能调用，通常放在按钮的点击事件处理函数中。
• 发送网络请求时，确保后端服务已正确部署并可访问，且URL、请求方法（GET/POST等）及请求参数等符合后端要求。
• 微信小程序的网络安全和隐私政策要求严格，确保在获取用户信息时遵循相关法规和用户授权。
• 本地测试时（如使用 'http://localhost:8080' 作为请求URL），需要确保微信开发者工具已配置允许访问本地服务器。在生产环境中，应使用HTTPS协议以确保数据传输的安全性。