介绍一款小程序增强开发工具 - EWA

lyfeyaj — Mon, 16 Jul 2018 20:20:06 +0800

EWA (微信小程序增强开发工具)

Enhanced Wechat App Development Toolkit (微信小程序增强开发工具)

项目地址：https://github.com/lyfeyaj/ewa，欢迎试用 ~

为什么开发这个工具？

厌倦了不停的对比 wepy 或者 mpvue 的特性，间歇性的踩雷，以及 code once, run everywhere 的幻想。只想给小程序开发插上效率的翅膀 ~

功能特性

async/await 支持
Javascript ES2017 语法
原生小程序所有功能
微信接口 Promise 化
支持安装 NPM 包
支持 SCSS 以及小于 16k 的 background-image
支持 source map, 方便调试
添加新页面或新组件无需重启编译
允许自定义编译流程

更多特性正在赶来 ... 敬请期待 👇

LESS 支持
可跨项目复用的小程序组件或页面（通过 NPM 包管理）
Redux 支持
Mixin 支持

安装

需要 node 版本 >= 8

npm i -g ewa-cli 或者 yarn global add ewa-cli

如何使用

创建新项目

ewa new your_project_name

集成到现有小程序项目，仅支持小程序原生开发项目转换

注意：使用此方法，请务必对项目代码做好备份！！！

cd your_project_dir && ewa init

启动

运行 npm start 即可启动实时编译

运行 npm run build 即可编译线上版本（相比实时编译而言，去除了 source map 并增加了代码压缩混淆等，体积更小）

上述命令运行成功后，可以看到本地多了个 dist 目录，这个目录里就是生成的小程序相关代码。

使用微信开发者工具选择 dist 目录打开，即可预览项目

目录结构

├── .ewa                         特殊占位目录，用于检查是否为 ewa 项目
├── dist                         小程序运行代码目录（该目录由ewa的start 或者 build指令自动编译生成，请不要直接修改该目录下的文件）
├── node_modules                 外部依赖库
├── src                          代码编写的目录（该目录为使用ewa后的开发目录）
│   ├── components               小程序组件目录
│   ├── pages                    小程序页面目录
│   │   ├── index
│   │   │   ├── index.js
│   │   │   ├── index.wxml
│   │   │   └── index.wxss
│   │   └── logs
│   │       ├── logs.js
│   │       ├── logs.json
│   │       ├── logs.wxml
│   │       └── logs.wxss
│   ├── templates                小程序模版目录
│   ├── utils
│   │   └── util.js
│   ├── app.js                   小程序入口文件
│   ├── app.json                 小程序全局配置文件
│   ├── app.wxss                 小程序全局样式文件
│   └── project.config.json      微信开发者工具小程序项目配置文件
├── ewa.config.js                ewa 配置文件
├── .gitignore
├── .eslintrc.js                 eslint 配置
└── package.json

微信接口 Promise 化

const { wx } = require('ewa');

Page({
  async onLoad() {
    let { data } = await wx.request({ url: 'http://your_api_endpoint' });
  }
})

配置

ewa 通过 ewa.config.js 来支持个性化配置。如下所示：

// ewa.config.js

module.exports = {
  // 公用代码库 (node_modules 打包生成的文件)名称，默认为 vendors.js
  commonModuleName: 'vendors.js',

  // 通用模块匹配模式，默认为 /[\\/]node_modules[\\/]/
  commonModulePattern: /[\\/]node_modules[\\/]/,

  // 是否简化路径，作用于 page 和 component，如 index/index.wxml=> index.wxml，默认为 false
  simplifyPath: false,

  // 文件夹快捷引用
  aliasDirs: [
    'apis',
    'assets',
    'constants',
    'utils'
  ],

  // 需要拷贝的文件类型
  copyFileTypes: [
    'png',
    'jpeg',
    'jpg',
    'gif',
    'svg',
    'ico'
  ],

  // webpack loader 规则
  rules: [],

  // webpack 插件
  plugins: [],

  // 嫌不够灵活？直接修改 webpack 配置
  webpack: function(config) {
    return config;
  }
};

常见问题 & Tips

wxss 中可以直接编写 scss 样式代码
可以使用 @ 来代替源代码根目录来引入代码或样式，如 const utils = require('@/utils/util')

一个处理短信发送及验证的 Gem - smart_sms

lyfeyaj — Thu, 08 May 2014 22:48:30 +0800

项目地址：https://github.com/lyfeyaj/smart_sms

从公司项目中抽出来的 gem, 方便自己以后的项目使用，也希望能帮到大家。

使用方法

结合 Rails 使用

在 Gemfile 里面添加：

gem 'smart_sms'

然后

bundle
rails g smart_sms:config
# 配置一下api_key, `config/initializers/smart_sms_config.rb`
SmartSMS.configure do |config|
  config.api_key = 'your_api_key'
end

最后

# 在现有的 model 中声明 `has_sms_verification`

class User < ActiveRecord::Base
  has_sms_verification # 默认使用字段 :phone, :verified_at, 可自定义指定, 例如, :mobile, :confirmed_at
end

于是

# 发送短信验证码
user.deliver # 将会生成一个随机的验证码发送至手机

# 查询历史短信记录
user.messages

# 查询是否已经验证
user.verified?

# 校验验证码
user.verify! '123456'

# 查询最新的一条有效短信记录
user.latest_message

基本用法 (不结合 Rails)

设置 api_key

SmartSMS.configure { |c| c.api_key = 'your_api_key' }

发送短信

SmartSMS.deliver 13522948742, 'SmartSMS WOW!'

详细文档

https://github.com/lyfeyaj/smart_sms

注

比较了很多家短信服务商，云片网络的服务比较完善，可以自定义短信模板，查询信息等，而且短信延迟很小，基本上 5s 左右能发送到手机。所以这个 gem 封装了云片网的所有短信功能，有兴趣的童鞋可以看下他们的API 文档

目前这个 gem 已经在公司项目的生产环境中，一切运行良好，放心使用 ^_^

---

lyfeyaj — Tue, 09 Jul 2013 11:09:00 +0800

lyfeyaj (Felix Liu)