之前写了一个去水印的小程序,详情可查看「短视频去水印工具小程序版—去水印Pro版」一文,我个人对小程序也是从完全陌生到入门阶段,这篇文章就把入门的过程和遇到的问题记录一下。
一、小程序注册
想要开发小程序,就要先从微信公众平台注册一个小程序,具体的注册流程可以参考「小程序注册流程」。
这里额外说下主体类型如果是个人,则无法开通支付、附近等功能。
PS:截止到我发文时,微信暂停了小程序注册,个人猜测可能是因为国庆的原因,节后应该会恢复。
二、小程序入门
小程序提供了一个简单、高效的应用开发框架和丰富的组件及API,帮助开发者在微信中开发具有原生 APP 体验的服务。
简单说就是,小程序依赖于微信,微信环境已经帮我们做好了封装,绝大部分的功能只需要调用相应的 API 即可。
小程序的入门,最靠谱的莫过于查看官方文档,点击「小程序官网文档--指南」即可访问。
有编程基础尤其是有前端编程基础的人,看过微信官方的文档之后,基本就可以做出简单的小程序了,我个人就是看了微信的官方文档,再加上一些搜索,搞定了「去水印Pro版」的开发。
三、UI组件推荐
除了微信对小程序的封装,极大方便了开发者,小程序还提供了「扩展能力」,其中最能提高开发效率的莫过于「WeUI 组件库」了。
关于「WeUI 组件库」,官网是这样介绍的:
这是一套基于样式库weui-wxss开发的小程序扩展组件库,同微信原生视觉体验一致的 UI 组件库,由微信官方设计团队和小程序团队为微信小程序量身设计,令用户的使用感知更加统一。
简单说,就是微信官方提供的一套样式组件,设计风格与小程序一脉相承,很多基础的组件,不需要开发者自己去编写,直接引用 WeUI 里的组件即可。
其实除了微信官方提供的 UI 组件,还有一些很优秀的第三方 UI 组件,比官方的组件更丰富,设计也更多彩,这里推荐几个,我在开发中就使用了 iViewUI 的 NoticeBar。
- iViewUI:https://github.com/TalkingData/iview-weapp
- ColorUI:https://github.com/weilanwl/ColorUI
- VantUI:https://github.com/youzan/vant-weapp
四、其他问题
在开发和提审中遇到的一些问题记录如下,后面如果遇到新的问题,会不断补充:
-
小程序开发中如果使用的是 http 域名,需要在项目详情中勾选「不校验合法域名、web-view、TLS版本以及 HTTPS 证书」
- 微信开发者工具--右上角「详情」--勾选「不校验合法域名、web-view、TLS版本以及 HTTPS 证书」
-
如果用真机使用体验版,接口域名仍然使用的是 http,那么需要打开调试模式,否则接口调用会失败。
- 点击小程序右上角菜单,选择「打开调试」
-
小程序的正式版,域名一定要是 https,且域名要在小程序后台绑定。
- 微信公众平台左侧菜单「开发」--上方菜单「开发设置」--服务器域名「修改」
-
小程序开发登陆授权、联系客服、分享等都是通过 button 来调用的,且不同的功能要设置不同的 open-type。
- 具体可参考「button 组件」
-
调用 wx.showLoading 方法,最好设置 mask 属性为 true,防止触摸穿透。
-
input 组件获取值,不能使用 js 原生的方法,需要给组件绑定 bindinput 事件,通过 e.detail.value 获取文本框的值。
-
小程序的功能要和后台设置的「服务类目」相符合,否则有审核被拒的可能。
- 可参考「个人主体开放的服务类目」
最后,欢迎大家访问我的小程序,也欢迎提出意见和建议。
本文由 掘墓人 创作,采用 CC BY-NC-ND 4.0 DEED
,转载或翻译请注明出处。
最后编辑时间为: 2019年09月26日