小程序入门

Posted 2020-11-28 掘墓人4449

之前写了一个去水印的小程序，详情可查看「短视频去水印工具小程序版—去水印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 获取文本框的值。

• 小程序的功能要和后台设置的「服务类目」相符合，否则有审核被拒的可能。
  • 可参考「个人主体开放的服务类目」

欢迎访问的个人博客：掘墓人的小铲子