小程序开发初体验
发布于 2 个月前 作者 Shasharoman 643 次浏览 来自 分享

小程序开发初体验

微信小程序出来已经有一段时间,自己由于工作繁忙以及一段时间未关注前端开发,迟迟没有学习小程序。

近期,受朋友独立制作的几款小程序启发,认为把小程序作为自己小想法的实现方式,是一个不错的选择,于是有了这篇小程序初体验。

注册小程序

先注册小程序,获取appId用于开发,注册过程主要依赖邮箱,步骤简单,可以参考官方文档

新建项目

注册成功后,下载微信开发者工具,填写项目路径、appId、名称,作为小白,记得勾选“快速启动模版”,官方文档

开发准备

经过上述两个步骤,进入开发准备环节。因有前端开发经验,所以上手没有大碍,主要是熟悉API和组件使用。

根据以往的开发经验,在小程序中主要关注以下几点:

  • 第三方库的引入

小程序的模块化,貌似遵循CMD规范。但在小程序框架内,引入的第三方库,部分功能可能受限,必要时需要手动修改第三方库

  • 官方API的异步回调

既不是callback,也不是Promise,“success、fail、complete”这种模式,在使用过程中,很难实现像Async或Promise那种异步流程组织(parallel、series、each、map等)

  • 目录划分

如果小程序业务复杂、页面众多,需要前期做好目录规划,着重考虑:模块化、分层、公共、共享、封装等

使用Promise

Promise,选择Node.js中使用过的bluebird,因为是针对“小”程序,下载core版本即可。

promisify

针对“success、fail、complete”模式的API,尝试promisify。鉴于官方API也经常更新,且有部分同步API,所以没有对所有API做promisify,而只是在使用时做动态promisify。

promisify代码:

// lib/promisify.js
const Promise = require('./bluebird');

module.exports = (api) => {
    return (options, ...params) => {
        return new Promise((resolve, reject) => {
            api(Object.assign({}, options, {
                success: resolve,
                fail: reject
            }), params);
        });
    };
};

使用时:

// app.js
const promisify = require('./lib/promisify');

App({
    onLaunch: function () {
        return promisify(wx.request)({
            ...
        });
    }
});

部分二次封装

开发小程序过程中,针对某些API的调用经常会有很多重复逻辑,所以做二次封装是很有必要的,列举两个场景。

场景一:wx.request

每次请求API,都直接调用wx.request,可能涉及的重复过程有:

  • 指定完整URL

  • 指定通用头信息

  • 指定登录token/cookie

大部分接口都是需要登录信息的,那么每次调用都需要设置token信息

  • 按接口规约解析响应数据

服务器API返回格式:{code: 0, result: {}, msg: ''},其中code为0表示业务成功,result中的数据可用,code非0表示业务错误,msg中包含错误描述。进行二次封装,可以很好的避免重复劳动,code:0:resolve(result),code:1:reject(msg)

通过二次封装,避免了不必要的重复代码编写,且获得了灵活性,如wx.request的并发数限制,可以在封装时考虑进去。

场景二:权限声明

部分API的调用,需要用户事先授权,每次都让API调用方去处理这种分支流程,代码逻辑会比较烦琐。还面临:多处功能需要某一权限,是否每处都让调用方去请求用户授权?用户拒绝授权该如何处理?

针对这两点,做二次封装,实现权限请求自动化,调用方无需考虑异常流程。

调用伪代码:

util.authorizeRequired('scope.userInfo').then(() => {
    // 此处表明权限获取成功
});

// authorizeRequired内判断是否已授权过,没有的话尝试申请,被拒绝的话跳转到设置页面等

页面开发基本模式

经过一周的实战,基本熟悉了小程序开发,目前开发一个页面,主要经过以下几步:

  • 新建相应的页面文件x.js、x.json、x.wxml、x.wxss
  • 在app.json中声明页面路径
  • 定义页面dev数据
  • 页面布局与数据绑定
  • 在wxss中修饰页面样式
  • 动态请求数据,实现页面交互行为

页面JS的开发模式

在页面JS中,经常遇到的两个问题:

  • 获取页面初始数据
  • 更新页面数据

主要通过页面两个生命周期方法onLoad与onShow解决上述两个问题。

目前自己的做法是:所有服务器API请求,都定义成一个Page内返回值为Promise的方法,然后定义一个init方法组织初始化流程,再定义一个fresh方法组织刷新流程。

这两个方法配合onLoad与onShow使用,示例代码:

Page({
    onLoad: function () {
        return util.loadWithFn.apply(this, [this.init]);
    },

    onShow: function () {
        return this.fresh();
    },

    init: function () {
        return app.login().then(this.fetchA);
    },

    fresh: function () {
        return Promise.all([this.fetchB(), this.fetchC()]);
    }

    fetchA: function () {
        //fetch and set data
    },

    fetchB: function () {
        //fetch and set data
    },

    fetchC: function () {
        //fetch and set data
    }
});

上述代码中,loadWithFn包含:

  • 显示/隐藏加载状态框
  • 异常时弹框提示加载失败,用户确认后重启回到首页

原文链接

回到顶部