小程序开发初体验
发布于 6 年前 作者 Shasharoman 1869 次浏览 来自 分享

小程序开发初体验

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

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

注册小程序

先注册小程序，获取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包含：

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

原文链接

回到顶部