`
郭丶小川
  • 浏览: 33917 次
社区版块
存档分类
最新评论

高效编写微信小程序

阅读更多
微信小程序是一个工程,就和盖房子一样,打好了地基,才能保证后续工程师建立在可靠牢固的基础上。

笔者需要经常新建项目,每次都要重复“修改项目结构 -> 从老项目中复制粘贴文件 -> 删除一些老项目中代码”这样的过程,实在是…费心费力。

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

目标

我们现在有两个目标:

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

这两个需求其实很简单,不需要 GUI,所以我们可以做一个 npm 命令行工具。想象一下这个命令行用起来应该是什么样的呢:
~ npm install wxapp -g
~ wxapp -i myapp && cd myapp
~ wxapp -p list
复制代码
用流程图示意就是:

实现

正式开始之前,请先确认本地的开发环境 ,笔者的本地环境是:
~ npm -v
3.10.10
~ node -v
v6.9.4
复制代码
我们把问题分解为三步:

    实现命令行工具,可以在任意目录直接运行
    通过输入不同的命令行参数,以执行不同的功能
    考虑项目模板的存放位置,是集成到工具中,还是和工具分开呢

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

命令行工具

package.json 中有一个字段是 bin :
{
    ...
    "bin": {
        "mywxapp": "./index.js"
    }
}
复制代码
这个字段可以将开发者希望执行的脚本注册到环境变量 (PATH) 中,不同的 key 对应执行不同的脚本。也就是说现在,当我们直接在命令行中执行:
~ mywxapp
复制代码
等价于在 terminal 中执行:
~ /path/to/index.js
复制代码

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

命令行参数

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

项目模板的存放位置

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

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

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

问题都解决了,现在就让我们看看伪代码 (注意:伪码中没有考虑出错情况) :
const mkdirp = require('mkdirp');
const download = require('download-git-repo');

// 创建项目
function initProj(projName){
  if(currentDir.exsits(projName))
    console.warn(projName + '项目已经存在于当前目录中,请使用别的名字');
  else
    download('path/to/tmpl', currentDir+'/'+projName);
}

// 注册页面
function registerPage(pagesName) {
  // 读配置文件
  readFile(configFile, function(data){
    // 将新建的所有页面都写入配置文件中
    for(name in pagesName){
      data.pages.push('pages/' + name + '/' + name);
    }
    writeFile(configFile);
  });
}

// 创建页面
function createPage(pages) {
  for(var index in pages) {
    var page = pages[index];
    mkdirp(pagePath, function(){
      createFile(page+'.wxml');
      createFile(page+'.wxss');
      createFile(page+'.js');
    })
  }
 
  // 将页面注册到 app.json 中
  registerPage(pages);
}
复制代码
使用

在编写好了这个工具之后,只需要在 本地全局使用 的话:
npm install -g
复制代码
在本地开发过程中,如果更新了开发版本的代码,需要更新同步到全局,这时候需要执行:
npm link
复制代码
就会看到安装到环境变量中的工具目录地址已经和开发目录关联起来了:
~/Documents/kmokidd/cli-build$ npm link
/usr/local/bin/wxapp -> /usr/local/lib/node_modules/@kmokidd/wxapp-generator/index.js
/usr/local/bin/node_modules/@kmokidd/wxapp-generator -> /Users/kmokidd/Documents/kmokidd/cli-build/index.js
复制代码
使用起来是这样的:

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


发布 npm 插件

如果和笔者一样,希望在多个机器上使用这个工具,可以选择发布到 npm 官网上。发布步骤非常简单,基本上就是:
npm login
npm publish
复制代码
过笔者考虑到,项目模板毕竟是因人而异的东西,所以选择了发布 scope package,也就是在插件的 package.json 中的 name 字段使用 @scopeName/wxapp-generator 这样的值。

如果你也有类似的想法,并且也是个 npm 免费用户,那么发布的时候要执行:
npm publish --access public
复制代码
scope 对使用没有任何影响,但是安装的时候要记得带上 scope name 执行:
npm install @scopeName/wxapp-generator -g
复制代码
模板详解

一千个人中有一千种项目模板。根据业务/个人爱好不同,大家的项目模板可能也相去甚远。笔者自觉目前的模板用起来还不错,将在这一节介绍一下。以下是项目的文件结构:
wxapp
├── app.js
├── app.json
├── app.wxss
├── base-styles/
├── images/
├── pages/
│   ├── tmpl/
├── utils /
│   ├── view.js
│   ├── util.js
│   ├── polyfiil.js
└── └── Deferred.js
复制代码
之所以采用这样的结构,是希望尽可能解耦 UI 逻辑与业务逻辑。但是由于完全解耦是不可能的,基本思路是单纯的“变量分离”。通常 UI 的改变是通过 class 的切换或者内联样式的调整,所以笔者的思路,是将“要切换的 class”或者“要调整的内联样式”作为变量,由于大部分情况下业务逻辑和 UI 变化是联动的,通过抽离出来的变量,实现在业务逻辑中简单直白地改变 UI。

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

    一共有两种播放器:minibar 和 全屏的播放器, 播放器的播放按钮 有“播放”和“暂停”两种状态(图片)切换,这个 可以通过 class 来控制 。
    当播放器进入全屏模式后, 节目列表将被隐藏 ;点击箭头以后,节目列表将 重新显示出来 。

上文的文件结构中的 view.js 就是 UI 逻辑的代码。pages/ 目录中的 js 文件将通过 import 引用 view.js,view.js 中的接口分为“通用”和“页面使用”这两个类型:
module.exports = {
  // 通用
  general: {
    hide: 'hide', // 变量分离在此
    show: 'show'
  },
  // 播放器页面
  playerView : {
    class: {
        listItemPlaying: 'playing'
    }
  }
  // 其他页面如果也有需要,以页面为单位添加...
}
复制代码
如果未来出现更多 UI 变化的场景,可以再通过变量添加上去,比如 pageView.id 。

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

在 wxss 中定义好控制不同样式的 class
将需要变化的 class 写到 view.js 中,并暴露接口
在 wxml 中的对应结构中绑定 event handler
在对应的 page.js 里实现 event handler 的具体内容,也就是切换 class 的触发条件

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

总结

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

相关推荐

    net开发的微信小程序实例,net开发的微信小程序实例

    在本文中,我们将深入探讨如何使用.NET框架进行微信小程序的开发。微信小程序是一种轻量级的应用形式,可以在微信内直接运行,无需用户下载安装,极大地提升了用户体验。通过.NET技术,开发者可以利用C#等语言的强大...

    微信小程序Go、微信小程序OpenCV。.zip

    微信小程序是一种轻量级的应用开发平台,主要针对移动端,尤其是智能手机。它允许开发者在无需安装应用的情况下,通过微信内置浏览器运行应用程序。Go语言和OpenCV是两个不同的技术领域,但在这个场景下,它们被整合...

    微信小程序游戏源码-小游戏

    微信小程序的开发环境包括微信开发者工具,它提供了调试、预览、发布等一系列功能,使得开发者可以方便地进行代码编写、界面设计和性能优化。对于初学者来说,微信小程序的API接口相对直观,学习曲线较为平缓,尤其...

    Java后端微信小程序视频教程

    【Java后端微信小程序视频教程】是一门针对Java开发者,旨在教授如何利用Java技术与微信小程序进行交互的课程。这门教程深入浅出地讲解了Java在构建微信小程序后端服务中的应用,让开发者能够掌握从服务器端处理数据...

    微信小程序拼图验证demo旨在解微信小程序滑动卡顿问题

    7. **动画优化**:使用微信小程序提供的动画API,而非手动修改样式,因为它们会被编译为更高效的原生动画。 8. **事件处理**:尽量减少事件监听器,避免在循环中添加事件,合理组织事件冒泡和阻止冒泡,以降低事件...

    100个微信小程序实例

    本资源“100个微信小程序实例”包含了一系列真实的微信小程序项目,是学习和掌握微信小程序开发的宝贵资料。 这些实例覆盖了各种应用场景,包括但不限于电商、社交、生活服务、工具、游戏等类别。通过学习这些实例...

    知晓课堂 微信小程序设计

    在IT行业中,微信小程序是一种备受关注的技术,尤其对于移动端应用开发者而言。微信小程序设计是将传统的应用程序体验融入到微信这个超级应用平台中的一个重要途径。它提供了轻量级、快速加载和易于分享的功能,使得...

    Python 开发者的微信小程序开发实践.pdf

    【Python 开发者的微信小程序开发实践】 在当前的互联网应用领域,微信...通过以上这些知识点的学习和实践,Python开发者可以顺利地参与到微信小程序的开发中,利用Python的强大力量,为小程序提供高效、稳定的服务。

    微信小程序源码

    微信小程序源码是一种基于微信平台开发的应用程序框架,它允许开发者使用JavaScript、WXML(微信小程序标记语言)和WXSS(微信小程序样式语言)来构建功能丰富的轻量级应用。这款商城微信小程序源码,结合PHP后台,...

    微信小程序实战入门内含完整实例解析,微信小程序开发实战答案,HTML

    工具内置了编辑器,支持编写WXML(微信小程序的结构层语言)和WXSS(微信小程序的样式层语言),同时集成了实时预览、模拟器、真机调试等功能,帮助开发者高效地完成小程序的开发工作。 WXML类似于HTML,用于定义小...

    微信小程序云开发小程序源码.zip

    通过分析这些源码,你可以深入理解微信小程序如何与云开发服务交互,学习如何使用云数据库进行数据管理,如何编写云函数以实现特定业务逻辑,以及如何高效地上传和下载文件。此外,还可以研究其结构设计,优化用户...

    yolov5/v6.0微信小程序前端代码

    在微信小程序端,前端开发人员需要编写代码来处理与服务器的通信,发送图片数据到服务器进行检测,并接收返回的检测结果。这涉及到WebSocket或者Ajax请求的使用,以及图像处理和数据显示的相关技术。需要注意的是,...

    仿京东购物微信小程序

    - **微信开发者工具**:这是腾讯提供的专门用于微信小程序开发的集成环境,提供了代码编辑、预览、调试和发布等一系列功能,帮助开发者高效完成小程序的开发工作。 - **WXML(Weixin Markup Language)**:微信小...

    微信小程序开发所要的jar包(基于SSM).rar

    总之,这个基于SSM的jar包集合是微信小程序后端开发的基础,它为开发者提供了构建高效、稳定且功能丰富的服务端平台的工具。通过熟练掌握这些技术和工具,开发者可以更好地满足微信小程序在数据处理、用户体验和安全...

    微信小程序 实例汇总 完整项目源代码

    微信小程序是一种轻量级的应用开发平台,由腾讯公司推出,主要应用于移动端,为用户提供便捷的、无需下载安装即可使用的线上服务。本实例汇总包含了多个微信小程序的完整项目源代码,旨在帮助开发者深入理解和实践...

    .NET Core商场微信小程序系统的设计与实现

    利用微信开发者工具,结合WXML和WXSS编写用户界面,调用微信小程序API实现页面跳转和数据请求。 5.2 后端开发 使用.NET Core构建API服务,处理前端请求,执行业务逻辑,通过MySQL数据库存储和检索数据。 5.3 安全...

    微信小程序-实现瀑布流布局demo源代码

    2. 开发环境:微信web开发者工具 v0.11.112301是进行微信小程序开发的官方工具,它提供了代码编辑、预览、调试等功能,帮助开发者高效地构建和测试小程序。 在实现无限下拉加载时,通常会在`js`文件中设置一个状态...

Global site tag (gtag.js) - Google Analytics