小程序开发进程笔记分享

小程序本质基于vue,有相同的生命周期和事件处理

·1.小程序的页面跳转,非常重要,每个跳转方式代表不同的使用途径

1 switchTab 跳到有tab页面,并关闭其他没有tab的页面

2.redirectTo 关闭当前页,跳到应用内的某个页面

3.navigateTo 保留当前页,跳到应用中的某个页面,可以使用wx.navigateBack 返回上个页面,最多只能跳五个

4.reLaunch 跳转到指定页面,并关闭其他所有的页面(最好在返回首页的时候用)

交替使用跳转API可以达到很好的效果

·2.小程序自主插件 commpents ,这里介绍关于日期时间插件

https://github.com/Velg03961485/time-choose-plug-in-of-wechat-mini-app

·3.wxchart 一款纯js编写插件,使用相当方便 如果遇到问题,建议直接修改插件

https://github.com/Velg03961485/wx-charts

·4.小程序引用外部字体

1 如果没有ttf、eot、svg、woff 字体包,或者不对应,可以通过
https://www.fontconverter.org/ 这个网站进行转换一下

2 然后把得到的ttf 字体包(如果有这种字体包,就不用进行步骤1),在
https://transfonter.org/ 这个网站
“Add fonts” 上传字体包
选择 Base64 encode 为 on
勾选下面的所有选项 ,TTF WOFF SVG EOT WOFF2
点击 Convert ,生成新字体包,生成后会出现 Download
点击下载 ,这样你项目中需要用的字体就生成了

3 在小程序项目里 第一等级(和components,pages平级 ) 创建文件夹 fontStyle (自定义)
把刚才下载的文件里面的内容,全部粘贴复制到 这个fontStyle文件里面

4 在fontStyle文件夹下,创建一个新的 newFont.wxss 文件,在刚才复制的内容里面,找到stylesheet.css 打开,把里面的内容全部粘贴复制到 newFont.wxss中

5.在你要引用字体的wxss文件中,先引入字体 @import ‘../../fontStyle/newFont.wxss’;
在样式里面 font-family: ‘286-CAI978’;
这里要注意的是 引入字体的名称 ,可以直接在 newFont.wxss 中查看,如果想更改,可以把名字更改为自定义,记得要改完整

·6.小程序wxs过滤器 这里主要是提醒注意几点

1.不要使用let 声明对象,会报错 只能用var

2.不要使用new Date() 获取当前时间,同样会报错
可以使用getDate()获取当前时间

·7.使用节流函数,防止多次触发点击事件
当然你也可以使用布尔值通过切换来改变
这里的节流函数可以自主改变控制的时间长短

  1. 在utils 文件中 util.js 中

    // 函数节流限制测试
    function throttle(fn, gapTime) {
    if (gapTime == null || gapTime == undefined) {
    gapTime = 1500
    }

    let _lastTime = null

    // 返回新的函数
    return function () {
    let _nowTime = + new Date()
    if (_nowTime - _lastTime > gapTime || !_lastTime) {
    fn.apply(this, arguments) //将this和参数传给原函数
    _lastTime = _nowTime
    }
    }
    }

记得下面要在 module.exports 中抛出此函数

module.exports = {
throttle: throttle
}

  1. 在需要用到的js文件中,引入 js
    const util = require(‘../../utils/util.js’)

checkMemberBtn: util.throttle(function (e) , 3000),