因为是连续写的2篇随笔,废话不多说。直接进入正题。

选择预编译的工具时,笔者采用了gulp。虽然,如今市面上大多采用的多为webpack,使用gulp也是有自己的缘由的。

webpack的最主要特点是可以将项目大多数资源打包为单个Js。h5项目中,打包后可以减少文件的请求数量,而小程序是由微信侧控制,并且依赖目录结构的项目,webpack只能进行配置,分入口打包,最终生成的目录结构还是必须符合小程序的项目结构。

gulp同样可以达到预编译的需求,而且配置相对简单。所以就采用了gulp。

大部分的配置需求,都可以百度到。这里就挑一点关键点做一下讨论吧。

  1. 背景图的 base64 转换。这个问题可以使用gulp-base64插件,简单处理掉。但是,背景图和正常使用的 image 图片在相同文件夹下,会同样被打包到dist 目录中。造成冗余,我采用的处理方法是,将背景图和 image 使用的本地图片分开存放,打包时,排除掉背景图的文件夹,仅被打包成base64 存入wxss文件。  all.concat(['!src/assets/bgImages/**'])
  2. 实时编译。可能大家第一印象,感觉简单的使用 gulp.watch 直接跑一次相应的任务就好了。但是,简单的这样配置会造成一个性能的问题。每个改动,编译大量文件。每个文件被修改都会触发小程序开发者工具的刷新。就会造成每次保存,都要等很久才会编译成功,看到页面效果。大大的减低编程效率。所以,在 gulp.watch 任务的中,加入了一个回调。
    function watchHandle (cb) {
    return e => {
    const newPath = changePath(e.path)
    if (e.type === 'deleted') {
    let distFile = './dist/' + Path.relative('./src', newPath);
    fs.existsSync(distFile) && fs.unlinkSync(distFile)
    } else {
    cb(newPath)()
    }
    console.log('File ' + e.path + ' was ' + e.type + ', running tasks...')
    }
    } gulp.watch(jsList, watchHandle(js))

    watchHandle ,就是接收到修改过的文件,然后将文件传入回调,进行处理的中间方法。
    其中,js 是针对 js 文件的预编译处理的回调方法。之后再讨论。

  3. 依照 process.env.NODE_ENV 做不同的配置。例如,开发与生产环境的域名请求。跳转到其他小程序的对应版本。
    采用的方法是,增加 config 目录,存放多个环境的配置文件。在打包时,依照 env 将对应的文件打包到 dist 目录下,并改为 index.js。再app.js 中直接引用,就可以直接取到对应环境的配置。

目前,感觉值得一提的也就只有上面3点。如之前所说,大部分的预编译配置,都是可以百度、谷歌找到,也比我来讲述的更加细致、全面。

完整的包,目前准备在随笔整理完之后,处理掉公司相关的内容,再上传到github开源。如果有需要,可能提前传部分配置。还是要先看各位看官的需要吧。

至于下一篇,就有空的时候再来发吧。应该会写按钮的封装,因为,路由有点问题还在解决中,完成了再来讨论与开源。

下次再见。。

spa 小程序的研发随笔 (2) --- 预编译的更多相关文章

  1. spa 小程序的研发随笔 (1) --- 前言

    半年前跳槽, 新公司主要研发倾向于小程序的开发.由于之前并没有接触小程序,所以经过半年的实际开发,才敢来做一点笔记. 小程序提供很多组件给开发者使用,但是,实际使用中还是会有很多的问题. 小程序的组件 ...

  2. 微信小程序点击图片放大预览

    微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...

  3. 微信小程序--背景图片手机无法预览

    目前小程序好像没有支持手机预览背景本地图片,所以将本地图片改为网络图片链接就可以了 background: url("https://..../img/no.png") no-re ...

  4. (干货)微信小程序之上传图片和图片预览

    这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...

  5. 微信小程序 - 分包加载(预下载)

    开发者可以通过配置,在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度.对于独立分包,也可以预下载主包. 配置方法 预下载分包行为在进入某个页面时触发,通过在 a ...

  6. 微信小程序实战篇-图片的预览、二维码的识别

    开篇 今天,做的小程序项目要求,个人中心的客服图片在用户长按时可以识别其二维码,各种翻阅查找,采坑很多,浪费了很多时间,在这里记录下需要注意的点,以及对小程序官方提供的API做一个正确和清晰的认知,希 ...

  7. 微信小程序开发之真机预览

    1:真机预览时上传组件的坑: 当在真机里面使用上传组件,当进入选择相片或者拍照的时候,小程序会进入后台,调用APP onHide()方法,选择完返回小程序是会调用App Onshow()方法,然后调用 ...

  8. 微信小程序之上传图片和图片预览

    这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...

  9. 微信小程序之base64图片如何预览与一键保存到本地相册?

    需求:由于后台服务器各方面的限制,现在服务器返回的图片是base64格式的,小程序端需要支持预览图片和多个图片一键下载功能 一.如何预览base64位图片? WXML页面:item.src的值是bas ...

随机推荐

  1. Docker小白使用笔记

    本文来自网易云社区. 本人DBA一枚,但因为工作的关系,接手的机器越来越多,要部署的东西也从MySQL扩展到其他千奇百怪的各种应用服务,因此需要使用自动化部署的场景也越来越多.早就听运维部的其他大大们 ...

  2. iscsi使用教程(下)

    动态创建目标 安装iscsi服务端 # yum install -y scsi-target-utils.x86_64 修改配置文件 # mkdir -p ~/volumes # sed -i '$ ...

  3. PAT 1043【BST与二叉树】

    考察: 1.二叉树的建树 2.前序遍历,后序遍历 3.BST的特性 这题的思路: 告诉你数组是先序遍历的,so 根已经知道了(数组首位元素),那么按照BST,建一下树(要两次,另外一次是镜像的): 跑 ...

  4. Bigdecimal 比较equals与compareTo

    原文链接:https://blog.csdn.net/jixinhuluwa/article/details/72626598 1.b.equals(BigDecimal.ZERO); 该方法存在的问 ...

  5. 大话重构 之 原来反OO天天见

    在OO(面向对象)时代长大的小伙伴们一定记得: 面向对象的基石:把数据和依赖该数据的行为封装在一起. 但我们经常遇到一个类依赖其它类的数据的情况.不多的话,正常,对象间势必存在交互,毕竟完全独立的类无 ...

  6. 日志记录:MySQL系列之十一

    一.SQL命令历史 ~/.mysql_history 记录了在mysql中执行的命令历史 二.事务日志 transaction log:事务型存储引擎自行管理和使用 在一个事务提交后还没有存到磁盘的情 ...

  7. linux下apache无法启动之(httpd not running, trying to st)

    这突然接手的服务器,本来是没什么事的,可是因为机房的问题,需要将服务器迁回来,结果可想而知,关机重启了,其中有一台估计诚心给我过不去,待配置好ip并重启了服务后,发现apache无法正常启动了! 先还 ...

  8. POJ 2068 NIm (dp博弈,每个人都有特定的取最大值)

    题目大意: 有2n个人,从0开始编号,按编号奇偶分为两队,循环轮流取一堆有m个石子的石堆,偶数队先手,每个人至少取1个,至多取w[i]个,取走最后一个石子的队伍输.问偶数队是否能赢. 分析: 题目数据 ...

  9. Django基础(5) ----基于双下划线的跨表查询,聚合查询,分组查询,F查询,Q查询

    一.基于双下划线的跨表查询 Django 还提供了一种直观而高效的方式在查询(lookups)中表示关联关系,它能自动确认 SQL JOIN 联系.要做跨关系查询,就使用两个下划线来链接模型(mode ...

  10. lifecycle-mapping-metadata.xml

    <?xml version="1.0" encoding="UTF-8"?> <lifecycleMappingMetadata> &l ...