spa 小程序的研发随笔 (2) --- 预编译
因为是连续写的2篇随笔,废话不多说。直接进入正题。
选择预编译的工具时,笔者采用了gulp。虽然,如今市面上大多采用的多为webpack,使用gulp也是有自己的缘由的。
webpack的最主要特点是可以将项目大多数资源打包为单个Js。h5项目中,打包后可以减少文件的请求数量,而小程序是由微信侧控制,并且依赖目录结构的项目,webpack只能进行配置,分入口打包,最终生成的目录结构还是必须符合小程序的项目结构。
gulp同样可以达到预编译的需求,而且配置相对简单。所以就采用了gulp。
大部分的配置需求,都可以百度到。这里就挑一点关键点做一下讨论吧。
- 背景图的 base64 转换。这个问题可以使用gulp-base64插件,简单处理掉。但是,背景图和正常使用的 image 图片在相同文件夹下,会同样被打包到dist 目录中。造成冗余,我采用的处理方法是,将背景图和 image 使用的本地图片分开存放,打包时,排除掉背景图的文件夹,仅被打包成base64 存入wxss文件。 all.concat(['!src/assets/bgImages/**'])
- 实时编译。可能大家第一印象,感觉简单的使用 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 文件的预编译处理的回调方法。之后再讨论。 - 依照 process.env.NODE_ENV 做不同的配置。例如,开发与生产环境的域名请求。跳转到其他小程序的对应版本。
采用的方法是,增加 config 目录,存放多个环境的配置文件。在打包时,依照 env 将对应的文件打包到 dist 目录下,并改为 index.js。再app.js 中直接引用,就可以直接取到对应环境的配置。
目前,感觉值得一提的也就只有上面3点。如之前所说,大部分的预编译配置,都是可以百度、谷歌找到,也比我来讲述的更加细致、全面。
完整的包,目前准备在随笔整理完之后,处理掉公司相关的内容,再上传到github开源。如果有需要,可能提前传部分配置。还是要先看各位看官的需要吧。
至于下一篇,就有空的时候再来发吧。应该会写按钮的封装,因为,路由有点问题还在解决中,完成了再来讨论与开源。
下次再见。。
spa 小程序的研发随笔 (2) --- 预编译的更多相关文章
- spa 小程序的研发随笔 (1) --- 前言
半年前跳槽, 新公司主要研发倾向于小程序的开发.由于之前并没有接触小程序,所以经过半年的实际开发,才敢来做一点笔记. 小程序提供很多组件给开发者使用,但是,实际使用中还是会有很多的问题. 小程序的组件 ...
- 微信小程序点击图片放大预览
微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...
- 微信小程序--背景图片手机无法预览
目前小程序好像没有支持手机预览背景本地图片,所以将本地图片改为网络图片链接就可以了 background: url("https://..../img/no.png") no-re ...
- (干货)微信小程序之上传图片和图片预览
这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...
- 微信小程序 - 分包加载(预下载)
开发者可以通过配置,在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度.对于独立分包,也可以预下载主包. 配置方法 预下载分包行为在进入某个页面时触发,通过在 a ...
- 微信小程序实战篇-图片的预览、二维码的识别
开篇 今天,做的小程序项目要求,个人中心的客服图片在用户长按时可以识别其二维码,各种翻阅查找,采坑很多,浪费了很多时间,在这里记录下需要注意的点,以及对小程序官方提供的API做一个正确和清晰的认知,希 ...
- 微信小程序开发之真机预览
1:真机预览时上传组件的坑: 当在真机里面使用上传组件,当进入选择相片或者拍照的时候,小程序会进入后台,调用APP onHide()方法,选择完返回小程序是会调用App Onshow()方法,然后调用 ...
- 微信小程序之上传图片和图片预览
这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...
- 微信小程序之base64图片如何预览与一键保存到本地相册?
需求:由于后台服务器各方面的限制,现在服务器返回的图片是base64格式的,小程序端需要支持预览图片和多个图片一键下载功能 一.如何预览base64位图片? WXML页面:item.src的值是bas ...
随机推荐
- sql server 2008 r2安装
选择功能(好像报错了-下次重装系统测试)
- PAT 1071【STL string应用】
1.单case很多清空没必要的 2.string+ char 最好用pushback 3.string +string就直接+ #include <bits/stdc++.h> using ...
- Cef3 学习资料
fanfeilong/cefutil CEF General Usage(CEF3预览) CEF General Usage(CEF3预览) 介绍 CEF全称Chromium Embedded Fra ...
- dorado开发模式下实现动态查询
使用dorado开发模式,我们可以实现以下开发技巧 开发技巧1.实现动态查询功能: 1. 查询按钮的onClick事件中写入: datasetEmployee.parameters().setValu ...
- CPU死锁
https://blog.csdn.net/sunny05296/article/details/82858071 最近碰到了Centos7.2上终端打印soft lockup CPU死锁,系统无响应 ...
- thinkphp5.1 使用第三方扩展类库
此案例介绍的不是通过composer加载的,是手工下载放入extend目录下的扩展类库,仍然以phpspider为例 将owner888目录放入extend目录下,也可以直接将phpspider目录放 ...
- angular中[hidden]="expression"注意事项
[hidden]="expression",右侧的表达式尽量使用布尔值:虽然比较运算符也可以达到效果,但时常会出现一些莫名其妙的错误.
- P2161 [SHOI2009]会场预约 (线段树:线段树上的不重复覆盖数)
题目描述 PP大厦有一间空的礼堂,可以为企业或者单位提供会议场地.这些会议中的大多数都需要连续几天的时间(个别的可能只需要一天),不过场地只有一个,所以不同的会议的时间申请不能够冲突.也就是说,前一个 ...
- 解决spark-shell输出日志信息过多
import org.apache.log4j.Logger import org.apache.log4j.Level Logger.getLogger("org").setLe ...
- (转)linux自定义开机启动服务和chkconfig使用方法
原文:https://www.cnblogs.com/jimeper/archive/2013/03/12/2955687.html linux自定义开机启动服务和chkconfig使用方法 1. 服 ...