1、注册账号、创建小程序
去 www.mp.weixin.qq.com 注册账号,得用一个没和腾讯其他应用绑定的邮箱才行。
注册后创建小程序。作为个人开发,只能开发一个小程序,所以这里不用自作多情,以为可以随便写。刚才注册的这个账号,也就只能管理这一个小程序。
创建完成后,可以在“首页”的“小程序发布流程”的第1项“小程序信息”里查看。其实这里只是注册了一个小程序的账号,里面最关键的是这个小程序的身份证“AppID”,用这个号码你可以在自己的电脑上开发微信小程序了,而且可以随时在微信里预览和调试你的小程序。
2、下载微信开发工具 Stable
下载Windows下的开发工具,运行后创建小程序,创建的时候需要关联 AppID,这样就可以随时把小程序同步到服务器了。
本地的小程序叫什么名字无关紧要,在微信客户端是看不到的。因此,作为练习,可以写若干个不同的小程序在本地,像运行哪一个,编译一下就可以同步到服务器了。
3、编写第一个程序
创建一个新程序,这个开发工具给生成了一个Hello World演示程序。其实作为C程序员,感到很不舒服,我喜欢自己从零开始编程序。我索性删除了所有内容,自己写了一个比较干净的小程序。
一个最小的程序至少包含下面几个文件:
其中,最后两个文件我删除后,系统会自动生成。每个程序模块实际上都要分成四个不同格式的文件,他们的扩展名和用途如下:
扩展名 | 用途 |
---|---|
*.js | javascript 程序代码。 |
*.json | 数据文件。 |
*.wxml | 微信小程序的页面定义文件,应该是简化的 html5 格式。 |
*.wxss | 页面样式,应该是 css 格式的简化版。 |
因此,最简单的微信小程序,实际上只有两个模块:App 和 index,其中 App没有 wxml 文件,因此它不对应任何界面,第一个窗口界面应该由 index 模块来完成。
下面展示一下最小的小程序的源代码:
App.js
App ({})
App.json
{
"pages": [
"index"
],
"sitemapLocation": "sitemap.json"
}
index.js
Page({})
index.wxml
<text>Hello, World!</text>
其他文件一律清空,编译后,界面如下:
人生第一个微信小程序就完成了,纯手工打造,如假包换。接下来我要研究一下,如何设计界面和编写程序代码。
补充:今天我再次打开昨天创建的这个项目,发现编译不了了,感觉微信这个开发工具还存在一定的BUG。折腾半天,发现把 index 这一套移动到子一个文件夹 pages 中,并把 app.json 修改改成下面的样子,就没问题了。
App.json
{
"pages": [
"pages\index"
],
"sitemapLocation": "sitemap.json"
}