小程序总结
最近公司要开发一款电商小程序，匆忙看了一遍文档就开始干活了。整体开发体验个人感觉不太好，特别是如果之前习惯了Vue开发，突然去开发小程序，感觉很鸡肋。以下是我在开发中遇到的一些问题以及解决方法的总结，仅供参考
引入iconfont
在小程序中引入字体图标要比web麻烦一些，简单说需要三步：
下载iconfont，把iconfont.css复制到iconfont.wxss，在app.wxss中引入
查看iconfont在unicode模式下的在线链接，替换iconfont.wxss中的链接为远程链接
在wxml文件中引入对应的icon class
使用less
vscode有一个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-await
async-await是ES7的语法，截止我写这篇文章为止，小程序还是不支持async-await语法的，所以需要使用regenerator这个库
下载regenerator，并把regenerator-runtime并放到utils目录下
2. 在util.js引入 import regeneratorRuntime from './regenerator-runtime/runtime-module'
封装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
}
封装之后用起来还是很爽的，扩展起来也方便
动态设置data中某个值
// 动态传递id
<block wx:for="{{list}}" wx:key="{{index}}">
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
})
}
})
应用场景：循环出来的列表，需要根据点击项，动态改变列表中对应id的数据
flex布局，溢出省略号无效
订单列表一般都是左边一个图片，右边是标题或描述。这时候图片宽度是固定的，标题长度自适应
组件事件传递
任务：父组件向子组件传递初始数据，当子组件点击以后可以triggerEvent自定义事件，父组件执行自定义事件，重新请求数据并传给子组件
摘自： http://www.wxapp-union.com/article-4287-1.html
网友评论