微信小程序wepy框架快速入门

微信小程序简介

• 微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。它是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

• 小程序并非凭空冒出来的一个概念。当微信中的 WebView 逐渐成为移动 Web 的一个重要入口时，微信就有相关的 JS API 了。此类 API 最初是提供给腾讯内部一些业务使用，很多外部开发者发现了之后，依葫芦画瓢地使用了，逐渐成为微信中网页的事实标准。2015年初，微信发布了一整套网页开发工具包，称之为 JS-SDK，开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个API。给所有的 Web 开发者打开了一扇全新的窗户，让所有开发者都可以使用到微信的原生能力，去完成一些之前做不到或者难以做到的事情。

• JS-SDK 解决了移动网页能力不足的问题，通过暴露微信的接口使得 Web 开发者能够拥有更多的能力，然而在更多的能力之外，JS-SDK 的模式并没有解决使用移动网页遇到的体验不良的问题。用户在访问网页的时候，在浏览器开始显示之前都会有一个的白屏过程，在移动端，受限于设备性能和网络速度，白屏会更加明显。除了白屏，影响 Web 体验的问题还有缺少操作的反馈，主要表现在两个方面：页面切换的生硬和点击的迟滞感。微信面临的问题是如何设计一个比较好的系统，使得所有开发者在微信中都能获得比较好的体验。这个问题是之前的 JS-SDK 所处理不了的，需要一个全新的系统来完成，它需要使得所有的开发者都能做到：

  • 快速的加载

  • 更强大的能力

  • 原生的体验

  • 易用且安全的微信数据开放

  • 高效和简单的开发

  这就是小程序的由来

wepy框架介绍

一、原生框架简介

整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）

1. 场景值

   场景值用来描述用户进入小程序的路径。完整场景值的含义请查看场景值列表。
   由于Android系统限制，目前还无法获取到按 Home 键退出到桌面，然后从桌面再次进小程序的场景值，对于这种情况，会保留上一次的场景值。

   • 获取场景值

     开发者可以通过下列方式获取场景值：
     对于小程序，可以在 App 的 onLaunch 和 onShow，或wx.getLaunchOptionsSync 中获取上述场景值。

2. 逻辑层（App Service）

   小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。

   逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

   开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到小程序销毁。这一行为类似 ServiceWorker，所以逻辑层也称之为 App Service。

   在 JavaScript 的基础上，我们增加了一些功能，以方便小程序的开发：

   • 增加 App 和 Page 方法，进行程序注册和页面注册。
   • 增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
   • 提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
   • 提供模块化能力，每个页面有独立的作用域。
   • 注意：小程序框架的逻辑层并非运行在浏览器中，因此 JavaScript 在 web 中一些能力都无法使用，如window，document 等。

3. 视图层（View）

   框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

   将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

   WXML(WeiXin Markup language) 用于描述页面的结构。

   WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

   WXSS(WeiXin Style Sheet) 用于描述页面的样式。

   组件(Component)是视图的基本组成单元。

4. 原生小程序代码目录结构的分析
   小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

   一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

   文件	必需	作用
   app.js	是	小程序逻辑
   app.json	是	小程序公共配置
   app.wxss	否	小程序公共样式表

   一个小程序页面由四个文件组成，分别是：

   文件类型	必需	作用
   js	是	页面逻辑
   wxml	是	页面结构
   json	否	页面配置
   wxss	否	页面样式表

二、wepy框架简介

1. wepy的快速入门

   • wepy项目的创建与使用
     WePY的安装或更新都通过npm进行。

     全局安装或更新WePY命令行工具

       npm install wepy-cli -g
     

     在开发目录中生成Demo

       wepy new myproject# 1.7.0之后的版本使用 wepy init standard myproject 初始化项目，使用 wepy list 查看项目模板
     

     切换至项目目录

       cd myproject
     

     安装依赖

       npm  install
     

     开启实时编译

       wepy build --watch
     

   WePY框架在开发过程中参考了Vue等现有框架的一些语法风格和功能特性，对原生小程序的开发模式进行了再次封装，更贴近于MVVM架构模式。开发建议使用第三方成熟IDE或编辑器(具体请参看后文的代码高亮部分)，微信开发者工具仅用于实时预览和调试。文件后缀为.wpy，可共用Vue的高亮规则，但需要手动设置。

三、原生框架与wepy框架的对比

对比于原生框架

1. 开发模式转换

   引入了vue等现有的框架

2. 支持组件化开发

   见组件

3. 支持加载外部NPM包

   在编译过程当中，会递归遍历代码中的require然后将对应依赖文件从node_modules当中拷贝出来，并且修改require为相对路径

4. 单文件模式，目录结构更清晰，开发更方便

   原生小程序要求app实例必须有3个文件：app.js、app.json、app.wxss，而page页面则一般有4个文件：page.js、page.json、page.wxml、page.wxss，并且还要求app实例的3个文件以及page页面的4个文件除后缀名外必须同名。

   而在WePY中则使用了单文件模式，将原生小程序app实例的3个文件统一为app.wpy，page页面的4个文件统一为page.wpy

5. 默认使用babel编译，支持ES6/7的一些新特性

   用户可以通过修改wepy.config.js(老版本使用.wepyrc)配置文件，配置自己熟悉的babel环境进行开发。默认开启使用了一些新的特性如promise、async/await

6. 针对原生API进行优化

   对小程序原生API进行promise处理，同时修复了一些原生API的缺陷，比如：wx.request的并发问题等。
   一些不足以及开发中遇到的坑

7. 组件使用的是静态编译组件，即组件是在编译阶段编译进页面的，每个组件都是唯一的一个实例，目前只提供简单的 repeat 支持。不支持在 repeat 的组件中去使用 props, computed, watch 等等特性。即在使用repeat循环组件之后，能够传入值，但是对于值的处理和传出，永远是undefine。给类似于列表的组件开发带来极大的困难。

8. wepy build --watch命令其编译中语法要求与传统js有些不同，需要对vue的语法掌握较好，不然开发中困难较多。

总结

wepy框架总体来说相对于原生较为好用，将之前原生的各个文件整合到了一个文件上，利于编程和调试，但是话说回来，wepy中控件一直让人很无奈，最后要不需求其他工具，要不只能直接把控件源码嵌入页面里面，repeat确实有些bug