微信小程序开发（二）

一、封装request.js请求文件

目的&＃xff1a;优化代码结构以及后期项目版本迭代和维护更加方便&＃xff0c;提升代码的执行速度。

假设在原生page中使用基本写法创建ajax请求&＃xff0c;则会出现以下问题&＃xff1a;

1、page界面业务操作代码混乱&＃xff0c;代码多层嵌套

2、多次书写重复代码造成代码冗余&＃xff0c;造成小程序主包太大&＃xff0c;导致原生小程序不能上线(最先版本主包要求大小为1.5M)

解决方式&＃xff1a;对内置api进行二次封装

新建封装结构&＃xff1a;

1、page界面业务代码

2、网络请求层network目录

3、在网络目录下封装项目的api接口文件

4、在utils工具类(公用业务)二次封装网络请求&＃xff08;wx.request&＃xff09;

二次封装网络文件 request.js

//request 二次封装文件
//定义基本路径
let baseUrl &＃61; "http://xawn.f3322.net:10004/"
//定义header
let header &＃61; {
"Content-Type": "application/json"
};
//封装缓存读取方法
function getStorage(key) {
return wx.getStorageSync(key);
}
/*
封装的请求request
*/
function Request(url, data, method) {
if (!method) {
method &＃61; "get";
}
//读取用户的令牌值 token
let token &＃61; getStorage(&＃39;_token&＃39;);
if (token) {
header[&＃39;token&＃39;] &＃61; token;
}
return new Promise((resolve, reject) &＃61;> {
//执行ajax请求
wx.request({
method: method,
url: &＃96;${baseUrl}${url}&＃96;,
data: data,
header: header,
success(res) {
//promise成功响应数据
resolve(res.data);
},
fail(err) {
reject(err);
}
})
})
}
module.exports &＃61; { Request }

二、wxml语法

1、wx:if  条件判断

2、wxml使用模板

使用时&＃xff1a;

模板中使用数据需要用data属性传递&＃xff0c;将模板所需的data传入  使用条件编译 结果数据返回的type类型

 3、wxml中template封装

WXML提供了两种文件引用方式import和include&＃xff0c;在需要使用template的Page界面中&＃xff0c;使用import组件引入外部定义的template模板