如何创建一个微信小程序?

未知 2020-10-16 11:04:14

       微信小程序(MiniProgram)是一种运行在微信内部,程序大小一般不超过2MiB(最高不超过8MiB)。正是因为这种特性,微信小程序也被称为是一种不需要下载安装即可使用的应用。那么作为开发者,我们又怎样开发出这种简单轻巧的小程序呢?

一、准备工具
这里就简说进入微信小程序开发工具下载界面,根据自己的操作系统,建议选择下载稳定版。

二、创建项目
打开开发程序之后先扫码登录,之后在左侧栏目选择小程序并点击右侧带有加号的白色方框。
项目名称和目录可以随意修改。因为我们目前不需要对AppID进行发布,所以AppID选择使用测试号。其它缺省设置不必修改,直接点击右下角“创建”即可。

三、程序开发
项目创建成功之后,分三部分:工具栏、模拟器和编辑器。

四、代码构架
    pages文件夹下存放的文件夹是页面,也就是每一个页面在pages文件夹中都是一个文件夹,而页面名称就是这个文件夹的名称。如上图,pages下有2个文件夹分别名为index和logs,这就表明这个小程序有两个页面。
      每一个页面文件夹下都有4个和文件夹同名的不同类型文件,他们分别是:
json后缀的JSON配置文件、wxml后缀的WXML模板文件、wxss后缀的WXSS样式文件、js后缀的JS脚本逻辑文件

      接下来我们分别看看这4种文件的作用:
      JSON配置:JSON是一种数据格式,并不是编程语言,他的作用就像我们手机电脑中的设置一样,把我们手中的东西变为我们想要的样子。
      以app.json为例,app.json文件用来对微信小程序进行全局配置,他声明了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。每一个小程序页面也可以使用同名.json文件来对本页面的窗口表现进行配置,页面中配置项会覆盖app.json中相同的配置项。
      WXML模板:WXML与HTML相像,HTML是用来描述网页的结构,所以在微信小程序中,WXML充当的就是类似HTML的角色。WXML能够在屏幕上显示它本身所呈现的内容,但是在WXML写了一个按钮,我们希望用户在点击他的时候他能正确交互,这时就需要用到JS逻辑交互。
      JS逻辑交互:就像上面所说,一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写JS脚本文件来处理用户的操作。另外,我们页面中需要用到的变量和函数方法也需要在JS文件中定义。有了它,再配合WXML,就能够写出来一个有模有样的程序了。
      WXSS样式:WXSS具有CSS大部分的特性,但小程序在WXSS也做了一些扩充和修改。通俗点讲WXSS的作用就是定义WXML中我们所显示在屏幕上的那些按钮图片文字的高度宽度大小颜色等性质。和前边app.json,page.json的概念相同,wxss也提供了全局的样式和局部样式。你可以写一个app.wxss作为全局样式,会作用于当前小程序的所有页面,局部页面样式page.wxss仅对当前页面生效。
      说完了4种主要文件,我们会发现在根目录下存在一个名为app.js的文件。其实和前边app.json,page.json的概念相同,app.js定义了全局样式,同样也会作用于当前小程序的所有页面,局部页面样式page.js仅对当前页面生效。
      通常大家在使用一个工具的时候,都会针对各自喜好做一些个性化配置,例如界面颜色、编译配置等等,当你换了另外一台电脑重新安装工具的时候,你还要重新配置。
      考虑到这点,小程序开发者工具在每个项目的根目录都会生成一个project.config.json,你在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
       sitemap配置:根目录下sitemap.json声明了小程序及其页面是否允许被微信索引,文件内容为一个JSON对象,如果没有sitemap.json,则默认为所有页面都允许被索引。这个文件目前我们用不到,就先搁置不用考虑这个文件。
      最后就是utils文件夹以及其中的util.js文件,和sitemap配置一样,我们也先搁置不考虑这个文件。

湖南格赛——小程序开发公司