微信小程序开发 -- 01

时间:2024-04-21 08:04:21

微信小程序开发基础 -- 开发前的准备

缘由

1月9日张小龙微信小程序正式上线,因为微信,所以小程序从诞生开始就头戴巨大的光环,很多的团队,公司以及开发的个体都眼巴巴的盯着这个小程序。而那个时候我却在全力以赴的研究node,所以也没有仔细的研究这个风风火火的小程序。本以为此生无甚交集,但是最近公司却准备开发小程序,而我也"幸运"的被选中......

小程序上线有有一段时间了,虽然还是在不断的更新,但是却大体趋于稳定,网上也积累了一定的教程和帖子,所以在研究了一下之后也就决定将自己学习小程序的一些过程记录在博客中,以供他人参考。

什么是微信小程序

微信小程序(weixinxiaochengxu),简称小程序,缩写XCX,英文名mini program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。

全面开放申请后,主体类型为企业、*、媒体、其他组织或个人的开发者,均可申请注册小程序。小程序、订阅号、服务号、企业号是并行的体系。

2017年1月9日,张小龙在2017微信公开课Pro上发布的小程序正式上线。

发展历程

2016年9月21日,微信小程序正式开启内测。在微信生态下,触手可及、用完即走的微信小程序引起广泛关注。腾讯云正式上线微信小程序解决方案,提供小程序在云端服务器的技术方案。

2016年1月11日,微信之父张小龙时隔多年的公开亮相,解读了微信的四大价值观。张小龙指出,越来越多产品通过公众号来做,因为这里开发、获取用户和传播成本更低。拆分出来的服务号并没有提供更好的服务,所以微信内部正在研究新的形态,叫「微信小程序」。

2017年1月9日0点,万众瞩目的微信第一批小程序正式低调上线,用户可以体验到各种各样小程序提供的服务。

小程序核心理念

具备明星光环的小程序,如果在百度里面查找相关的资料以及介绍,是非常容易的。但是在众多理念中,我认为最为核心的理念应该就是一句__用完即走__。

那么什么是用完即走呢?

非常简单,当需要的时候,不需要下载动则几十兆的app,也不需要进行过多复杂的操作,打开微信,开启小程序,直接使用。而用完直接退出,不用顾虑它是否会过多的占用你手机宝贵的内存。

给人的感觉有点像叫车一样,需要的时候一个预定,车就来了,到达了目的地,下车,再见。

开发

与其他语言开发动不动就要配置环境,下载一些插件软件安装包等等的复杂项目构建不同,小程序的开发非常简单,直接点击https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1496882410 根据不同的系统选择开发工具进行下载,而软件的安装也完全是傻瓜式安装,不存在什么需要注意的点。软件安装好之后,图标如下:

微信小程序开发 -- 01

如果你成功的安装好了开发工具,那么恭喜你,你已经搭建好了所有的开发环境,怎么样,简单吧。

而软件的内部操作界面如下:

微信小程序开发 -- 01

无论是调试还是代码的编辑还是查看代码的运行仅需要这个开发工具就已经足够了。

账号的注册

当我们开发微信小程序的时候,需要使用appId,用来验证身份,所以就需要注册账号。

点击这里 https://mp.weixin.qq.com/ 即可进行账号的注册和登陆。

微信小程序开发 -- 01

在页面的右上角点击立即注册,既可以进行注册

进入注册页面后选择小程序。

微信小程序开发 -- 01

点击小程序模块进入后,输入基础信息进行注册

微信小程序开发 -- 01

三步:账号信息 - 邮箱激活 - 信息登记

微信小程序开发 -- 01

注册完成后重新进行登陆。

输入账号密码后使用绑定的微信号扫描二维码即可进入如下网页:

微信小程序开发 -- 01

在左边选择设置,可以找到开发AppID。

微信小程序开发 -- 01

项目创建

我们需要通过开发者工具,来完成小程序创建和代码编辑。

开发者工具安装完成后,打开并使用微信扫码登录。选择创建“项目”,填入上文获取到的 AppID ,设置一个本地项目的名称(非小程序名称),比如“我的第一个项目”,并选择一个本地的文件夹作为代码存储的目录,点击“新建项目”就可以了。

微信小程序开发 -- 01

为方便初学者了解微信小程序的基本代码结构,在创建过程中,如果选择的本地文件夹是个空文件夹,开发者工具会提示,是否需要创建一个 quick start 项目。选择“是”,开发者工具会帮助我们在开发目录里生成一个简单的 demo。

微信小程序开发 -- 01

项目创建成功后,我们就可以点击该项目,进入并看到完整的开发者工具界面,点击左侧导航,在“编辑”里可以查看和编辑我们的代码,在“调试”里可以测试代码并模拟小程序在微信客户端效果,在“项目”里可以发送到手机里预览实际效果。

点击编辑既可以对代码进行编辑。如果需要调整编辑器字体等相关内容,可以点击左上角的设置。

微信小程序开发 -- 01