资讯专栏INFORMATION COLUMN

微信小程序开发教程(基础篇)2-微信小程序结构概览

muddyway / 1788人阅读

摘要:在新建一个项目后,微信小程序会生成一个默认的程序框架,后续程序的开发工作都在这个框架上进行。微信小程序的开发模式确实和开发很相似。通常一个完整的微信小程序包含上面两部分,当然我们也可以定义自己的目录用于存放公共代码和程序需要的其它文件。

在上一篇教程的最后,我们生成了一个类似"Hello World"的小程序,这个过程中没有编写任何一行代码。
在新建一个项目后,微信小程序会生成一个默认的程序框架,后续程序的开发工作都在这个框架上进行。这个默认框架包含下面几部分:

app.xx

每个微信小程序都会包含app.js, app.json, app.wxss 三个文件,其中app.js文件包含了程序的逻辑实现代码,app.json是一个全局配置文件,app.wxss是一个全局样式文件。后面会详细介绍每个文件的内容和作用。

pages 目录

pages目录包含了程序当前的页面文件,以默认生成的程序为例,该目录下包含了index,logs两个目录,说明程序包括index和logs两个页面。

以index为例,该目录下包含index.js,index.wxss,index.wxml3个文件,其中js是代码文件,wxss是样式文件,wxml是页面结构描述文件。

熟悉web开发的同学应该会感觉很熟悉。微信小程序的开发模式确实和web开发很相似。目前逻辑部分仅支持javascript语言,并使用wxml(类似html)和wxss(类似css)来描述页面的结构和样式。此处的javascript和web中是完全一样的,但因为不是运行在浏览器环境中,因此无法使用 windows,document等对象,自然也无法使用jquery等第三方库。而wxml,wxss的语法和html,css也是十分相近的。

页面也同样可以包含一个index.json文件用于配置,不过这不是必须的。

通常一个完整的微信小程序包含上面两部分,当然我们也可以定义自己的目录用于存放公共代码和程序需要的其它文件。

app.json

打开app.json文件,可以看到如下代码

    {
      "pages":[
        "pages/index/index",
        "pages/logs/logs"
      ],
      "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle":"black"
      }
    }

其中pages部分包含了程序的页面,这样框架就能知道从哪里找到页面文件。而window部分包含了程序窗口的一些配置。详细的配置项可以参考配置 小程序

app.wxss

app.wxss文件包含了全局的样式信息,在默认生成的程序中,只有一个类选择器.container,该类型在index.wxml和 logs.wxml中有使用到。

app.js

该文件包含了程序的主体流程代码实现,关于该部分的分析请见下一篇教程。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/80937.html

相关文章

  • 微信小程开发教程(基础)7-数据绑定上

    摘要:在之前的教程中写到,微信小程序框架将程序分为逻辑层文件和视图层文件。关于数据绑定的更多讲述,敬请期待微信小程序开发教程基础篇数据绑定下 在之前的教程中写到,微信小程序框架将程序分为逻辑层(.js文件)和视图层(.wxml文件)。这是一种常见的UI和逻辑分离的程序设计方式,开发出来的程序更加灵活,易扩展。 这种程序设计方式通常要解决两个问题: UI层响应逻辑层逻辑和数据的变化UI层将用户...

    I_Am 评论0 收藏0
  • 前端资源系列(3)-微信小程开发资源汇总

    摘要:微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序 微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者...

    paney129 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<