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


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 解析json的代码
Dec 16 Javascript
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
Mar 04 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
详解Python中logging日志模块在多进程环境下的使用
Dec 26 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
vue-cli3 配置开发与测试环境详解
May 17 Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 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
Protoss魔法科技
2020/03/14 星际争霸
php 归并排序 数组交集
2011/05/10 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
session 加入redis的实现代码
2016/07/15 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
javascript &&和||运算法的另类使用技巧
2009/11/28 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
jquery无法设置checkbox选中即没有变成选中状态
2014/03/27 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
JS继承用法实例分析
2015/02/05 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
JavaScript 五大常见函数
2018/03/23 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
numpy自动生成数组详解
2017/12/15 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
应聘护士自荐信
2013/10/21 职场文书
建筑工程专业学生的自我评价
2013/12/25 职场文书
核心价值观演讲稿
2014/05/13 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
《风娃娃》教学反思
2016/02/18 职场文书