微信小程序框架搭建
基础框架搭建
npm支持
- 新建项目后再项目根目录下执行
npm install
npm install dayjs --save
- 成功后会自动创建package.json,package.lock,node_modules文件
- 点击“工具” -> “构建 npm”完成构建,并弹出构建成功提示
- 勾选“使用 npm 模块”选项
- 构建完成后即可使用 npm 包
const dayjs = require('dayjs')
console.log(dayjs)
less支持
less优势就不细说了,微信开发者工具并未原生支持less,不过微信小程序可以和vscode共用插件,所以可使用vscode插件Easy LESS进行转译
先从vscode中安装对应插件
找到插件对应文件(暂时先打开文件夹)
系统 | 路径 | 一键打开命令 |
---|---|---|
mac(linux) | ~/.vscode/extensions | open ~/.vscode/extensions |
windows | %USERPROFILE%.vscode\extensions | 不会cmd |
打开微信小程序插件
切换到拓展->编辑器自定义扩展
打开拓展文件夹并将easy less插件粘贴到该文件夹中
回到微信开发者工具将该插件开关打开
注意:如果没有重启微信开发者工具
打开 设置 -> 编辑器 ->更多及工作区的编辑器设置...
切换到json模式
将如下代码粘贴到最外层对象内,如图
代码如下
"less.compile": {
"outExt": ".wxss"
}
该配置表示所有*.less变化时都会同步修改同级目录下的.wxss文件,所以每次新建页面后需要创建一个.less文件。由于插件只会将less转义成css,并不会反向修改,所以必须只能修改less文件。
重启下微信开发者工具。效果如图(左边为less,右边为wxss)
分包
由于小程序单包模式有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 输出')
自定义字体
小程序不支持@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>
效果图
字体图标
这里以阿里iconfont为例。
找到自己的图标项目选择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文件
将除了@font-face标签以外全部内容粘贴到小程序需要使用页面的wxss中
比如我的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>
效果