微信小程序入门

创建一个入门程序

这是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协议以确保数据传输的安全性。