小程序开发技巧总结

摘要：前言最近公司要开发一款电商小程序，匆忙看了一遍文档就开始干活了。整体开发体验个人感觉不太好，特别是如果之前习惯了开发，突然去开发小程序，感觉很鸡肋。

前言

最近公司要开发一款电商小程序，匆忙看了一遍文档就开始干活了。整体开发体验个人感觉不太好，特别是如果之前习惯了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-runtime这个库

下载regenerator-runtime并放到utils目录下

在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
}

使用方法：

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

  


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
}


  
  
    一段文本一段文本一段文本一段文本一段文本一段文本
    其他
  

组件事件传递

任务：父组件向子组件传递初始数据，当子组件点击以后可以triggerEvent自定义事件，父组件执行自定义事件，重新请求数据并传给子组件

/* 子组件 */

  


properties: {
  list: {
    type: Array,
    default: []
  }
},

methods: {
  setId(e) {
    let id = e.currentTarget.dataset.id
    this.triggerEvent("deleteFav", id)
  }
}

/* 父页面 */


data: {
  list: []
},
deleteFav(e) {
  let id = e.detail // 获取传递过来的数据
  // 根据id请求数据，然后重新setData
  let newData = [1,2,3]
  this.setData({
    list: newData
  })
}

使用wxParse解析HTML

下载wxParse，放到utils目录下

在JS页面引入：import WxParse from "../../utils/wxParse/wxParse"

Page({
  data:{
    contentHTML:"" // 解析后的HTML
  },
  onLoad: function() {
    // 请求到的HTML数据
    let content = "
我是HTML代码
", that = this;
    WxParse.wxParse("contentHTML", "html", content, that, 0);
  }
})

显示解析内容