微信小程序入门第一步

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"
}
发布了182 篇原创文章 · 获赞 91 · 访问量 38万+

猜你喜欢

转载自blog.csdn.net/quicmous/article/details/105388509