商丘做网站,商丘网站优化,商丘网络推广,商丘网络公司
当前位置:首页 > 新闻资讯 > 网站运营 >

许昌建站优化:两个实战案例后 我总结了高效编写微信小程序的

发表日期:2018-04-20 10:38聚圣源浏览次数: 本文关键词:微信小程序,两个实战案例

  何六六:微信小程序是一个工程,就和盖房子一样,打好了地基,才能保证后续工程师建立在可靠牢固的基础上。笔者需要经常新建项目,每次都要重复“修改项目结构 -> 从老项目中复制粘贴文件 -> 删除一些老项目中代码”这样的过程,实在费心费力。如何高效编写微信小程序呢?来看腾讯工程师总结的这个方法!

  另一个痛点是:每次新建小程序页面要生成三个文件名相同的文件 ( .wxml、.wxss 和 .js ),命令行太长(据微信同事:也可以在 app.json 的 pages 字段下添加新页面的路径,保存后也会生成对应的文件)。

  

许昌建站优化:两个实战案例后 我总结了高效编写微信小程序的

 

  因此,阅读本文需要对小程序开发稍有了解(简易教程指路)

  目标

  我们现在有两个目标:

  根据通用模板新建项目

  一键新建页面目录以及在目录中的三个文件 :.wxml、 .wxss 和 .js也可以直接在 app.json 的 pages 字段创建页面,保存后生成这三个文件。笔者没有采用这个方法的缘由一个是开始时不知道有此功能,另一个是不合平时的操作习惯,再者想到 js 文件初始化后,需要引入常用库,要插入代码片段,所以保留了这个功能。

  这两个需求其实很简单,不需要 GUI,所以我们可以做一个 npm 命令行工具。想象一下这个命令行用起来应该是什么样的呢:

  

许昌建站优化:两个实战案例后 我总结了高效编写微信小程序的

 

  用流程图示意就是:

  

许昌建站优化:两个实战案例后 我总结了高效编写微信小程序的

 

  实现

  正式开始之前,请先确认本地的开发环境,笔者的本地环境是:

  

许昌建站优化:两个实战案例后 我总结了高效编写微信小程序的

 

  我们把问题分解为三步:

  实现命令行工具,可以在任意目录直接运行

  通过输入不同的命令行参数,以执行不同的功能

  考虑项目模板的存放位置,是集成到工具中,还是和工具分开呢

  不用担心,都很容易解决,我们一个个看。

  命令行工具

  package.json 中有一个字段是 bin:

  

许昌建站优化:两个实战案例后 我总结了高效编写微信小程序的

 

  这个字段可以将开发者希望执行的脚本注册到环境变量 (PATH) 中,不同的 key 对应执行不同的脚本。也就是说现在,当我们直接在命令行中执行:

  

许昌建站优化:两个实战案例后 我总结了高效编写微信小程序的

 

  等价于在 terminal 中执行:

  

许昌建站优化:两个实战案例后 我总结了高效编写微信小程序的

 

  第一个问题轻松解决,关于 bin 字段更多信息请参考 npm 文档中 package.json 一节。

  命令行参数

  执行 index.js 时,可以通过 process.argv 获取执行时的参数,但是要从参数数组中拆分出参数无疑很麻烦。不过,npm 发展至今,处理命令行参数的库肯定存在,就是 commander。简单好用易上手,那么第二个问题也解决啦。

  

许昌建站优化:两个实战案例后 我总结了高效编写微信小程序的

 

  项目模板的存放位置

  考虑项目模板的存放位置,是集成到工具中,还是和工具分开呢?

  笔者选择分开管理。

  在一个单独的模板代码仓库中管理模板内容,许昌方便我们维护。目前的模板还比较简单(详见下文“模板详解”),只有标准目录结构,预期后面会加上自动化的部分(比如 less -> wxss),所以未来会改动比较频繁。

  download-git-repo 可以把给定地址的仓库内容拷贝到执行目录中。API 简单,所以就是它了。

  问题都解决了,现在就让我们看看伪代码(注意:伪码中没有考虑出错情况):

  

许昌建站优化:两个实战案例后 我总结了高效编写微信小程序的
许昌建站优化:两个实战案例后 我总结了高效编写微信小程序的

 

  使用

  在编写好了这个工具之后,只需要在本地全局使用的话:

  

许昌建站优化:两个实战案例后 我总结了高效编写微信小程序的

 

  在本地开发过程中,如果更新了开发版本的代码,需要更新同步到全局,这时候需要执行:

  

许昌建站优化:两个实战案例后 我总结了高效编写微信小程序的

 

  就会看到安装到环境变量中的工具目录地址已经和开发目录关联起来了:

  

许昌建站优化:两个实战案例后 我总结了高效编写微信小程序的

 

  使用起来是这样的:

  

许昌建站优化:两个实战案例后 我总结了高效编写微信小程序的

 

  △ 模板和插件地址将附在参考资料一节中

  发布 npm 插件

  如果和笔者一样,希望在多个机器上使用这个工具,可以选择发布到 npm 官网上。发布步骤非常简单,基本上就是:

  

许昌建站优化:两个实战案例后 我总结了高效编写微信小程序的

 

  不过笔者考虑到,项目模板毕竟是因人而异的东西,所以选择了发布 scope package,也就是在插件的 package.json 中的 name 字段使用 @scopeName/wxapp-generator 这样的值。

  如果你也有类似的想法,并且也是个 npm 免费用户,那么发布的时候要执行:

  

许昌建站优化:两个实战案例后 我总结了高效编写微信小程序的

 

  scope 对使用没有任何影响,但是安装的时候要记得带上 scope name 执行:

  

许昌建站优化:两个实战案例后 我总结了高效编写微信小程序的

 

  模板详解

  一千个人中有一千种项目模板。根据业务/个人爱好不同,大家的项目模板可能也相去甚远。笔者自觉目前的模板用起来还不错,将在这一节介绍一下。以下是项目的文件结构:

  

许昌建站优化:两个实战案例后 我总结了高效编写微信小程序的

 

  之所以采用这样的结构,是希望尽可能解耦 UI 逻辑与业务逻辑。但是由于完全解耦是不可能的,基本思路是单纯的“变量分离”。通常 UI 的改变是通过 class 的切换或者内联样式的调整,所以笔者的思路,是将“要切换的 class”或者“要调整的内联样式”作为变量,由于大部分情况下业务逻辑和 UI 变化是联动的,通过抽离出来的变量,实现在业务逻辑中简单直白地改变 UI。

  可能看到这里,读者会有些困惑,那让我们直接以「企鹅听书」为例,具象地看看笔者是怎么做的吧。听书的界面会出现变化的时以下两种场景:

  一共有两种播放器:minibar 和 全屏的播放器,播放器的播放按钮有“播放”和“暂停”两种状态(图片)切换,这个可以通过 class 来控制。

  当播放器进入全屏模式后,节目列表将被隐藏;点击箭头以后,节目列表将重新显示出来。

  上文的文件结构中的 view.js 就是 UI 逻辑的代码。pages/ 目录中的 js 文件将通过 import 引用 view.js,view.js 中的接口分为“通用”和“页面使用”这两个类型:

  

许昌建站优化:两个实战案例后 我总结了高效编写微信小程序的

 

  如果未来出现更多 UI 变化的场景,可以再通过变量添加上去,比如 pageView.id。

  举个超级简单的例子(如下),模拟工作流程:

  

许昌建站优化:两个实战案例后 我总结了高效编写微信小程序的

 

  在 wxss 中定义好控制不同样式的 class

  将需要变化的 class 写到 view.js 中,并暴露接口

  在 wxml 中的对应结构中绑定 event handler

  在对应的 page.js 里实现 event handler 的具体内容,也就是切换 class 的触发条件

  

许昌建站优化:两个实战案例后 我总结了高效编写微信小程序的

 

  老司机一看就知道是 MVVC 模式,这样分离也就是为了 UI 有独立的控制器,不至于和业务逻辑耦合严重,在页面开发的阶段就可以完成 UI 上的变化。从这个角度上看,小程序反而能给 UI 工程师更多控制 UI 逻辑的能力,确定好代码规范和接口。

  总结

  初始化一个项目是开始编码的第一步,值得多花一些时间找到合适团队合适自己的项目模板。

  结束之前,先允许笔者打一个广告,企鹅 FM 有两个小程序:致敬传统电台,听广播节目的「小电台」;听有声小说专用的「企鹅听书」。以及轻量版的「微云」。大家可以扫码体验。性能的优化和功能的完善也在一步步迭代中,希望大家多多使用多多反馈意见~ 比心

如没特殊注明,文章均来自网络! 转载请注明来自:http://www.jushengyuan.com.cn/news/wzyy/2537.html

网站设计案例推荐

热门文章

站长平台官网认证的实战经验之...

快速通过百度、360、搜狗站长平台内的官网认证,技巧和方法及工具。帮助您解决眼前的难题!...

日期:2018-04-03 浏览次数:1844

一个产品运营的自白:什么是运...

你拿到了第一份工作,一家名不见经传的小厂,入职的时候听着上司和老板的宏大蓝图,你信心满满,相信自己的才高八斗聪明绝顶,定能将这份工作做得有声有色。...

日期:2018-03-01 浏览次数:954

南阳网络推广:Airbnb从失败到成...

跟大多数创业公司一样,Airbnb已经成立一段时间了,但还没有人注意到他们。整个公司的营业收入,每周都只是在200美元的水平上徘徊,而且三个创始人还要分这么一丁点钱、靠这笔钱生活。...

日期:2018-04-23 浏览次数:935

今日最热的20篇文章中你能学点...

在新榜,一个整合微信公众号文章数据信息的平台上,我们抽取了最近的科技热门发布文章,于是在截止2015年12月28日下午五点的时间内,前20篇的热门文章中我们发现了9篇与手机行业相关,其...

日期:2018-04-07 浏览次数:925

开封seo:商家如何防止刷单被骗...

在上述域名中,红色字体的部分是一级域名,蓝色字体+红色字体是二级域名,绿色字体+蓝色字体+红色字体是三级域名。想要仿照淘宝,其中只需要做一个类似于上述的三级域名。...

日期:2018-04-20 浏览次数:922

相关文章

三门峡做网站:被遗忘的利益,...

在12.28的公开课上,张小龙分享了很多条小程序的关键形态和规则,其中的几点诸如入口支持、场景举例、功能案例的说明,让小程序有了更具象的描述,也是对小程序的规范做了指引。...

日期:2018-04-20 浏览次数:721

随机推荐

一个90后运营“菜鸟”的逆袭:...

从“支付宝故障”说起:我们的...

如何快速成为一个自媒体明星...

1月19至25日聚圣源域名拍卖行情...

中国门户网站的崛起是因为“制...

APP生存之道:如何抓住用户的心...