微信小顺序开辟教程(基本篇)2-微信小顺序结构概览

在上一篇教程的末了,我们天生了一个类似”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://segmentfault.com/a/1190000007510413
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞