如何高效开发一款微信小程序
目录
一、页面开发分工
二、公共模块的封装
三、开发规范与代码Review
四、微信公众平台管理
五、如何提高小程序审核通过的时效
一、页面开发分工
在我们接手到一个小程序开发项目的时候，首先要做的是根据产品文档和UI设计稿，进行任务分解。
1、任务分解
任务分解也叫工作分解结构（简称WBS），就是把一个项目，按一定的原则分解，项目分解成任务，任务再分解成一项项工作，再把一项项工作分配到每个人的日常活动中，即：项目→任务→工作→日常活动。对于小程序这样的项目，大致上我们可以按照以下的原则拆分任务：
一个page开发就是一个子任务
一个公用组件封装就是一个子任务
一个公共接口封装就是一个子任务
……
2、分工协作
提高效率的方法之一就是分工协作，一般项目的开发是有多个人员共同参与的，那么我们可以按照上面的任务分解和工时预估，以及每个人可以投入的时间占比，将每一项任务落实到对应的人头上。
二、公共模块的封装
1、封装模块
创建小程序工程目录，开发者工具本身已经帮我们生成了大部分的目录和文件结构，此外我们再根据需要封装的内容，增加对应的存放路径，下面举一个例子：
|
微信功能（model） |
登录、注销 |
| 获取用户头像、手机号 | |
| 地理定位、地址、地图导航 | |
| 读写storage | |
|
组件（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.js2、使用模块
先看一个实际的例子，我们跳转了到一个页面，并且当前页面需要使用鉴权模块进行鉴权的时候，脱敏业务代码后，只看关键的调用：
// # 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<view ><searchInput id="searchInput" inputStr="{{inputStr}}" bind:search="search"></searchInput >
</view>// # pages/index.js
Page({data: {// 输入的内容inputStr:'',},// 键盘搜索search(input) {// do sththis.setData({inputStr: e.detail.detail.value})// go on}})页面的预览效果：
三、开发规范与代码Review
开发工具：可以使用官方的微信开发者工具、或者VSCODE+插件等；
编码规范，略，参照你所在的公司或团队的代码规范即可。
以下主要说说几个在开发过程中需要注意的点，通用性比较强，适用于大多数的小程序项目：
首先，图片资源，上面的例子中，虽然我们有创建了images目录，但是几乎不存放图片。
一般来讲，我们要尽可能把所有的图片资源都放在CDN上，然后通过网络加载，这样的好处是很明显的，第一是小程序的包可以尽可能做到瘦身，二是如果某个图片有更换，那么只要刷新页面就可以，而不必重新发版。
只有极少数的图片，可以考虑放在本地的images目录，但一定要满足以下条件才可以：
- 页面框架图片，或与页面密切相关的图片；
- 图片体积较小，最好是只有几KB；
- 长期保持不变。
按照这些条件，页面底部的导航栏ICON、上面定位的黑色icon等可以考虑。
其次，使用多个不同尺寸的模拟器调试页面。小程序使用的是WXSS (WeiXin Style Sheets)是样式语言，尺寸单位是rpx
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
也就是，微信小程序在不同屏幕的手机上运行的时候，会自动根据屏幕的分辨率和尺寸进行换算，大多数情况下页面的展示都是正常的，尽管如此，在开发调试的时候，还是要尽可能多切换不同尺寸的模拟器，看看ui、文字等有无变形等。
最后说说代码Review，代码Review不仅是在检查代码有无错误或是否符合规范，我认为至少还有两件事情可以做：
第一、抽取和封装公用模块，对于经常使用到的功能和方法，例如storage的读写，很多地方都有用到，但是各自的使用有些不一样，到处造轮子，阅读和维护起来有些困难，那么我们可以考虑封装一个公用模块出来，统一维护。
第二，代码阅读是学习他人代码的好机会；“哦，原来这个功能还可以这样实现！”，体会一下不同的解决问题的方式还是挺不错的。
四、微信公众平台管理
微信公众平台管理，对于小程序开发人员而言，以下几个功能使用频率较高：
1、添加开发者、体验者权限的名单。
2、开发管理-接口权限的设置：
如果小程序中有使用到了一些微信的功能如定位、获取地址等，那么一定要提前开通，否则在提交小程序审核的时候会被打回
3、开发管理-开发设置各类型域名和接口
4、微信告警群：
扫码加入告警群，在微信统计到小程序异常的时候，及时收到群告警。
5、提交发版审核：
小程序从开发完到上线一般要经过 预览-> 上传代码 -> 提交审核 -> 发布等步骤。
预览和上传代码需要在微信开发者工具中操作；提交审核和发布需要在管理后台进行操作。
在版本管理中，可以看到现在的版本情况，这个流程很简单，实际操作一遍就能上手：
五、如何提高小程序审核通过的时效
最后来说说微信的审核时效问题，一般小程序提交审核后，按微信官方的说法将在7天内审核完成。实际上，并不需要这么长的时间，正常情况下，2-3个小时是要的。但有时候慢的话可能要去到1天，快的话半个小时，最快的时候，15min不到就通过了。
在这，我简单分享一下，如何尽可能快一点地通过微信的审核，当然纯属瞎掰，不一定准确。微信的审核流程，大致上是机器自动审核+人工审核：
机器审核：小程序代码中使用到的微信api，是否都已申请开通；相比上个版本，代码量增加了多少，资源文件增加了多少；跑一下自动化测试遍历访问每个页面生成预览图；看看业务接口有无4XX/5XX等；微信登陆、定位、支付等功能是否正常……然后会给出一个参考评分。
人工审核：根据机器的参考评分，页面的预览图等，以及提交审核时候填写的发版内容，再适当的人工检查一下。
如果机器给的参考分较低，那就人工审核复查的时间就要变长，可能还不止一个人，还要多个人来审核。
因此，想要尽快一点通过审核，就要尽可能做到满足以上所有的要求。
by 至秦，总结心得、提供一些参考、少走一些弯路。
如何高效开发一款微信小程序相关推荐
- 云服务器定时启动程序_过去、现在和未来：开发一款微信小程序的技术迭代全过程...
2019 年 10 月 19 日,由腾讯云与微信小程序团队联合举办的"小程序·云开发"技术峰会在北京召开.23 万小程序·云开发注册账户,50 多万开发者上手使用,这是腾讯云与微信 ...
- （下）开发一款微信小程序的个性简历，能打开大厂之门并获得门票？（附源码）
回顾 阅读本文之前,可以先看看上一篇分享的内容,主要讲微信小程序的由来,它的特点及产品优势,行业应用,开发语言,运行环境,开发前的准备工作等等. 本项目是基于微信小程序原生框架,常用原生组件及官方AP ...
- 开发一款微信小程序多少钱？
互联网时代为创新不破,小程序的出现给移动应用带来了一种新的理念,小程序由腾讯开发,背靠12亿微信用户,可以说是自带流量,所以也引起了企业和商家的广泛关注.今天我们来聊一聊制作一个小程序需要哪些流程以及 ...
- 零基础开发一款微信小程序商城
一个朋友问我能不能帮忙做个商城?我一个完整网页都写不出的 菜鸟程序员,我该怎么拒绝呢?好吧,看在小程序这么火的形势下,我还是答应了!找了个开源项目,差不多花了三天时间搞定. 主要是讲一个开源的微信小程 ...
- 从0到1开发一款微信小程序
本文章记录一些在开发微信小程序过程中的一小方法 目录 iconfont图标获取 调用函数 一个页面多个跳转 弹窗管理 云开发 获取后台数据 使用云函数改变数据库中数据的状态 iconfont图标获取 ...
- 普本在校生是如何零基础在一个月内开发出第一款微信小程序的
先自我介绍一下,我是一个普通本科的大三在读生,在2020年春节前后,自己一个人开发并上线了第一款微信小程序,后续陆续开发了N款小程序,并且自己通过毕设.课设的开发在2020年上半年的疫情期间挣了一万多 ...
- webview加载百度失败_移动AI系列百度paddle.js在助力开发智能化的微信小程序
本文作者为百度 APP 移动研发部高级研发工程师,百度 Web 前端智能化方向主要成员.过去一段时间,曾负责百度多模视觉搜索前端业务及多模视觉搜索的前端性能优化等相关工作.划重点:文末有照片! 早在今 ...
- PHP开发B2C商城 微信小程序商城系统源码+数据库，轻量级前后端分离的电商系统，支持微信小程序 + H5+ 公众号 + APP
项目介绍 一款轻量级.高性能.前后端分离的电商系统,支持微信小程序 + H5+ 公众号 + APP,前后端源码完全开源,看见及所得,完美支持二次开发,可学习可商用,让您快速搭建个性化独立商城. 完整代 ...
- 一款微信小程序是如何诞生的。
上一个暑假,我在一家互联网初创公司实习了一个半月的时间,作为前端开发实习生,参与了公司团队的一款微信小程序的开发.这是一只小巧而年轻的团队,在产品开发的过程中,大伙齐心加班加点,在 APP 版本上线的 ...
- 微信小程序的开发：通过微信小程序看前端
前言 2016年9月22日凌晨,微信官方通过"微信公开课"公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真 ...
最新文章
- 王道考研 计算机网络笔记 第六章：应用层
- Hessian 原理分析
- vue全局组件与局部组件
- 【Linux系统编程】fork()函数详解
- 收集bug开源框架_划重点 | 小程序框架全面测评
- Python爬虫之编辑cookie实例：必胜客餐厅
- Windows 编程[11] - WM_SIZE 消息
- ECshop sina
- 易语言查询Windows API之网络函数消息函数
- Ingress.exe——今天你被监控了吗？
- 微信支付服务器白名单,微信测试号白名单怎么回事?如何进行微信支付测试?
- 网络口碑营销从“可以做”、“值得做”到了“必须做好”的阶段！
- css和html实现梦幻西游页面特效
- php现在编辑pdf,用PHP编辑PDF？
- 我为什么放弃Pocket使用Pinbox来整理收藏碎片化知识
- C语言_断言函数assert
- web测试方法总结 -- 非原创，存留一份
- Linux wifi wpa_sup,wifi详解（四）zz
- php脾组词,脾组词_脾字组词_脾的组词意思及拼音
- 计算机网课自我鉴定,计算机实习自我鉴定