创建一个入门程序
这是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协议以确保数据传输的安全性。