本篇文章并不会完全从开发的角度描述如何开发一个小程序,毕竟官方的文档已经很齐全了 戳这里看官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/。
本文会从如何快速上线一个小程序的角度来进行阐述。主要分文以下几个方面。
- 从零开始构建一个小程序
- 小程序测试、上线
- 小程序开发、上线过程中常见问题
- 使用第三方快速构建小程序。
- 使用wepy构建小程序
从零开始构建一个小程序
这一步基本要靠官方文档,而且文档很全面,主要分为四个步骤。
- 注册小程序
- 小程序基本框架
- 外部api
注册小程序
登录小程序后台注册一个小程序,注册完毕后,记录下APPID,并配置记录下后台接口服务的域名,服务器域名及小程序的后台服务,小程序是一个前后台高度分离的项目,所有数据除了调用第三方(主要是微信提供的api)的接口外就是调用自己业务系统的接口了。这里配置的就是自己业务系统接口地址。
下载小程序开发工具,新建项目,并且录入刚才的APPID,另外小程序要求后台接口服务器域名必须是https服务,如果开发工程中暂时未申请好https证书也没问题,可以在小程序开发工具设置“不校验安全域名、TLS版本及HTTPS证书”。
具体,参考官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/
小程序基本框架
这方面信息官方文档也有详细介绍:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html。 这里简单说明下:小程序开发的基本模式。
- 全局配置:
- 首先有个app.json配置了系统的全局参数,包括但不限于:
- pages,小程序包含的所有页面路径
- window,小程序窗口基本样式
- tabBar:小程序的主导航菜单(可选配,不配置的话顶部或者底部就没有菜单)。
- 其他配置,还有其他一些选配选项,这里不一一赘述
- app.js 小程序的全局生命周期相关动作可以在此编写,比如小程序初次启动的时候、销毁时等要做的事情可以在这个js中编写。
- app.wxss 小程序的全局样式,相当于html中的公共样式文件,所有页面都引用该样式文件。
- 首先有个app.json配置了系统的全局参数,包括但不限于:
- 各页面开发 官方规范小程序页面包含wxml,wxss,js三个文件,分别对应:页面、样式、js(业务逻辑)。当然你也可以将所有内容都卸载wxml中通过style和script引入样式和js,只是不建议这么做,页面复杂的时候不方便维护。
小程序测试、上线
小程序测试
小程序开发工具本身自带了预览功能,开发工程中可以实时看到页面效果,也可以通过“预览”按钮生成的小程序码,用微信扫描预览小程序。 测试过程中充分利用小程序的控制台,可以很方便的做调试。
小程序上线
小程序上线过程本身很简单,在小程序开发工具上点击“上传”按钮就会将小程序上传到小程序管理后台;然后登录小程序管理后台进行发布版本即可,剩下的就交给微信团队审核了一般需要3-5天,节假日顺延。
小程序开发、上线过程常见问题
开发过程的问题
- 开发过程中可能涉及后台接口的调整为了避免频繁调整、上线后台服务,可以在开发过程中将接口地址设置为本地,并且取消开发工具的https验证,这样可以提高开发调试效率。
- 对于不同屏幕的适配,在开发过程中,对于同一个页面应经常针对不同手机类型模拟器进行全面测试,开发工具提供了不同手机类型模拟器,很方便的测试。
- 也许经常会遇到一些新增的页面链接没有效果或者打不开,不用急,检查下app.json中的pages配置,也许你忘了将新增的页面配置到pages中了。(嗯,没错,说的就是我自己 ~捂脸~)
上线问题
刚才说了上线过程本身并不复杂,但是要注意小程序的名称、描述和小程序中涵盖的内容,目前小程序审核非常严格,要避免被打回来,比如下面常见打回情况。
- 个人帐号的小程序不能包含:新闻、论坛、社区、招聘等字样
- 小程序的类目选择不当
- 小程序中不要放不完善或者体验的功能,比如链接打不开、音乐、视频播放不了,图片加载不了、服务接口响应太慢。
关于常见问题后续开发过程中遇到了再补充完善。
使用第三方快速构建小程序
其实上线一个小程序很多时候不需要自己开发,完全可以使用第三方的服务网上还有很多其他的第三方小程序生成器,目前我只试用过轻芒小程序+,体验还不错;后期试了其他家的再补充。
使用wepy构建小程序
最后,隆重推荐wepy,wepy是一个小程序的组件化开发框架,更贴近于目前有MVVM框架开发模式。使用它开发过程可以抛弃微信官方的小程序开发工具,只是在测试预览的时候使用它。 而且后期代码移植为h5也比较方便。而且wepy是微信官方出品,不用担心支持问题,具体使用方式这里不赘述,可以查看其官方文档:https://tencent.github.io/wepy/