AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-02-18 11:58:55

摘要:技术指南:小程序开发,如何才能有先发优势? (微信 小程序开发 - 微信 小程序外包开发-微信小程序 开发教程-微信 小程序开发者社区,尽在 www.mntuku.cn)

技术指南:小程序开发,如何才能有先发优势?

在微信公布小程序的文档和开发工具后,我是在第一时间进行了学习和体验,但是由于微信小程序的运行环境并不是一个标准的浏览器环境,在以往开发中的很多经验并不适用,碰到了很多的问题,所以有了这篇文章,想大家分享一下,我遇到了哪些问题,如何解决,用了什么样的方案。

问题一:无法调用NPM包

 

虽然微信 小程序开发工具打包时实现了 require 函数加载依赖,但并不是完整的 CommonJS 依赖管理。因为 require 函数仅仅能够加载项目中的JS文件,而且必须严格定义 JS 文件路径,路径不支持 CommonJS 的路径风格。

 

例如如下加载方式都将出错:

 

require(lodash);

require(lodash/map);

require(./foo);

 

微信 小程序开发工具中,我们必须对应写为如下格式:

 

require(node_modules/lodash/lodash.js);

require(node_modules/lodash/map.js);

require(./foo.js);

 

另外,在开发中,我们往往需要安装 babal、eslient、webpack、grunt 等待开发工具,微信 小程序开发工具会一视同仁将这些工具的源码也进行打包……

解决办法

 

我们以 lodash 包为例,在 src/app.js 中键入代码 const _ = require(lodash); 编译后,我们看到 dist 目录下的文件是这样的:

 

 

我们看到 dist 目录下有一个 npm/lodash 目录,该目录下只有一个 lodash.js 文件,那么在微信 web 开发者工具中打包预览,lodash 的库将只有这个文件被加载。

 

我们看一下 dist/app.js 的源码,发现源码中const _ = require(lodash); 被编译为 var _ = require(./npm/lodash/lodash.js); 然后 labrador 命令将node_modules/lodash/lodash.js 文件复制到了 dist/npm/lodash/lodash.js 。这就是通过 labrador 可以调用 NPM 包的原理。

 

重要的是,只有真正用到的 js 文件才被 labrador 命令加入到项目目录中。这样一个小小的改进象征着我们的小程序可以便捷调用 NPM 仓库中海量的扩展库!

问题二:无法使用Babel转码

 

无法使用 Babel 转码的原因其实应该归结于无法加载 NPM 库,但是后果十分严重,因为你将不能再安全使用 ES6/7 特性,你将无法使用 async/await 函数,你将和无尽的 callback 做斗争。。。

解决办法

 

在初始化的示例代码 src/app.js 中的内容是这样的:

 

图中 timer 和 getUserInfo 属性都为 async 函数,函数体内使用 await 调用异步操作。labrador 库对微信 API 进行了封装,使用 const wx = require(‘labrador’); 覆盖默认的全局变量 wx; 封装后的 wx 对象提供的异步方法返回的都是 Promise 异步对象,结合 async/await 函数彻底终结 callback,将异步代码同步写,轻松逃离回调地狱!

 

但目前 async/await 函数是不被浏览器支持的,我们需要使用 babel 对其转码,labrador 编译命令已经内置了 babel 转码,转码后的代码可以查看 dist/app.js,内容过长,不再张贴。

问题三:无法重用组件

 

其实小程序开发并非完全不能重用组件,比如 WXML 语法中支持 import 和 include。但是那仅仅是视图模板可重用,并非组件可重用,因为我们认为组件在应当包含视图和逻辑。WXML 其实是基于可重用的组件,但是不允许我们自定义组件。

解决方法:

 

重用组件最需要解决的问题是组件的逻辑代码怎样重用。在实例代码中有一个src/components目录,用来存放项目内的可重用组件,其结构是这样的:

 

子目录 src/components/list 中存放着一个可重用的组件。list.js / list.less / list.xml  分别对应微信小程序的 js / wxss / wxml 文件。JS 为控件的逻辑层,其代码如下:

 

文件导出一个 List 类,这个组件类拥有像 Page 一样的生命周期函数 onLoad, onReady, onShow, onHide, onUnload 以及 setData 函数。

 

LESS 文件对应微信的 WXSS 文件,因为微信小程序实现的限制,LESS 中无法使用连级选择语法,但是可以定义变量,方便开发。

 

XML 文件对应微信的 WXML 文件,是组件视图描述文件,list.xml 内容为:

 

文件中导出一个名为 list 的 template。

 

组件不但可以存放在 src/components 目录内,还可以单独做成 NPM 包,这样就可以轻松做到跨项目间的组件共享。

 

组件定义完成后,接下来是在页面中调用,在 src/pages/index/index.js 中有如下代码:

 

代码中首先引入了 labrador 库替换全局的默认 wx 对象,并使用 labrador.createPage 方法代替全局的 Page 函数声明页面。然后加载 List 组件类,在页面声明配置中,增加了 components 属性,并将 List 组件类实例化传入。labrador.createPage 方法是对 Page 方法的一层封装,目的是在页面初始化时和组件对象进行关联。

 

在 src/pages/index/index.less 中加入代码 @import ‘list’ 即可调用 list 组件的样式,如果在 src/components/list 中找不到 list.less,那么编译命令将在 NPM 包中寻找 node_modules/list/index.less 。

 

在 src/pages/index/index.xml 中加入代码即可调用list组件的模板文件,component 是 Labrador 自定义的组件,编译后对应生成 import 和 template。如果在 src/components/list 中找不到 list.xml,那么编译命令将在 NPM 包中寻找 node_modules/list/index.xml

 

 

当然,具体的体验还需要你亲自动手才行!

这里有你想要的,我们懂你不懂的

长按关注获取更多

107阅读 | 0评论
你的回应