微信小程序框架搭建

1,779 阅读4分钟

微信小程序框架搭建

基础框架搭建

npm支持

官方文档

  1. 新建项目后再项目根目录下执行
npm install
npm install dayjs --save
  1. 成功后会自动创建package.json,package.lock,node_modules文件

QQ20210518-145345@2x.png

  1. 点击“工具” -> “构建 npm”完成构建,并弹出构建成功提示

2.png

  1. 勾选“使用 npm 模块”选项

3.png

  1. 构建完成后即可使用 npm 包
const dayjs = require('dayjs')
console.log(dayjs)

less支持

less优势就不细说了,微信开发者工具并未原生支持less,不过微信小程序可以和vscode共用插件,所以可使用vscode插件Easy LESS进行转译

先从vscode中安装对应插件

QQ20210519-143925@2x.png

找到插件对应文件(暂时先打开文件夹)

系统路径一键打开命令
mac(linux)~/.vscode/extensionsopen ~/.vscode/extensions
windows%USERPROFILE%.vscode\extensions不会cmd

打开微信小程序插件

截屏2021-05-18 下午5.18.05.png

切换到拓展->编辑器自定义扩展

截屏2021-05-18 下午5.19.04.png

打开拓展文件夹并将easy less插件粘贴到该文件夹中

截屏2021-05-19 下午2.55.31.png

回到微信开发者工具将该插件开关打开

注意:如果没有重启微信开发者工具

QQ20210519-145913@2x.png

打开 设置 -> 编辑器 ->更多及工作区的编辑器设置...

QQ20210519-150139@2x.png

切换到json模式

QQ20210519-150441@2x.png

将如下代码粘贴到最外层对象内,如图

QQ20210519-152011@2x.png

代码如下

"less.compile": {
  "outExt": ".wxss"
}

该配置表示所有*.less变化时都会同步修改同级目录下的.wxss文件,所以每次新建页面后需要创建一个.less文件。由于插件只会将less转义成css,并不会反向修改,所以必须只能修改less文件

重启下微信开发者工具。效果如图(左边为less,右边为wxss)

2021-05-19 15-32-32.2021-05-19 15_34_40.gif

分包

官方文档

由于小程序单包模式有2M容量限制,所以为了扩展性,可以按照不同的业务逻辑分装到不同的包中,这样可以保证最大限度延缓到达容量上限的时间,当然分包也是有限制的。

不同分包之间不能互相引用,但分包都可以引用主包部分

基于以上原理,分包之间逻辑需相互隔离,共用代码可放置到主包中


graph TD
主包 --> 主包-components
主包 --> 主包-pages
主包 --> 主包-behaviors
主包 --> 主包-utils
主包 --> 分包1
分包1 --> 分包1-components
分包1 --> 分包1-pages
分包1 --> 分包1-behaviors
分包1 --> 分包1-utils
主包 --> 分包2
分包2 --> 分包2-components
分包2 --> 分包2-pages

小技巧

此处展示一些项目常用功能对应代码

filter过滤器

小程序没有原生支持vue中filter功能,不过可以采用wxs(点击访问官方)方式实现。

// foramt.wxs

var format = {
  // 格式化.00 2位精度
  f2: function (str) {
    if (str) {
      var num = parseFloat(str)
      return num.toFixed(2)
    } else {
      return '0.00'
    }
  }
}
module.exports = {
  f2: format.f2
}


// foramt.wxs

<wxs src="../../filters/formatPrice.wxs" module="formatPrice" />
<view>{{formatPrice.f2(price)}}</view>

注意:在.wxs模块中只能引用 wxs 文件模块,非wxs模块无法引用,所以第三方js库均无法进行引用,如moment,lodash。

异常上报

微信官方提供了一个前端日志收集的系统,当使用官方log时会实时将日志上报到微信后台中,方便排错,并且无而外收费,官方支持,速度也不错,推荐使用该方式排错。官方文档

由于该库只是用于上报,本机调试阶段还是需要依赖控制台输出,所以封装了一个util方法,本机log输出同时完成上报操作。

// log.js

var log = wx.getRealtimeLogManager ? wx.getRealtimeLogManager() : null

module.exports = {
  debug() {
    console.log(arguments)
    if (!log) return
    log.debug.apply(log, arguments)
  },
  info() {
    console.info(arguments)
    if (!log) return
    log.info.apply(log, arguments)
  },
  warn() {
    console.warn(arguments)
    if (!log) return
    log.warn.apply(log, arguments)
  },
  error() {
    console.error(arguments)
    if (!log) return
    log.error.apply(log, arguments)
  },
  setFilterMsg(msg) { // 从基础库2.7.3开始支持
    if (!log || !log.setFilterMsg) return
    if (typeof msg !== 'string') return
    log.setFilterMsg(msg)
  },
  addFilterMsg(msg) { // 从基础库2.8.1开始支持
    if (!log || !log.addFilterMsg) return
    if (typeof msg !== 'string') return
    log.addFilterMsg(msg)
  }
}

// xxx.js

const log = require('./log')
log.debug('进行debug 输出')

image.png

自定义字体

小程序不支持@font-face src导入的方式,不过官方提供js导入在线字体的方式,这样我们就能导入自定义字体,字体图标。官方文档

导入在线字体

// app.js

App({
  onLaunch() {
    console.log('111')
    // 加载字体
    wx.loadFontFace({
      global: true,
      family: 'Bitstream Vera Serif Bold',
      source: 'url("https://sungd.github.io/Pacifico.ttf")',
      success(e) {
        console.log(e)
      },
      fail(e) {
        console.log(e)
      }
    })
  }
})


// index.wxml

  在线字体
  <view  style="font-family: 'Bitstream Vera Serif Bold'">
    Bitstream Vera Serif Bold
  </view>
  默认字体
  <view>
    Bitstream Vera Serif Bold
  </view>

效果图

截屏2021-05-19 下午2.14.03.png

字体图标

这里以阿里iconfont为例。

QQ20210519-141729@2x.png

找到自己的图标项目选择unicode,并copy *.ttf对应链接。并在app.js中进行引用

// app.js

App({
  onLaunch() {
    wx.loadFontFace({
      global: true,
      family: 'iconfont',
      // 该地址请以自己copy路径为准
      source: 'url("https://at.alicdn.com/t/font_1621640_xz0ea7squ9j.ttf")',
      success(e) {
        console.log(e)
      },
      fail(e) {
        console.log(e)
      }
    })
  }
})

回到iconfont页面,点击下载至本地,并打开iconfont.css文件

截屏2021-05-19 下午2.26.49.png

将除了@font-face标签以外全部内容粘贴到小程序需要使用页面的wxss

截屏2021-05-19 下午2.29.22.png

比如我的wxss文件

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-huiyuan:before {
  content: "\e8b1";
}

.icon-shijian:before {
  content: "\e8b8";
}

.icon-shoucang:before {
  content: "\e8b9";
}

.icon-shouye:before {
  content: "\e8ba";
}

.icon-huiyuan1:before {
  content: "\e8c5";
}

.icon-shijian1:before {
  content: "\e8c6";
}

.icon-shouye1:before {
  content: "\e8c7";
}

.icon-shoucang1:before {
  content: "\e8c8";
}


wxml


  <view class="iconfont icon-huiyuan1"></view>
  <view class="iconfont icon-shijian"></view>
  <view class="iconfont icon-shoucang"></view>
  <view class="iconfont icon-shouye"></view>

效果

截屏2021-05-19 下午2.34.31.png