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


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 fadeTo方法调整图片的透明度使用介绍
May 06 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
Vue 实现树形视图数据功能
May 07 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 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
FCKeditor的安装(PHP)
2007/01/13 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
js实现简单的验证码
2015/12/25 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
Python中的rfind()方法使用详解
2015/05/19 Python
python字符串常用方法
2018/06/14 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
django 自定义过滤器的实现
2019/02/26 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
Django更新models数据库结构步骤
2020/04/01 Python
python实现画图工具
2020/08/27 Python
会计专业大学生职业生涯规划书
2014/02/11 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技