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


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 相关文章推荐
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
超级酷和最实用的jQuery实例收集(20个)
Apr 21 Javascript
$.format,jquery.format 使用说明
Jul 13 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
js实现坦克移动小游戏
Oct 28 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 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学习笔记之 函数声明(二)
2011/06/09 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
Python列表与元组的异同详解
2019/07/02 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
python调用私有属性的方法总结
2020/07/24 Python
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
酒店总经理助理职责
2014/02/12 职场文书
初级会计求职信范文
2014/02/15 职场文书
信用卡工资证明范本
2015/06/19 职场文书
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP