微信小程序入门

创建一个入门程序

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