微信小程序 数据访问实例详解


Posted in Javascript onOctober 08, 2016

先简单说一下,小程序的结构

微信小程序 数据访问实例详解

如图所示

1、每个视图(.wxml)只需要添加对应名字的脚本(.js)和样式(.wxss)就可以了,不需要引用,page下面的脚本以及样式都是继承至最外面的app.js , app.wxcss

2、脚本也就是.js文件,他有固定格式:page,是用于获取数据的

3、utils是用来放置数据接口的

数据访问,如果懂点ajax,都不是问题,没啥好讲的

微信小程序,因为IDE太烂了,如果代码再写得难以阅读,整个项目就很难维护了。

因为没有写过app,不知道在app中数据访问是怎么封装的

作为一个有3天工作经验的小程序码农,觉得如果每个页面的数据都是自己去访问数据接口,那就太不OOP了

然后想到了linq to sql,只取了其中的两个方法,原本打算用singelordefault,firstordefault的,想想也麻烦,就用了getbyparams,getbyid,根据条件查找出所有数据,或者根据id获取一条数据

直接看方法吧,有点??铝?/p>

const API_URL = 'http://localhost:4424/api/'

function getApi(url,params){
 return new Promise((res,rej)=>{
  wx.request({
   url:API_URL+'/'+url,
   data:Object.assign({},params),
   header:{'Content-Type': 'application/json'},
   success:res,
   fail:rej
  })
 })
}

module.exports = {
 GetByParams(url,page=1,pageSize=20,search = ''){
  const params = { start: (page - 1) * pageSize, pageSize: pageSize }
  return getApi(url, search ? Object.assign(params, { q: search }) : params)
   .then(res => res.data)
 },
 GetById(url,id){
  return getApi(url, id)
   .then(res => res.data)
 }
}

module.exports = {}是固定写法,里面写一个一个的方法,每个方法用,隔开。

我设置了一个url参数,因为不可能把所有的接口都放在一个conntroller里面,所以url的格式是“conntroller/action”

看一个调用的栗子吧,就明白怎么用了

const req = require('../../utils/util.js')

Page({
 data: {
  imgUrls: [],
  indicatorDots: true,
  autoplay: true,
  interval: 2000,
  duration: 2000
 },
 onLoad(){
  req.GetByParams('home/homebanner')//看这里  看这里  看这里
  .then(d=>this.setData({imgUrls:d,loading:false}))
  .catch(e=>{
   this.setData({imgUrls:[],loading:false})
  })
 }
})

这是index的获取banner图的方法,req.GetByParams('home/homebanner'),这里也可以带参数,也可以空着

最终的页面是这样的

微信小程序 数据访问实例详解

在右边的红色框里面,我们可以看到请求返回的数据,也可以在右边修改数据,界面会跟随着变化,这是关于调试的事情了,容后再议

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Javascript 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
验证javascript中Object和Function的关系的三段简单代码
Jun 27 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 Javascript
浅谈JS的原型和原型链
Jun 04 Javascript
Bootstrap Table的使用总结
Oct 08 #Javascript
js HTML5手机刮刮乐代码
Sep 29 #Javascript
原生js的RSA和AES加密解密算法
Oct 08 #Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 #Javascript
微信小程序 实战小程序实例
Oct 08 #Javascript
node.js实现博客小爬虫的实例代码
Oct 08 #Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 #Javascript
You might like
PHP新手上路(八)
2006/10/09 PHP
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
PHP的mysqli_thread_id()函数讲解
2019/01/24 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
js 格式化时间日期函数小结
2010/03/20 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
python类共享变量操作
2020/09/03 Python
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
美国知名生活购物网站:Goop
2017/11/03 全球购物
青蓝工程实施方案
2014/03/27 职场文书
个人承诺书格式
2014/06/03 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
Python turtle实现贪吃蛇游戏
2021/06/18 Python