258资源分享网

对于微信小程序开发入门，还是比较简单的，只需要具备基本的css+js知识就可以了，成本比较低。 写了小程序和RN之后，有一种原生很笨重的感觉，就是小程序或者是RN等这些新的开发方式在效率上面真的有比较大的优势，唯一不足就是运行速度了(使用Canvas就会有这样子的感觉)。 感觉目前所接触的种类前端开发(包括移动端)，都是基本一个套路：UI，网络，数据保存，富文本，图片/视频。 本文也是从这几个方向去总结自己的小程序开发经验。

小程序的入门

其实小程序的开发过程一直都是查看文档，按照文档去操作就可以了。 一般流程是先看简易教程。看完之后，再去看组件。之后可以开始尝试写需求，这个过程中，开始不断的去查API和框架即可。

多列列表

在开发中，有一个需求是需要实现类似Android的GridView网格列表的。但是微信中并没有提供这样子的组件，但是小程序是跟html/css前端很类似的，他可以通过指定 display:flex ，然后去设置 flex-wrap:wrap 就可以。例如，有一个数组 data:["A","B","C","D","E","F","G","H","I","J","K","L","M","N"] 需要显示为一个三列的列表，可以如下处理：

//GridPage.wxml <view class='grid-container'> <view wx:for="{{data}}" wx:key="{{item}}" class="grid-list"> <view class='grid-item'> <text class='grid-item-text'>{{item}}</text> </view> </view> </view> //GridPage.wxss Page { min-height: 100%; background-color: #fff; } .grid-container { margin-left: 4rpx; margin-right: 4rpx; display: flex; flex-wrap: wrap; flex-direction: row; } .grid-list { width: 33.33%; } .grid-item { margin: 2rpx; background: #999; display: flex; justify-content: center; align-items: center; } .grid-item-text { color: black; }

这里的重点就是 grid-container 中的 flex-wrap 为 wrap ，方向是 row 了。然后他的每一个item宽度都是 33.33% 。需要注意的是一定是去设置外部的contanier而不是内部的list。

层级布局

在CSS中，需要使用层级布局，就是类似Android的FrameLayout效果，可以使用z-index，也可以使用一个绝对定位。比如，我们有一个需求是：下面是一个图片，上面是文字。

//PositionPage.wxml <view class=http://www.yiyongtong.com/archives/'root'> <image src=http://www.yiyongtong.com/archives/'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3756982450,995202616&fm=27&gp=0.jpg' class=http://www.yiyongtong.com/archives/'image'></image> <text class=http://www.yiyongtong.com/archives/'text'>我是权律二啊</text> </view> //PositionPage.wcss .root{ align-items: center; display: flex; flex-direction: column; position: relative; } .image{ width: 300rpx; height: 300rpx; } .text{ background-color: #999; position: absolute; }

主要是两点：父布局的 position 必须是 relative ，它本身 position 必须是 absolute。

网络请求

小程序的网络请求是使用wx.request()方法，但是该方法太臃肿，并没有使用Promise那样子简洁。幸运的是小程序支持Promise，所以我们可以把http封装一下，变成有条理。说到这里，大家做的时候需要注意去微信后台配置各种request域名，upload域名，downloadFIle域名。 下面封装的例子的数据返回格式都是json格式post请求方式发出的:

//真正发起请求 function _request(url, param) { if (isDebug) { Log.i("http==> params->" + JSON.stringify(param)); Log.i("http==> url->" + url); } return new Promise((resolve, reject) => { wx.request({ url: url, data: param, header: { 'content-type': 'application/json', "Accept": "application/json" }, method: "POST", success: function (response) { if (isDebug) { const jsonResponse = JSON.stringify(response); Log.i("http==> response->" + jsonResponse); } const {data, statusCode, ok = false} = response; //只有ok为true的是时候才返回成功，data不一定是包含数据的 if (statusCode === 200 && data && data.ok) { resolve(data, ok); } else { if (statusCode != 404 && statusCode < 500 && statusCode > 300) { ToastUtil.showError(); } reject(data); } }, fail: reject }); }); }