参考教材:《微信小程序开发入门与实践》 雷磊
前置知识:JavaScript,CSS
新建项目
安装好微信开发者工具
后,我们就可以开始新建我们第一个微信小程序了。
选择新建项目,填入一个项目名称以及目录(即在磁盘上存放的路径),AppID这里如果没有申请,点击测试号
系统会提供一个给你一个AppID,主要用于方便开发者学习和调试。
在这里,我选择的是系统提供的默认AppID,确认无误后,点击右下角的新建
,就生成了一个项目了。
界面显示及目录结构
如下图,这就是小程序开发的主界面,分为左中右三个部分,左边部分是模拟器的预览视图,中间是代码的树状结构,右边是代码的编辑区。
模拟器可以可以模拟微信小程序在客户端真实的运行情况,顶部有一条工具栏,你可以选择不同的机型、不同的网络情况、不同的缩放比例,以及home键模拟等等操作。
中间是项目文件的树状管理器,可以整体预览项目文件和组织关系。
右边是代码编辑区,不多赘述。
右下角是信息输出区域,这个区域会显示程序运行的错误信息、警告信息以及用户自己打印的信息。
基本文件结构
文件 | 作用 |
---|---|
app.js | 小程序的逻辑文件 |
app.json | 小程序的配置文件 |
app.wxss | 全局公共样式文件 |
project.congif.json | 项目配置文件 |
文件类型 | 作用 |
---|---|
js | 类似JavaScript文件,用来编写小程序的页面逻辑 |
wxml | 类似html文件,用来编写页面的标签和骨架 |
wxss | 类似css文件,用来编写界面显示的样式,实际编写的时候就是css,就是格式换成了wxss |
json | 配置页面的样式与行为 |
值得注意的是,以上四种类型的文件类型的文件文件名字必须相同
另外,系统自动生成utils文件夹是用来放一些公共的js文件,比如utils下面的util.js.当然你也可以新建其他文件夹存放。
新建界面
我们现在用来开发小程序的框架,微信团队称之为MINA框架。MINA框架的原理暂时不需要了解,我们现在先学会怎么使用。
新建项目的时候,MINA框架其实给我新建了两个界面,一个是首页index界面,一个是log界面。index界面就是我们现在看到的页面,现在我们来看看logs界面是什么内容。但是现在我们不能直接由首页index界面跳转log页面,我们换个方法—把log界面当成首页
。点开app.json文件
app.json是一个典型的json对象,pages
属性接受一个数组,数组的每一项是一个字符串,用来指定我们的小程序由哪些页面组成,每一项由对应页面的【路径+文件名】组成。比如上面的代码里的"pages/index/index"
中,pages/index/
是页面的路径,后面的index
是对应的页面的名称,不需要指定具体的文件扩展名,MINA框架会自动把对应路径下相应的界面的.js
,.json
,.wxml
,wxss
文件进行整合,形成一个界面。并且默认把第一个页面当成是小程序的首页。
现在我们看到,在app.json
里pages
属性里的第一个页面是index界面,现在我们把logs页面放到第一个,再编译一下看看效果
可以看到,左边的模拟器显示的页面变成了logs页面,上面显示了启动小程序的记录。
现在,我们来尝试一下在index路径下新建一个hello页面。
有两种方法,第一种比较麻烦,就是在index目录下新建hello.js
, hello.json
, hello.wxml
, hello.wx