微信小程序入门
创建一个入门程序
这是index.vxml代码
{false}}" color="black" background="#FFF"> {{msg}} 昵称：{{nickName}} {url}}" mode=""/> 授权码：{{code}}
这是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.getUserProfileAPI 需要用户主动触发才能调用，通常放在按钮的点击事件处理函数中。- 发送网络请求时，确保后端服务已正确部署并可访问，且URL、请求方法（GET/POST等）及请求参数等符合后端要求。
- 微信小程序的网络安全和隐私政策要求严格，确保在获取用户信息时遵循相关法规和用户授权。
- 本地测试时（如使用
'http://localhost:8080'作为请求URL），需要确保微信开发者工具已配置允许访问本地服务器。在生产环境中，应使用HTTPS协议以确保数据传输的安全性。