广州微信小程序开发,广州网站建设

联系方式

More +

电话:15915862505

邮箱:1413889027@qq.com

地址:广州市白云区嘉禾望岗长旺大厦6楼601

当前位置:广州微信小程序开发 > 行业新闻 > 怎么做微信小程序?如何创建微信小程序?

怎么做微信小程序?如何创建微信小程序?

文章出处:http://www.jimifeng.com/a/127.html 阅读量:84 发表时间:08-19 21:19
行业新闻
分享到:

微信小程序(Mini Program)是一种运行在微信内部,程序大小一般不超过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配置一样,我们也先搁置不考虑这个文件。

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


相关新闻

More +
cache
Processed in 0.006245 Second.