react-hybrid最佳实践

基于react，webpack，apicloud同时构建ios，android，wap端的应用框架，根据不同打包命令，引用不同库文件，最终输出适合不同平台的应用

演示

下载项目后访问./dev/html/example.html

使用

安装依赖库

运行环境：Windows，（Linux和Mac需要修改package.json下scripts中设置环境变量的命令如：set NODE_ENV=release=>env NODE_ENV=release，以及脚本路径\\=>/

安装：nodejs

在项目根目录依次运行：

npm i cnpm -g

cnpm i

项目结构

bin：项目中所用相关脚本

buildHtml：webpack打包完成后，将html文件进行相关处理后（例如对js文件进行gzip）生成到输出目录

buildLib：脚本公共库

copyFiles：需要输出ios，android版本时，会运行该脚本，将输出目录release_app下的文件拷贝到APICLOUD项目目录中（需配置apicloud项目地址）

createPage：创新新页面时运行该脚本

输出目录：

dev：开发环境的输出目录

release0：发布环境的输出目录，使用配置config0.js

release1：发布环境的输出目录，使用配置config1.js

release_app：app的输出目录

src：代码文件

lib：基础库+基础组件

general：项目相关的公共样式，js文件，公共组件

page：页面目录

新建页面

规则：约定大于配置，由模块名_页面名组成

运行命令：npm run page user_login 登录 css

命令参数说明：

user_login：user：模块名，login：页面名

登录：页面标题

css：该页面是否需要样式文件

命令运行成功后，会在page目录下生成user_login目录，包含user_login.entry.js ，user_login.html，user_login.scss

项目调试

运行命令：npm run watch

命令运行成功后，会在根目录生成dev目录，该目录下html/中的文件即可在游览器中正常运行，当src目录中有文件被修改时，会实时更新到dev目录

项目发布

输出wap端：npm run release num

输出wap端gzip版本：npm run release-gzip num

输出app端：npm run release-app num

命令参数说明：

num：打包时所调用的src/general/common/js/config.js版本，如：1=>config1.js，会在根目录输出release1目录

gzip：需服务端开启相应配置支持

app端说明：

配置bin/copyFiles.js中newAppFilePath路径

命令执行完成后，提交newAppFilePath路径下apicloud项目至apicloud云端，云端打包输出android，ios安装包，注意：apicloud项目的config.xml需要修改入口文件<content src="html/项目入口文件名.html"/>

接口数据

测试接口数据：配置./src/general/js/common中TEST_DATA_CONFIG为true，测试接口act,op均为页面名，在./src/general/js/testData中添加相应数据即可

正式接口数据：配置./src/general/js/config中API_URL，修改common中请求方法即可

基础组件

详细文档见组件源码中用法示例

actionSheet：从下弹出的仿IOS选择器

apposeBtn：并排两个按钮

apposeFixedBtn：上浮并排两个按钮

blockBtn：块级按钮

blockInput：块状输入框，支持右侧带按钮

blockTitle：块级标题，如有子元素会自动缩进

bottomTab：底部tab

callEl：拨打电话组件（对wap端和app端做兼容）

checkBox：选择框

foldItem：折叠Item

inputWithBtn：左侧带标题，右侧带按钮的输入框

labelInput：文本组件，支持左侧带标题，右侧带箭头，是否为输入文本

loader：加载loading

mediaItem：图文组件

numBox ：数量选择框

poppicker：多级联动选择器，支持一二三级联动，应用场景如省市区选择器

radio：单选框

radioList：单选组

scroll：滚动组件

slider：轮播组件

tabBtnGroup：tab按钮组

topBar：顶部bar

基础库

base：base.app：打包app端时所运行的基础库，base：打包wap端时所运行的基础库， 详情见base文档

fiexible：实现适配的基础库，base中已引入，使用方法：编写样式时，使用pxToRem(px)替代px，如：font-size: pxToRem(14px);=>font-size: 14px;

loginSdk：第三方登录sdk，app端已实现微信登录，其他登录方式和wap端可拓展，保持参数及返回一致即可，使用方法见loginSdk源码示例

paySdk：第三方支付sdk，wap端已实现微信支付，其他支付方式和app端可拓展，保持参数一致即可，使用方法见paySdk源码示例

shareSdk：第三方分享sdk，app端已实现微信分享，其他分享方式和wap端可拓展，保持参数一致即可，使用方法见shareSdk源码示例

storage：本地数据管理基础库，已封装至base

timing：计时器工具，使用方法见timing源码示例

关于作者

设计模式之建造者模式

概述

  • 应用场景

  • 创建一些复杂的对象时，这些对象的内部组成构件间的建造顺序是稳定的，但是对象的内部组成构件面临着复杂的变化
  • 要创建的复杂对象的算法，独立于该对象的组成部分，也独立于组成部分的装配方法时

设计模式之抽象工厂模式

概述

  • 抽象工厂模式提供了一种方法，把那些拥有公共主题的工厂组合起来，并且在使用时不需要考虑他们生产的是哪个具体类的对象
  • 一个抽象工厂类，可以派生出多个具体工厂类，每个具体工厂类可以创建多个具体产品类的实例

more >>

Git使用详解

配置

  • 命令：git config，参数–global表示你这台机器上所有的Git仓库都会使用这个配置
    1
    2
    3
    git config --global user.name "Your Name"
    git config --global user.email "email@example.com"
    git config --global alias.co checkout #设置别名，如checkout别名为co

more >>

正则表达式在Js中的运用

RegExp对象

  • 直接量语法

    1
    /pattern/attributes

  • 创建RegExp对象

    1
    new RegExp(pattern, attributes)

  • 参数pattern可以是指定正则表达式模式的字符串，也可以直接是一个正则表达式

  • 参数attributes是一个可选的字符串，包含属性 g、i 和 m，分别用于指定全局匹配、区分大小写的匹配和多行匹配

more >>