如何高效开发一款微信小程序_html-js-css

一、页面开发分工

二、公共模块的封装

三、开发规范与代码Review

四、微信公众平台管理

五、如何提高小程序审核通过的时效

一、页面开发分工

在我们接手到一个小程序开发项目的时候，首先要做的是根据产品文档和UI设计稿，进行任务分解。

1、任务分解

任务分解也叫工作分解结构（简称WBS），就是把一个项目，按一定的原则分解，项目分解成任务，任务再分解成一项项工作，再把一项项工作分配到每个人的日常活动中，即：项目→任务→工作→日常活动。对于小程序这样的项目，大致上我们可以按照以下的原则拆分任务：

一个page开发就是一个子任务
一个公用组件封装就是一个子任务
一个公共接口封装就是一个子任务

……

2、分工协作

提高效率的方法之一就是分工协作，一般项目的开发是有多个人员共同参与的，那么我们可以按照上面的任务分解和工时预估，以及每个人可以投入的时间占比，将每一项任务落实到对应的人头上。

二、公共模块的封装

1、封装模块

创建小程序工程目录，开发者工具本身已经帮我们生成了大部分的目录和文件结构，此外我们再根据需要封装的内容，增加对应的存放路径，下面举一个例子：

微信功能（model）	登录、注销
	获取用户头像、手机号
	地理定位、地址、地图导航
	读写storage
组件（components）	搜索框
组件（components）	获取定位组件
业务接口（module）	请求后端接口
	鉴权检查
	公用业务配置、参数

脱敏后的目录结构如下：

    wxapp
    ├── app.js     # 小程序的逻辑文件
    ├── app.json   # 小程序的配置文件
    ├── app.wxss   # 全局公共样式文件
    ├── components # 存放公用组件封装
    ├── config     # 存放业务相关的配置js文件
    ├── images     # 存放本地的图片
    ├── model      # 存放微信功能的封装
    ├── module     # 存放业务接口的封装，如登录接口封装
    ├── pages      # 存放小程序的各个页面
    │   ├── index  # index页面
    │   │   ├── index.js     # 页面逻辑
    │   │   ├── index.json   # 页面配置
    │   │   ├── index.wxml   # 页面结构
    │   │   └── index.wxss   # 页面样式表
    ├── project.config.json
    └── utils      # 存放工具类的封装，如网络请求
        └── util.js

2、使用模块

先看一个实际的例子，我们跳转了到一个页面，并且当前页面需要使用鉴权模块进行鉴权的时候，脱敏业务代码后，只看关键的调用：

// # module/auth.js
export default {
    ...
    check: function () {
    // auth check
    }
    ...
}

在页面中使用：

// # pages/index.js
import authModel from '../../model/auth'

Page({

  onLoad() {
    authModel.check().then((res) => {
      // do sth
    }).catch((e) => {
      // catch e
    })
  }
})

如果有过前端VUE的开发经验，对上面的内容应该很好理解，其实不止是模块的封装和调用，包括page组件的封装和调用等，都和VUE很相似，引如组件的路径和名称，在wxml中插入对应的组件标签，再传入对应的属性，接收emit出来的事件方法。

再来看一个组件封装和使用的例子，比如小程序中有一个“门店导航”的页面，其中有一个搜索门店名称的搜索框，脱敏了业务代码后的主要流程：

    ├── components      # 存放组件页面
    │   ├── searchInput  #
    │   │   ├── searchInput.js     # 
    │   │   ├── searchInput.json   # 
    │   │   ├── searchInput.wxml   # 
    │   │   ├── searchInput.wxss   #

在页面中的使用：

// # pages/index.json

{
  "usingComponents": {
    "searchInput": "/components/searchInput/searchInput"
  },
  "navigationBarTitleText": "门店导航"
}

// # pages/index.wxml

// # pages/index.js
Page({
  data: {
    // 输入的内容
    inputStr:'',
  },

  // 键盘搜索
  search(input) {
   // do sth
    this.setData({
      inputStr: e.detail.detail.value
    })
    // go on
  }

})

页面的预览效果：

三、开发规范与代码Review

开发工具：可以使用官方的微信开发者工具、或者VSCODE+插件等；

编码规范，略，参照你所在的公司或团队的代码规范即可。

以下主要说说几个在开发过程中需要注意的点，通用性比较强，适用于大多数的小程序项目：

首先，图片资源，上面的例子中，虽然我们有创建了images目录，但是几乎不存放图片。

一般来讲，我们要尽可能把所有的图片资源都放在CDN上，然后通过网络加载，这样的好处是很明显的，第一是小程序的包可以尽可能做到瘦身，二是如果某个图片有更换，那么只要刷新页面就可以，而不必重新发版。

只有极少数的图片，可以考虑放在本地的images目录，但一定要满足以下条件才可以：

页面框架图片，或与页面密切相关的图片；图片体积较小，最好是只有几KB；长期保持不变。

按照这些条件，页面底部的导航栏ICON、上面定位的黑色icon等可以考虑。

其次，使用多个不同尺寸的模拟器调试页面。小程序使用的是WXSS (WeiXin Style Sheets)是样式语言，尺寸单位是rpx