微信小程序开发系列之Hello World

时间:2024-03-06 17:51:27

第一步:注册

在微信公众平台官网首页,点击注册。(相关文档可以找到,这里不再累述,望见谅。)

微信小程序开发系列之Hello World

微信小程序注册成功后界面

第二步:编辑器、开发工具

我们假定你已经申请注册好微信小程序了,我们选定一个代码开发的编辑器。

这里,我推荐用:Sublime Text或者 Visual Studio Code

然后下载微信开发者工具(目前最新版:0.17.172600) 界面如下:

微信小程序开发系列之Hello World

微信开发者工具示意图

如果你经常用Chrome的话,是不是很类似,Chrome下开启调试工具(F12),切换到手机模式,调整调试工具的方向到右侧贴边。

第三步:写代码

我们用Sublime Text打开一个空目录,然后新建3个文件:app.js、app.json、app.wxss。

这3个文件是必须的,名字是固定的,app代表的就是这整个小程序,所以,我们从名字上就能看出它们的重要性了。

至于文件扩展名,先说明一下:.wxss表示css,.wxml表示html,.json表示配置信息,这样,你就知道了,平时我们开发一个网页的3文件(html、css、js),是被另行规定了一下,你只要记住就行了,这是规则。

1、app.js

微信小程序开发系列之Hello World

微信小程序app.js

这里,我们只写一个空App({}),这是规定的语法,你也可以到微信小程序开发文档上看详细说明。

2、app.json

微信小程序开发系列之Hello World

微信小程序app.json

这里大部分是固定的,你只需要改变配置信息就行,针对本文,你需要指定 hello.js(不带扩展名)。

3、app.wxss

微信小程序开发系列之Hello World

微信小程序app.wxss

这是全局的css样式定义,和你之前定义的main.css,让整个网站都用的公共样式一样。

4、hello.js

我们新建一个pages文件夹,让所有的页面都在此管理,接着新建hello.js文件,如下:

微信小程序开发系列之Hello World

微信小程序hello.js文件

Page({})这是固定的格式, data也是固定的,表示静态数据用的,这里,我们定义message变量。

5、hello.wxml

微信小程序开发系列之Hello World

微信小程序hello.wxml文件

这里的view是一个容器,类似我们经常写的div。然后模板引用数据{{变量}},上个文件,我们定义的变量在这里使用。

6、hello.wxss

微信小程序开发系列之Hello World

微信小程序hello.wxss文件

定义了2个css类样式,供上一个文件的标签class属性使用。

第四步:调试预览,上传

把之前安装的微信开发者工具,打开,创建项目,指定我们的代码目录,就可以预览(需要微信验证登录)。这一部分,不细说了,官方的开发文档上有详细的说明。

调试预览的效果,就如上边编辑器的图片那样的。

关于上传的,微信开发者工具,就可以上传, 但是,因为本文太简单,即便上传了,也不太会审核通过的。

强烈建议你有空了,细看一下《微信小程序官方开发文档》。