来一个微信小程序的代码例子
时间: 2024-05-02 09:23:31 浏览: 20
Sure! 这是一个简单的微信小程序代码例子:
app.js 文件:
```javascript
App({
globalData: {
userInfo: null
}
})
```
index.wxml 文件:
```html
<!-- 这是 index 页面的视图代码 -->
<view class="container">
<view class="userinfo">
<button bindtap="getUserInfo">获取用户信息</button>
<block wx:if="{{userInfo}}">
<image bindtap="previewImage" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
</view>
```
index.js 文件:
```javascript
// 获取应用实例
const app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
// 事件处理函数
getUserInfo: function(e) {
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.setData({
userInfo: res.userInfo
})
}
})
},
previewImage: function(e) {
const current = e.target.dataset.src
wx.previewImage({
current: current,
urls: [current]
})
}
})
```
这个例子演示了如何通过微信提供的开放接口获取用户信息,并在视图中显示用户的头像和昵称。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)