推荐下载
-
2020-05-12 浏览：740
-
2020-05-06 浏览：521
-
2020-05-08 浏览：510
-
2020-04-04 浏览：505
-
2020-05-12 浏览：502
小程序开发技巧总结
发布时间:2020-10-17最近公司要开发一款电商小程序，匆忙看了一遍文档就开始干活了。整体开发体验个人感觉不太好，特别是如果之前习惯了Vue开发，突然去开发小程序，感觉很鸡肋。以下是我在开发中遇到的一些问题以及解决方法的总结，仅供参考
引入iconfont在小程序中引入字体图标要比web麻烦一些，简单说需要三步：
下载iconfont，把iconfont.css复制到iconfont.wxss，在app.wxss中引入
查看iconfont在unicode模式下的在线链接，替换iconfont.wxss中的链接为远程链接
在wxml文件中引入对应的icon class
<icon class="iconfont icon-pay"></icon> 复制代码 使用lessvscode有一个easy less插件，是我感觉使用less最简单的方式
vscode安装easy less插件
创建一个less目录，用于存放less文件
文件头部添加编译注释 // out: ../pages/index/index.wxss, compress: true, sourceMap: false
ctrl + s保存后自动编译
编译后的结果
小程序中的按钮功能强大，很多功能必须要用按钮，比如弹出用户授权，调用客服功能。默认的样式一般无法满足需求，可以把按钮样式统一重置，然后自己写样式
button { padding: 0; background: #fff; line-height: 0; &::after { border-color: transparent; } } .button-hover { background: #fff; } 复制代码 支持async-awaitasync-await是ES7的语法，截止我写这篇文章为止，小程序还是不支持async-await语法的，所以需要使用regenerator这个库
下载regenerator，并把regenerator-runtime并放到utils目录下
封装wxRequest，让它支持async-await
const wxRequest = async (url, params = {}) => { Object.assign(params, { token: wx.getStorageSync('token') }) // 所有的请求，header默认携带token let header = params.header || { 'Content-Type': 'application/json', 'token': params.token || '' } let data = params.data || {} let method = params.method || 'GET' // hideLoading可以控制是否显示加载状态 if (!params.hideLoading) { wx.showLoading({ title: '加载中...', }) } let res = await new Promise((resolve, reject) => { wx.request({ url: url, method: method, data: data, header: header, success: (res) => { if (res && res.statusCode == 200) { resolve(res.data) } else { reject(res) } }, fail: (err) => { reject(err) }, complete: (e) => { wx.hideLoading() } }) }) return res } export { wxRequest } 复制代码使用方法：
import regeneratorRuntime from '../../utils/regenerator-runtime/runtime-module.js' import { wxRequest } from '../../utils/util.js' Page({ data: { list:[], count: 0, page: 1, limit: 10 }, onLoad: function() { this.getList() // 请求已经结束 做其他事 }, getList: async function() { await wxRequest(app.globalData.baseUrl + '/test',{ hideLoading: true, data: { limit: this.data.limit, page: this.data.page } }).then((ret) => { this.setData({ list: ret.data.data, count: ret.data.num }) }) } }) 复制代码封装之后用起来还是很爽的，扩展起来也方便
动态设置data中某个值应用场景：循环出来的列表，需要根据点击项，动态改变列表中对应id的数据
// 动态传递id <block wx:for="{{list}}" wx:key="{{index}}"> <view catch:tap="onChangeName" data-id="{{item.id}}"></view> </block> Page({ data: { list:[{ id: 0, name: 'wang' },{ id: 1, name: 'li' }] }, onChangeName: function(event){ // 拿到id let id = event.target.dataset.id let key = `list[${id}].name`, val = 'zhang' // 设置值 this.setData({ [key]: val }) } }) 复制代码 flex布局，溢出省略号无效订单列表一般都是左边一个图片，右边是标题或描述。这时候图片宽度是固定的，标题长度自适应
.wrap { display: flex; } .sub { flex: 1; width: 0; // 宽度设为0 } .sub text { display: block; // 一定要设置成block } <view calss="wrap"> <image src=http://www.yiyongtong.com/archives/"i.png"/> <view class="sub"> <text>一段文本一段文本一段文本一段文本一段文本一段文本</text> <view>其他</view> </view> </view> 复制代码 组件事件传递