微信小程序的开发及问题解决

HttpClient

测试例子

@SpringBootTest
public class HttpClientTest {/*** 测试通过httpclient发送get方式的请求*/@Testpublic void testGET() throws IOException {//创建httpclient对象CloseableHttpClient httpClient= HttpClients.createDefault();//创建请求对象HttpGet httpGet=new HttpGet("http://localhost:8080/user/shop/status");//发送请求，接受响应结果CloseableHttpResponse response=httpClient.execute(httpGet);//获取服务端返回的状态码int statusCode=response.getStatusLine().getStatusCode();System.out.println("服务端返回的状态码为："+statusCode);HttpEntity entity=response.getEntity();String body= EntityUtils.toString(entity);System.out.println("服务端返回的数据为："+body);//关闭资源response.close();httpClient.close();}/*** 测试通过httpclient发送post方式的请求*/@Testpublic void testPOST() throws JSONException, IOException {//创建httpclient对象CloseableHttpClient httpClient=HttpClients.createDefault();//创建请求对象HttpPost httpPost = new HttpPost("http://localhost:8080/admin/employee/login");JSONObject jsonObject=new JSONObject();jsonObject.put("username","admin");jsonObject.put("password","123456");StringEntity entity=new StringEntity(jsonObject.toString());//指定请求编码方式entity.setContentEncoding("utf-8");//数据格式entity.setContentType("application/json");httpPost.setEntity(entity);//发送请求CloseableHttpResponse response=httpClient.execute(httpPost);//解析返回结果int statusCode = response.getStatusLine().getStatusCode();System.out.println("响应码为："+statusCode);HttpEntity entity1=response.getEntity();String body = EntityUtils.toString(entity1);System.out.println("响应数据为："+body);//关闭资源response.close();httpClient.close();}
}

微信小程序开发

直接申请使用测试号，记住这两项

下载微信开发者工具下载 / 稳定版更新日志

下载后打开微信开发者工具创建小程序

入门案例

实例代码

index.js

// index.js
Page({data: {msg: "hello world",nickName: '',code:'',result:'',},//获取微信用户的头像和昵称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)this.setData({result:res.data})}})}
});

index.wxml

<!-- index.wxml -->
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list"><view class="container"><!-- <view>{{msg}}</view> --><view><button bindtap="getUserInfo" type="primary">获取用户信息</button>昵称:{{nickName}}<image style="width:100px;height:100px;" src="{{url}}" /></view><view><button bind:tap="wxLogin" type="warn">微信登录</button>授权码：{{code}}</view><view><button bindtap="sendRequest" type="primary">发送请求</button>返回数据：{{result}}</view></view>
</scroll-view>

使用微信开发者工具可能遇到的问题

1、页面空白不显示

将微信开发者工具升级到最新版

2、微信开发者工具（微信小程序开发工具）写代码的时候没有组件提示补全也没有代码缩进（安装插件）

1、打开vscode安装插件

这个要安装2.2.2版本，2.3版本以上无法使用

2、然后打开微信开发者工具的拓展

点击

导入已安装的vscode拓展

wxml格式化功能：F1 或者 CMD + Shift + P 输入 format wxml 命令或者右键菜单，也可以配置 wxmlConfig.onSaveFormat 开启保存后自动格式化（每次保存代码后会自动格式化）

3、微信开发者工具获取微信用户昵称与头像没有弹窗

//获取微信用户的头像和昵称getUserInfo() {wx.getUserProfile({desc: "获取用户信息",success: (res) => {console.log(res.userInfo);//为数据赋值this.setData({nickName: res.userInfo.nickName,url: res.userInfo.avatarUrl,});},});

把调试基础库改为2.27.0以下的版本

4、微信开发者工具向后端请求后回复 http://localhost:8080 不在以下 request 合法域名列表中

	sendRequest(){wx.request({url: 'http://localhost:8080/user/shop/status',method:'GET',success:(res)=>{console.log(res.data)this.setData({result:res.data})}})}

解决