说明：本文仅供参考，因为不是我分享的，欢迎挑错，可能有一些东西不适用最新版本了；
一：for循坏
1，wx:for 在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item 事例如下： wxml文件:
<view wx:for="{{items}}"> {{index}}: {{item:one}}</view>
js文件： - Page({
items:[{ one: "test1", },{ one: "test2" }]})
可以使用wx:for-item指定数组当前元素的变量名 可以使用wx:for-index指定数组当前下标的变量名，事例如下：
wxml文件：
<view wx:for="{{items}}" wx:for-item="name" wx:for-index="id">{{id}}: {{name.one}}</view>
下面是一个九九乘法表事例：
<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i"> <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j"> <view wx:if="{{i <= j}}"> {{i}}*{{j}} = {{i * j}} </view> </view></view>
2，block wx:for wx:for用在标签上，以渲染一个包含多节点的结构块。例如：
<block wx:for="{{[1,2,3]}}"> <view> {{index}}: </view> <view> {{item}} </view></block>
效果图如下：
二：数据访问 先简单说一下，小程序的结构 如图所示 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获取一条数据 直接看方法吧，有点啰嗦了 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) }}
我设置了一个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')，这里也可以带参数，也可以空着 最终的页面是这样的
在右边的红色框里面，我们可以看到请求返回的数据，也可以在右边修改数据，界面会跟随着变化，这是关于调试的事情了，容后再议
三：配置下拉刷新/上拉加载 下拉刷新
.json文件(指定页面){ "enablePullDownRefresh": true}
- "window": { "enablePullDownRefresh": true }
// 下拉刷新回调接口onPullDownRefresh: function () { // do somthing },
.json文件(指定页面){ "enablePullDownRefresh": true}// 上拉加载回调接口 // 上拉加载回调接口onReachBottom: function () { // 我们用total和count来控制分页，total代表已请求数据的总数，count代表每次请求的个数。 // 上拉时需把total在原来的基础上加上count，代表从count条后的数据开始请求。total += count; // 网络请求 this.periphery(); },
| 
收藏