微信小程序的封装，开箱即用（微信小程序 封装）

微信小程序的封装，开箱即用（微信小程序 封装）

小程序框架的简单封装

！不允许修改 frame 文件夹里的文件

解决的问题

app onLaunch 等周期函数以及登录请求和 page 的周期函数的执行是异步的，导致两者不能衔接的问题page 周期函数中 返回页面和进入页面以及挂起后重回页面 onshow 周期函数无法区分的问题第三方埋点操作侵入性过强的问题

App.ready - Promise

一个 Promise 实例，成功表示登录流程和初始信息加载流程完成；一般不需要显式调用，新增的onCreated和onForward生命周期函数在内部使用该 Promise 实例

Frame

用于初始化注入，并返回 Main 函数

import Frame from './frame/index';const Main = Frame({ env, init: res => {}, loginToSite: data => {},});Main({});

注入 env, 详见 env注入 init 方法，非必填： App 登录之后需要执行的初始操作； 一般可以在这里做初始信息加载等操作； 每次启动app，该方法都会执行，如果没有登录，该方法会在登录后执行，并接收登录接口的结果作为参数； 返回一个 Promise 实例；注入登录到服务器 loginToSite 方法，非必填： 返回一个 promise 实例；该方法会接收到一个参数：

data = { code, encrypted_data, // 授权后才会有 iv, // 授权后才会有}

Main

对 App 函数的封装

添加的功能函数

methodCaptured: page实例或component实例中任何函数的执行都会触发该函数的执行，并传递参数到该函数，不包含生命周期函数； 该函数可以实现代码无侵入埋点等操作

options = { is, // page 或者 component 的 is 属性 name, // 函数名 event, // 事件对象 result, // 函数执行的返回值 instance, // page 或者 component 实例}

App.Page - Method

对 Page 函数的封装

App.Page({});

删除的生命周期函数

onLoadonShow

添加的生命周期函数

onCreated: 在内部调用 App.ready，替代 onLoad，App.ready流程完毕后触发，onCreated(query, res) {}onAppear: 替代 onShow，如果想有和onCreated一样的触发时机，则可以使用 App.ready 实例onForward: 在内部调用 App.ready，页面进入并显示时触发，App.ready流程完毕后触发，onForward(res) {}onBackward: 返回到当前页面并显示时触发onReappear: 切换到后台又恢复显示时触发

注：其他配置和原框架一致

App.Comp - Method

对 Component 函数的封装，组件需使用 lifetimes 字段来管理生命周期，写在外部的生命周期函数将不起作用，根据微信小程序设计，Component 函数也可以用于实例化页面，用于替代 Page 函数

App.Comp({});

Network

以下方法都进行了 promisify ，除了 App.FC ，其他方法都在 promise 实例上挂载了 task 对象

App.FC - Object

小程序请求接口的封装，用法类似 axios，提供-和默认设置等操作

const FC = App.FC;FC.defaults = {};// -支持链式调用// middleware: async function | common function | common function with promise// reqWall callback 参数为 options 请求配置，并且需要返回 options// resWall callback 参数为 res 请求结果，并且需要返回 res// callback 返回为 promise 时，promise 的 resolve 必须相应的传递 options 或 res// callback 绑定了请求实例FC.reqWall .add(middleware) .remove(middleware)FC.resWall .add(middleware) .remove(middleware)FC.fetch(options);const ins = FC.create(defaults);ins.defaults = {}; // 会覆盖 create 方法里的 defaultsins.reqWall .add(middleware) .remove(middleware)ins.resWall .add(middleware) .remove(middleware)ins.fetch(options);// 选项options = { baseURL: '', url: '', data: Object.create(null), header: Object.create(null), method: 'GET', dataType: 'json', responseType: 'text', validateStatus: status => status >= 200 && status < 300 || status === 304,};

App.DL - Method

小程序-接口的封装

App.UL - Method

小程序上传接口的封装

App.WS - Method

小程序双工通讯接口的封装

env

STORE_KEY: '', // 存储app信息的 localStorege keyBASE_TOKEN: '', // 基础 tokenLOGIN_URL: '', // 登录到站点的urlLOGIN_TYPE: '', // 登录类型 smart | auth | silent 默认 smartINDEX_ROUTE: '', // 主页路径，没有前置/，默认 pages/index/indexCHECK_SESSION_TYPE: '', // 检测session的方式 api | store 默认 apiNAV_BAR_MODE: '', // 自定义组件nav-bar模式 dark | light 默认 dark

store

app.store 相当于 app.globalData

默认有：

systemInfo, // wx.getSystemInfoSync 的结果navBarInfo, // 导航栏相关布局信息userInfo, // 默认为空对象

Login

在 config 文件里配置登录类型，除 login 方法外的其他三个方法已挂载到 app 实例上

authLogin: 授权登录，只有授权后才会调用登录流程，并获取用户微信信息silentLogin: 静默登录，不需要用户授权，执行静默登录smartLogin: 兼容登录，授权情况下，调用 authLogin，没有授权，调用 silentLoginlogin: 该方法在内部调用，做了是否登录的判断。通过 config 来配置登录方式 (smart | auth | silent)，并默认调用 smart

登录注意

自定义登陆态下，当前页面请求时，session_key 过期，则会重新登录并重新加载页面在做授权登录时，如果需要自行调用上述三个登录函数，则需要按照下面的方式操作：

App.ready = app.authLogin(); // or App.ready = app.silentLogin(); // or App.ready = app.smartLogin(); App.ready .then() .catch();

Methods

各种工具函数，已挂载到 app 实例上

// 操作 querystringqs parse stringify// 操作 localStoragelocal get set remove clear// 操作 localStorage 存储里的某一个 keylocalKey get set remove// 操作 localStorage 存储里的 access_tokensession get set removestoreCheckSession, // 基于是否存储 token 判断是否过期apiCheckSession, // 基于 wx.checkSession 接口判断 token 是否过期checkSession, // 上两个方法的封装updateApp, // 更新appgetSystemInfo, // 获取系统信息getPage, // 获取当前pagerpx2px, // rpx 转换到 pxgetUserInfo, // promisify 'wx.getUserInfo' apicheckAuth, // promisify 权限鉴定loginToWx, // promisify 登陆到 微信服务器loginToSite, // promisify 登陆到自家服务器

内部组件

以下两个组件均已添加到全局组件

nav-bar: 自定义导航组件

注：请自行设置不使用原生导航

@props title // 非必填，标题@props color // 非必填，标题颜色@props background // 非必填，导航栏背景@props fill // 非必填，是否占据空间@props back // 非必填，是否显示 back 按钮@props home // 非必填，是否显示 home 按钮@props mode // 非必填，按钮样式，dark | light

user-info: 授权 getUserInfo 组件

注意

登录流程和初始信息加载流程在 App 启动时，只会执行一次，因此除了初始显式的页面，其他页面的 onCreated 等有类似启动时机的周期函数将会很快被执行，因此无需担心新的周期函数会增加页面打开时间；对于全局数据，建议只在app启动时调用一次获取接口，并把数据放到全局数据中，然后其他接口更新相关数据后，也一并更新全局数据即可，好处是不需要每个页面都要获取数据，加快页面显示；

ChangeLog

最新的微信小程序支持增强编译，因此去掉了 runtime 对 async function, Promise.prototype.finally 的原有支持。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。