微信小程序页面交互综合练习（重点：解决“setData of undefined”报错问题）

news/2024/5/12 16:50:29/文章来源:https://blog.csdn.net/2301_76669854/article/details/137594600

一、写一个注册表单，点击“注册”按钮将用户输入的数据带到服务器，并且能在控制台显示参数。

（1）首先，我需要在vscode里面创建一个简易的node.js服务器

//第一步:引入http模块
var http =require('http');
//第二步:创建服务器
http.createServer(function(request,response){
//发送http头部
response.writeHead(200,{'Content-Type':'text/plain'});
//获取请求参数
console.log(request.url);
//发送响应数据
response.end(`[{ "name": "JavaScript高级程序设计", "author": "扎卡斯", "price": "¥78.20" },{ "name": "HTML5移动Web开发", "author": "黑马程序员", "price": "¥39.50" },{ "name": "MongoDB设计模式", "author": "科普兰", "price": "¥28.40" }]`);
}).listen(8888);//使用 listen 方法绑定 8888 端口
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

（2）然后，需要在微信小程序开发工具的index.wxml里写一个注册表单

<navigation-bar title="注册" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
<view>用户名：</view>
<input type="text" model:value="{{username}}"/>
<view>密码：</view>
<input type="text" model:value="{{password}}"/>
<view>性别：</view>
<radio-group style="display: flex;" bind:change="test1"><radio value="man"/>男<radio value="woman"/>女
</radio-group>
<view>爱好：</view>
<checkbox-group style="display: flex;" bind:change="test2"><checkbox value="sing"/>唱歌<checkbox value="dance"/>跳舞<checkbox value="ball"/>打篮球</checkbox-group><view><button bind:tap="regist">注册</button></view>
</scroll-view>

页面如下：

（3）最后在index.js里面给绑定的函数写上执行代码：

Page({data: { //初始数据username:"",password:""},test1:function(e){ //性别this.setData({sex:e.detail.value})},test2:function(e){ //爱好console.log((e.detail.value).join(","));this.setData({hobby:e.detail.value})},regist:function(){ //点击注册wx.request({url: 'http://127.0.0.1:8888',method:"GET",data:this.data})}
})

（4）代码运行结果：

我在vscode中运行创建服务器代码

当我填好表单数据点击提交

vscode终端如图显示：

二、将服务器里的数据渲染在我的wxml页面。注意数据显示前需要有“加载中”提示和“加载完毕”提示

（1）和题一一样先运行我的vscode创建服务器代码，运行此代码

//第一步:引入http模块
var http =require('http');
//第二步:创建服务器
http.createServer(function(request,response){
//发送http头部
response.writeHead(200,{'Content-Type':'text/plain'});
//获取请求参数
console.log(request.url);
//发送响应数据
response.end(`[{ "name": "JavaScript高级程序设计", "author": "扎卡斯", "price": "¥78.20" },{ "name": "HTML5移动Web开发", "author": "黑马程序员", "price": "¥39.50" },{ "name": "MongoDB设计模式", "author": "科普兰", "price": "¥28.40" }]`);
}).listen(8888);//使用 listen 方法绑定 8888 端口
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

（2）在微信小程序开发工具index.wxml搭建好静态页面

<navigation-bar title="书店商城" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
<view wx:for="{{result}}" class="styles">
{{item.name}}
{{item.author}}
{{item.price}}
</view>
</scroll-view>

（3）最后在index.js里面给绑定的函数写上执行代码：

如果在普通函数里依旧使用this.setData一定会出现“setData of undefined”的报错，我们可以通过两种方法来解决：
1.使用箭头函数 =>，箭头函数的this就是指向当前页面了
2.使用var that=this普通函数。定义一个变量that将当前页面对象保存下来，把所有的this改为that，就可以使用当前页面对象来操作
3.特别注意二者区别：在箭头函数中，this 的值是在函数定义时确定的，而不是在调用时确定的。而在普通函数中，this 的值是在函数被调用时确定的,所以得写在onLoad里面。

Page({data: {result: [],},onLoad: function () {//onLoad生命周期函数。监听页面加载，且一个页面只会在创建完成后触发一次。就相当于出生var that = this;wx.showLoading({title: '正在加载...',});wx.request({url: 'http://127.0.0.1:8888/',method: "GET",//   注意：解决setData is undefined报错问题，我们可以使用两种方法来解决。// 1.使用箭头函数 =>，箭头函数的this就是指向当前页面了//  2.使用var that=this普通函数。定义一个变量that将当前页面对象保存下来，把所有的this改为that，就可以使用当前页面对象来操作// *二者区别注意：在箭头函数中，this 的值是在函数定义时确定的，而不是在调用时确定的。而在普通函数中，this 的值是在函数被调用时确定的,所以得写在onLoad里面。// 一、箭头函数实现：//   success:res=>{//     wx.hideLoading();//     wx.showToast({//       title: '加载完毕',//       icon: "success",//       duration:2000//     });//     this.setData({//         result:res.data,//     })//   }// 二、var that=this普通函数实现success: function (res) {wx.hideLoading();wx.showToast({title: '加载完毕',icon: "success",duration: 2000});that.setData({result: res.data})}})}
})