用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实用组件/插件 查看内容

微信小程序组件化开发框架wepy命令行管理工具

天下雪 2017-5-2 00:00

作者:ru xu,来自原文地址基础描述微信小程序分为app 实例和page实例分别通过 app() page() 调用。组成:一个app , 有 json js wxss文件组成。多个page, 有 js wxml wxss json 组成。数据流小程序 分为逻辑层和视图 ...

作者:ru xu,来自原文地址

基础描述

微信小程序分为app 实例和page实例 
分别通过 app() page() 调用。 
组成:

  • 一个app , 有 json js wxss文件组成。
  • 多个page, 有 js wxml wxss json 组成。

数据流

小程序 分为逻辑层和视图层。 逻辑层用来处理数据和方面。 视图层用来做展现。 逻辑层用setData来更新视图层。 视图层通过事件来驱动逻辑层。

页面生命周期 vs app生命周期

页面的生命周期

 * onload : 页面加载  只调用一次
* onReady: 页面初次渲染完成。
* onshow  页面显示,每次打开页面都会调用
* onHide:  页面隐藏,当navigateTo或底部tab切换时调用
* onUnload: 页面卸载。 页面出栈

server端刚开始时 先加载页面,然后调用onshow 服务端等待。 前端发来通知我要数据,发送数据给前端页面渲染。 渲染完成。前端发来通知 ,我好了。 server端把状态改为onReady状态。这时候可以通过setData来修改前端页面了。

路由

小程序维护了一个页面栈,类似于浏览器的location push 栈。

  • 当初始化新app时,第一个页面 onload onshow 然后入栈。
  • to到一个新页面,只有新页面打开(onload onshow)
  • 重定向, 旧的页面出来,新的页面进去。 旧(onHide) 新 (onload onshow)
  • 返回, 就的页面出来,新的页面展示。旧(onHide)新(onshow)
  • tab切换。 所有页面出栈,

项目架构

根据前面的描述,微信只希望有一个app, 然后下面有很多page这样的结构,然后将这个文件传到微信端,发布。

但是我们开发的时候,

  • 对于不能用组件化复用的 ?
  • 数据难管理的 ?
  • 不能用npm 第三方库的 ?
  • es6 呢?
  • 不能用scss,
  • 模块化?
  • 生产环境和开发环境不一致的问题?
wzf ?

分析其他人的项目

1 组件化– wepy


特性

  • 支持 vue开发
  • 支持自定义组件
  • 支持 npm
  • 支持 es6 
    ….

对所有东西都重新封装了一遍。 
写了很多方法,将依次对各个方法进行分析下

构建

wepy-cli 是wepy的构建工具。 通过babel编译的,命令行。

github地址:https://github.com/hxw319726/wepy-cli

分析

wepy.js
// 脚手架的入口,主要做了这几件事
// 生成一个目录,下面拼了package.json ,
// 将template的文件拷贝到当前文件。
// 然后, 用command 定义了很多命令。
compile.js
// 编译文件的入口
// 针对各个文件类型,有各种文件的 编译器。
compile-wpy.js
// 编译wpy文件 包含 app, page, component
// 将 wpy文件,解析成 ret={style: {}, template:{}, script:{}}
// 然后依次对各个模块调用不同的编译器。
compile-script.js
//
compile-style.js
// 获取对应的compiler 主要是
// 然后依次对各个模块调用不同的编译器。
// 比如下面文件。wepy-compiler-less 
// 如果有component 将component 的css import进来
// wepy-compiler-less 文件
// 引用 less 然后用less对sass文件进行render一遍,输出promise
import less from 'less';
import path from 'path';

export default function (content, config, file) {
return new Promise ((resolve, reject) => {
let opath = path.parse(file);
        config.paths = [opath.dir];

        less.render(content, config).then(res => {
            resolve(res.css);
        }).catch(reject);
    });
};
compile-template.js
//
// 然后依次对各个模块调用不同的编译器。

然后你就可用做以下事情了

  • 你可以用这个脚手架创建一个项目目录。包含了预加载的所有包。
  • 你可以用vue的风格写代码了。 会将一个wpy文件拆开分别用编译器进行编译。
  • 你可以用sass写样式了, less sass都经过less编译过了
  • 你可以用es6了,因为js都被babel编译过了
  • 你可以用组件化了。会将组建的内容插入。。
  • 支持加载外部NPM包。 在编译过程中会将require, 从node_modules当中拷贝出来

包装小程序代码分析

组要也就几个文件。 当我们创建page的时候需要

            class A extend Page{}
class B extend Component{} 
class C extend APP{}

这些都是在wepy的包里面实现的。

  • app.js 是实现了请求并发,并将除了事件之外的api都封装了一层promise
  • event.js 通过active字段判断是否活跃
  • base.js : 定义了createApp 和 createPage两个方法。 createPage方法 
    • 创建了一个page 实例
    • 在config 中是重新实现了onload onshow方法。
    • 将config的方法 和 page实例进行事件绑定。
  • page.js

2 redux

将redux重新写了一遍,然后引入到了微信中。

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏

相关阅读