Luna Tech

Tutorials For Dummies.

微信小程序开发初探

2021-06-21


0. 前言

这个周末研究了一下微信小程序,之后准备做一个关联到我的公众号。

这篇文章记录一下新手学习的过程和用到的一些资料教程,踩过的一些坑,供大家参考。


Step 1. 注册一个小程序账号

这里要注意的是,即使有了公众号,也要用一个从未注册过公众号和微信的邮箱来注册一个新的账号。

坑:gmail 收不到邮件。

每个人可以注册 5 个小程序账号。

微信公众平台注册链接 - 选择小程序类型


Step 2. 下载小程序开发 IDE

小程序开发工具下载链接

我下载了稳定版,支持 windows 和 macOS 两个平台。


Step 3. 绑定微信号

接下来就登录你刚才注册的小程序账号,并且绑定一个微信号了。

绑定好之后,打开小程序开发 IDE,用绑定的微信号扫描二维码登录。

此时你可以给你的小程序取个名字,加个 logo 和描述。

你在 IDE 里面依旧可以选择用测试号来体验。

一些比较有用的入门教程:

阮一峰系列

GitHub - ruanyf/wechat-miniprogram-demos: 微信小程序教程库

微信开放文档


Step 4: 云开发

在公众平台的网页端,你可以开启一些功能,比如云开发,它有诸多好处:比如你不需要考虑域名和备案,直接把代码部署在云端,有配套的数据库等等……

总之,我开启了~免费的配额足够开发阶段测试使用了。

开启之后你可以添加一个云开发环境,用这个 id 来创建一个云开发的小程序,前后端一起搞定,

微信官方的教程写的还不错,我按照教程过了一遍,大致了解了云开发的流程和可以实现的功能。

【专题课程】从 0 开始使用小程序云开发 | 微信开放社区


Step 5: 找一个好用的 UI 框架

目前选定了 colorui,颜值特别棒。

GitHub - weilanwl/ColorUI: 鲜亮的高饱和色彩,专注视觉的小程序组件库


一些走过的「弯路」- 跨平台开发

看到有人说可以用 uni-app 来做跨平台,直接用 vue + TS 就行了,我也尝试了一番。

下载了一个开发 IDE - HBuilderX,然后经过一番配置可以在微信的 IDE 里面运行程序。

参考的资料包括:

uni-app 官网

uni-app 运行到微信小程序模拟器

uni-app 适配到微信小程序注意事项-uni-app-PHP 中文网

uniapp 处理 tsconfig.json 报错

使用 TypeScript 开发 Uni-App 项目

终于把 uni-app + typescript + vue 搞定了!

接着我研究了一下 uni-app 的 UI 库,有个原生的叫做 uni-ui

然而……在使用过程中遇到了一些奇怪的问题,比如我有个 search bar 加进去就是没反应……


结语

虽然 colorui 也可以适配 uni-app 平台进行开发,不过可能还是会有各种各样的坑,小程序原生语言开发看起来也还好(就是 js + html + css,语法类似 vue.js)。

大家如果有小程序开发的经验欢迎留言交流哈~