wxMiniProgramFrame

小程序开发框架:基于gulp构建工具+less (组件化开发参考了IviewUI) (小程序文档请参考https://developers.weixin.qq.com/miniprogram/dev/framework/)

Introduction

框架基本实现：

1. less的使用
2. 公共组件，公共样式（通过app全局设置pixelRatio变量实现@2x与@3x背景图的切换）
3. input的双向数据绑定(讨巧的方法)
4. token的续期
5. 请求的promise封装
6. aes加密
7. 配置文件

未实现功能：

1. 静默登录 ...

---

目录结构

wxMiniProgramFrame
|—— assets
    |—— image      //本地图片(通过配置文件可改为网络地址,小程序上传限制2.49m 推荐网络地址)
    |—— styles
|—— build           //gulp构建地址
|—— components      //公共组件
|—— config          //配置文件
|—— mixins          //公共方法(类似双向数据绑定的方法...)
|—— pages           //路由文件、业务代码
|—— services        //接口请求api
|—— utils           //公共方法(加密等..)
|—— .gitignore
|—— .app.js         //token的续期
|—— ...

使用

   # install dependencies 
   $ npm i # or npm install 

   # run 
   $ npm run dev

2. tips:在路由/组件同级文件加下直接创建.less文件，将自动创建wxss同级文件

小程序开发工具

1. 本地开发关闭https校验
2. 开启es5转换

需修改配置文件

1. config目录下 -- api.js

   const Config = require('./config.js');
   const erpUrl = "/api/web/business"; # 需修改为自己系统地址
   module.exports = {
    LoginUrl: Config.BASEURL + erpAuthUrl + '/oauth/token', #系统登录 需修改为自己系统地址

2. config目录下 -- config.js

    BASEURL:"https://xxxx.com", #需修改全局请求地址
    BASEIMG:"../../assets/image",  # BASEIMG:"http://img.xxx.com",可修改为网络地址

参考文档

小程序的input双向数据绑定

微信小程序 自定义头部导航栏 navigationStyle - 简书

小程序 组件 与 组件间的通信

小程序 request封装与静默登录

小程序登录+系统业务登录流程