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


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 相关文章推荐
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
js中文逗号转英文实现
Feb 11 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
vue中实现动态生成二维码的方法
Feb 21 Javascript
基于vuex实现购物车功能
Jan 10 Vue.js
Javascript中async与await的捕捉错误详解
Mar 03 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面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
javascript window对象属性整理
2009/10/24 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
教你学会使用Python正则表达式
2017/09/07 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
库房主管岗位职责
2013/12/31 职场文书
警察思想汇报
2014/01/04 职场文书
法制宣传月活动总结
2014/04/29 职场文书
民族学专业求职信
2014/07/28 职场文书
家长评语怎么写
2014/12/30 职场文书
药店收银员岗位职责
2015/04/07 职场文书
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL