wx小程序知识点(三)
三、封装小程序的数据请求
(1)在根目录创建utils目录,创建config.js、base.js
(2)在config.js中创建config类,并将请求路径配置给config的属性restUrl,并export
class Config {
constructor () {}
} Config.restUrl = 'http://***.cn/api/v1/' export { Config }
(3)在base.js中引入config,把url赋值给base的属性
import { Config } from 'config.js' class Base {
constructor() {
this.baseRequestUrl = Config.restUrl
}
}
在 class Base 中封装request方法,只接受一个param 参数
request(params) {
var url = this.baseRequestUrl + params.url
if (!params.type) {
params.type = 'GET'
}
wx.request({
url: url,
data: params.data,
header: {
'content-type':'application/json',
'token': wx.getStorageSync('token')
},
method: params.type,
success: function (res) {
params.sCallback && params.sCallback(res.data)
},
fail: function (err) { },
complete: function (res) { },
})
}
(4)在页面的 index.js 中,构建好params的结构后,直接调用Base.request(params),例如
var params = {
url: 'banner/' + id,
method: 'GET',
sCallback:
(res) => {
//数据绑定
this.setData({
'bannerArr': res[0].item
})
}
}
this.request(params)
wx小程序知识点(三)的更多相关文章
- wx小程序知识点(二)
二.WXML和HTML的异同.WXSS和CSS的异同 (1)WXML和HTML 相同点:都是用来描述页面结构的,由标签.属性组成 不同点:标签名不一样,小程序标签名更少: 小程序多了 wx:if 这样 ...
- wx小程序知识点(八)
八.小程序的优劣势 优势: ① 不需要下载 ② 打开速度快 ③ 开发成本低 ④ 安卓上可以添加在桌面,与原生 App 相似 ⑤ 小程序的发布审查流程比较严格,安全保障 劣势: ① 页面大小不能 ...
- wx小程序知识点(七)
七.小程序提速与性能优化 参考大佬vicyao的文章 https://blog.csdn.net/wetest_tencent/article/details/61196522 (1)提高页面加载速度 ...
- wx小程序知识点(六)
六.生命周期 (1)onLoad —— 加载时触发,只调用一次,可用来发送请求绑定数据.获取url中参数 (2)onShow —— 页面显示时触发,每次显示都会执行,用来获取需要频繁更新的数 ...
- wx小程序知识点(五)
五.双向绑定和 vue 的区别 ① vue 中实现双向绑定只需要修改 this.data var vm = new Vue({ el: '#example', data: { message: 'He ...
- wx小程序知识点(一)
一.微信小程序中的目录及文件 (1)project.config.json 用于开发者工具配置 主要用于设置项目是否开启https校验(setting.urlCheck) (2) App.js 设置全 ...
- wx小程序知识点(四)
四.页面间数据传递 和 参数传值 (1)页面间数据传递 ① 全局变量 ② 页面跳转或重定向时使用url携带参数(wx.navigateTo(urlStr)) ③ 使用组件模板 template < ...
- wx小程序获取用户位置信息
wx小程序内置的接口只能获取用户的坐标,通过微信位置服务获取用户地址: http://lbs.qq.com/qqmap_wx_jssdk/index.html 注:需要在key的设置中打开webSer ...
- 微信小程序把玩(三)tabBar底部导航
原文:微信小程序把玩(三)tabBar底部导航 tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项 ...
随机推荐
- [转帖]Linux查找文件6个高效工具
Linux查找文件6个高效工具 https://www.linuxrumen.com/rmxx/176.html 需要实操 -inname -type 等等. 1. 前言 我们使用Linux过程中,经 ...
- Clion 常用功能
1.创建新文件并加入项目 打开CMakeList.txt,加入这样的一段话,随后点击图中的Reload changes add_executable(项目名 文件名) 2.文件重命名,移动,复制,移除 ...
- BugkuCTF--never give up
这道题还挺有意思的... http://123.206.87.240:8006/test/hello.php 查看元素,有个1p.html,访问. 还没看到网页元素就跳转了...抓包! 抓到了一堆东西 ...
- 错误:编码GBK的不可映射字符解决办法
今天在cmd测试java代码的时候遇到了一个错误 解决办法: 输入javac -encoding utf-8 文件名.java 原因: 由于JDK是国际版的,我们在用javac编译时,编译程序首 ...
- Java 子类继承父类成员中的问题
之前搞错了,变量没有“重写”一说,只有方法才能被“重写”.如果我们在子类中声明了一个和父类中一样的变量,那么实际的情况是,子类的内存堆中会有类型和名字都相同的两个变量. 现在考虑一种情况,如下所示,我 ...
- Eclipse使用github并开启命令行
1. 安装EGit插件 2. 导入git项目 选择Import: 选择“Clone URI” 输入想要导入的git项目地址和用户名密码: 选择代码分支: 一路点击next完成导入github项目即可. ...
- Linux shellcode sample
Linux shellcode sample HelloWorld.nasm ;HelloWorld.asm ;Author: Kul Subedi global _start section .te ...
- 关于解决SpringDataJpa框架实体类表字段创建顺序与数据库表字段展示顺序不一致的问题
今天在公司的项目开发中,遇到一个问题: 后端对象实体类中写入字段顺序与数据库中的存储顺序不一致. 仔细观察到数据库中的表字段的排序方式是按照拼音字母的顺序abcdef......来存储的 而我的实体类 ...
- Vue的nextTick是什么?
公司做之前项目的时候,遇到了一些比较困惑的问题,后来研究明白了nextTick的用法. 我们先看两种情况: 第一种: export default { data () { return { msg: ...
- python 短信邮件
短信邮件 hashlib- md5:非对称加密,不可逆的,经常用于加密密码然后存储- 示例: ```python import hashlib # 创建hash对象,可以指定需要加密的字符串 ...