本文从开发、工具使用、服务器、测试等方面比较全面地整理了小程序开发需要注意的相关事项。
服务类目
- 不要提供与小程序服务类目无关的功能，否则有可能被下架处理
- 建议根据所持资质进行服务类目添加
设计稿
- 尺寸最好用iphone6(物理像素750*1334)作为视觉稿的标准
开发前
- 具备基础知识(Html+CSS+JS)
- 原生开发需要熟悉微信小程序的标签(小程序没有document对象，底层原因见本号文章)
- 使用框架则需要事先熟悉相应的API文档
- mpx立足原生，完全兼容原生(对第三方组件库完美支持)，坑少，做了很多增强，不必担心跨平台(微信、支付宝、百度、QQ、头条)时的兼容问题
- 使用taro需要具备react基础知识
- mpvue、uniapp、wepy需要熟悉Vue
- 第三方组件库可以熟悉下iview、vant、wux、weui、colorui等，参考小程序UI库推荐
- js推荐使用ES6语法
- 后端需要准备支持HTTPS的服务器
开发工具
- 推荐使用vscode
- vscode插件:minapp,gulp task,vscode-icon,prettier等，若使用框架(mpvue、mpx、taro、wepy、uni-app)则需要安装对应的插件，部分框架没有辅助插件
开发相关人员
- 需要先在微信小程序管理后台(管理-成员管理-项目成员/体验成员)添加开发成员微信
内网穿透服务
- 调试接口需要(微信会请求本地接口)
- 内网穿透方案可以选择ngrok、localtunnel、frp、lanproxy等
微信开发者工具
- 勾掉checkHTTPS(体验版测试时建议打开、测试人员可以使用体验版进行测试)
- 项目接口URL配置一般需要设置request、upload、download
- URL修改后需要刷新(重启)下开发者工具，拉取最新配置
- 开发者工具不支持视频播放的测试，需要真机预览
样式注意点
- 布局推荐使用弹性布局(flex)，需要熟悉常用用法
- 小程序使用的响应式像素，所以制作页面时需要先做一下换算，750px为基准的设计稿则只需将像素*2即可，例如按钮宽100px，则width应为200rpx
- 适配iPhone X或者其他有刘海屏的情况(如果有底部定位按钮可能会被横条(home indicator)遮住、自定义顶部或者底部导航等不居中)
- 页面元素总宽度之和不要超过375px(750px设计稿基准)、否则在部分机型会出现横向滚动条
- 小程序包有2M大小限制,分包后最多支持12M、图片尽量压缩、删除废代码
- 富文本对html解析的兼容性不好，官方rich-text、wxParse、Parser还有第三方插件需要酌情使用
- 运行环境分为三种，模拟器与安卓、IOS机型的效果可能出现不一致的情况，真机上效果需要最后确认一下。
- tabBar图标显示过大问题处理,UI做设计稿时需要注意不要贴边
- image标签src可以使用http协议加载网络图片,若要下载图片则必须使用HTTPS
测试
- 小程序调试模式页面正常、关闭调试之后异常需要确认服务器域名是否配置正确
- 测试人员可以使用开发版或者体验版进行测试
- 开发版与体验版在手机上属于不同的版本会下载不同的软件包
- 版本更新后提交测试、需要测试人员在本机删除旧版本的程序包
版本更新
- 一般情况下人工审核最长需要7天、普遍为2到3天，快则一刻钟、周末也会审核
- 审核注意小程序的服务类目，如若过界会被打回(有绕过的技巧，建议不要投机取巧)
- 线上版本支持回退及暂停服务功能、紧急情况可以先回退版本
运维日志
- 线上运行会产生日志、可以在管理后台的开发-运维中心查看日志，关注下报错信息
高级操作
- 已整理Mac下小程序解包教程，请至个人博客(http://xuedingmiao.com/blog/xcx_unpack.html)或者bilibili教程(https://www.bilibili.com/video/av77770643)查看
- 解包过程视频讲解(http://tiaocaoer.com/blog/wyyx_decompile.html)
- 解包图文讲解(http://tiaocaoer.com/blog/xcx_unpack.html)
官方规范
官方规范会不定期更新，开发者需要随时关注官方规范进行相应修改:https://developers.weixin.qq.com/community/operate/doc/000640bb8441b82900e89f48351401
资源汇总
微信小程序开发资源汇总:https://github.com/justjavac/awesome-wechat-weapp
若您有疑问可私信或到个人博客留言(百度"薛定喵君")
