当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 如何创建一个微信小程序?

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

2019-08-20 16:53 来源: 微信小程序

摘要:如何创建一个微信小程序?微信小程序(MiniProgram)是一种运行在微信内部,程序大小一般不超过2MiB(最高不超过8MiB)。正是因为这种特性,微信小程序也被称为是一种不需要下载安装...

期权保本理财

  微信小程序(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

 

  通常大家在使用一个工具的时候,都会针对各自喜好做一些个性化配置,例如界面颜色、编译配置等等,当你换了另外一台电脑重新安装工具的时候,你还要重新配置。

 

  考虑到这点,小程序开发者工具在每个项目的根目录都会生成一个project.config.json,你在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

 

  sitemap配置

 

  根目录下sitemap.json声明了小程序及其页面是否允许被微信索引,文件内容为一个JSON对象,如果没有sitemap.json,则默认为所有页面都允许被索引。这个文件目前我们用不到,就先搁置不用考虑这个文件。

 

  最后就是utils文件夹以及其中的util.js文件,和sitemap配置一样,我们也先搁置不考虑这个文件。

 

  总结

 

  到这里,我们就明白如何创建微信小程序,并对其中的文件逻辑和框架有了大致的了解。但是我们具体如何去构建代码,写出自己想要的小程序,这个以后再更吧。

 

  这是小编整理的关于“如何创建一个微信小程序?”的文章,更多资讯关注广州微信小程序开发霸界科技!

 
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088