请选择 进入手机版 | 继续访问电脑版

微信小程序教程网

新浪微博达人勋

1206

积分

274

金钱

0

广播

Rank: 6Rank: 6

积分
1206

活跃会员热心会员推广达人社区QQ达人最佳新人

发表于 2019-5-8 15:42:45 | 显示全部楼层 |阅读模式
分享到:
先简单说一下,[color=rgb(54, 54, 54) !important]小程序的结构
如图所示
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获取一条数据
直接看方法吧,有点啰嗦了
  1. const API_URL = 'http://localhost:4424/api/'
  2. function getApi(url,params){
  3.   return new Promise((res,rej)=>{
  4.     wx.request({
  5.       url:API_URL+'/'+url,
  6.       data:Object.assign({},params),
  7.       header:{'Content-Type': 'application/json'},
  8.       success:res,
  9.       fail:rej
  10.     })
  11.   })
  12. }
  13. module.exports = {
  14.   GetByParams(url,page=1,pageSize=20,search = ''){
  15.     const params = { start: (page - 1) * pageSize, pageSize: pageSize }
  16.     return getApi(url, search ? Object.assign(params, { q: search }) : params)
  17.       .then(res => res.data)
  18.   },
  19.   GetById(url,id){
  20.     return getApi(url, id)
  21.       .then(res => res.data)
  22.   }
  23. }
复制代码
module.exports = {}是固定写法,里面写一个一个的方法,每个方法用,隔开。
我设置了一个url参数,因为不可能把所有的接口都放在一个conntroller里面,所以url的格式是“conntroller/action”
看一个调用的栗子吧,就明白怎么用了
  1. const req = require('../../utils/util.js')
  2. Page({
  3.   data: {
  4.     imgUrls: [],
  5.     indicatorDots: true,
  6.     autoplay: true,
  7.     interval: 2000,
  8.     duration: 2000
  9.   },
  10.   onLoad(){
  11.     req.GetByParams('home/homebanner')//看这里   看这里   看这里
  12.     .then(d=>this.setData({imgUrls:d,loading:false}))
  13.     .catch(e=>{
  14.       this.setData({imgUrls:[],loading:false})
  15.     })
  16.   }
  17. })
复制代码
这是index的获取banner图的方法,req.GetByParams('home/homebanner'),这里也可以带参数,也可以空着
最终的页面是这样的
在右边的红色框里面,我们可以看到请求返回的数据,也可以在右边修改数据,界面会跟随着变化,这是关于调试的事情了,容后再议。


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册 新浪微博登陆

x

新浪微博达人勋

600

积分

0

金钱

0

广播

Rank: 4

积分
600
发表于 2019-5-8 15:45:01 | 显示全部楼层
我擦!我要沙发!

新浪微博达人勋

121

积分

4

金钱

0

广播

Rank: 2

积分
121
发表于 2019-6-19 16:32:41 | 显示全部楼层
我也顶起出售广告位

新浪微博达人勋

122

积分

0

金钱

0

广播

Rank: 2

积分
122
发表于 2019-7-11 22:12:25 | 显示全部楼层
广告位,,坐下看看

新浪微博达人勋

1179

积分

319

金钱

0

广播

Rank: 6Rank: 6

积分
1179

社区QQ达人最佳新人活跃会员热心会员推广达人

发表于 2019-7-30 05:59:29 | 显示全部楼层
不错,支持一下先,哈哈。

新浪微博达人勋

1131

积分

249

金钱

0

广播

Rank: 6Rank: 6

积分
1131

社区QQ达人最佳新人

发表于 2019-8-27 18:45:22 | 显示全部楼层
是爷们的娘们的都帮顶!大力支持

新浪微博达人勋

553

积分

0

金钱

0

广播

Rank: 4

积分
553
发表于 2019-9-2 13:13:04 | 显示全部楼层
顶起出售广告位

新浪微博达人勋

567

积分

0

金钱

0

广播

Rank: 4

积分
567
发表于 2019-9-10 09:26:07 | 显示全部楼层
路过 帮顶 嘿嘿

新浪微博达人勋

605

积分

9

金钱

0

广播

Rank: 4

积分
605
发表于 2019-9-13 09:02:26 | 显示全部楼层
打酱油的人拉,回复下赚取积分

新浪微博达人勋

151

积分

12

金钱

0

广播

Rank: 2

积分
151
发表于 2019-9-16 17:44:54 | 显示全部楼层
广告位,,坐下看看
您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆

本版积分规则

小黑屋|手机版|Archiver|小程序教程网. ( 粤ICP备12089784号 )

GMT+8, 2019-10-19 14:39 , Processed in 0.250000 second(s), 42 queries .

Powered by Discuz X3.1

© 2001-2013 IOS教程网

快速回复 返回顶部 返回列表