资讯专栏INFORMATION COLUMN

快速了解小程序

walterrwu / 2871人阅读

摘要:什么是小程序先引用小龙哥的一句话来看看啥是小程序小程序是一种不需要下载安装即可使用的应用,它实现了应用触手可及的梦想,用户扫一扫或者搜一下即可打开应用。也体现了用完即走的理念,用户不用关心是否安装太多应用的问题。

什么是小程序?

先引用小龙哥的一句话来看看啥是小程序?

小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。 - Allen Zhang(张小龙)

从程序猿的角度来说:小程序就是依赖于微信平台,利用小程序框架提供视图层描述语言WXMLWXSS,以及JavaScript来实现一个具备原生体验的Web应用。微信小程序相当于基于微信平台造了一个React Native的轮子,通过JS的跨平台性实现了一套代码跨平台部署、运行。

Hello World 工程结构

首先,我们先通过微信web开发者工具新建一个项目,项目建成后会自动生成下列文件。下文全部围绕这个新建的项目来简单的介绍一下小程序。

可以看出整个工程包括app.jsapp.jsonapp.wxss,以及pagesutils目录,后面我们一次介绍各个文件和目录的作用。

其中app.jsapp.jsonapp.wxss最为重要,他们为对整个小程序进行全局配置。

app.js,声明小程序的整个生命周期、定义全局变量

app.json,对整个小程序起全局配置的作用,规定小程序包括哪些页面、窗口的样式、底部tab栏的样式、网络超时事件、是否开启debug模式

app.wxss,这里的wxss类似于CSS,只不过是针对微信做了一部分拓展,定义了小程序的全局样式

pages目录下面每一子目录都代表了小程序中的一个页面,而每一个页面都由*.js*.json*.wxml*.wxss组成,这里又出现了一个新的后缀wxml,同时再次出现了wxss,后面会解释他俩是啥用的。先解释一下,页面中的这四种文件是干啥用的?

*.js,处理页面的逻辑

*.json,处理页面的配置

*.wxml,处理页面的结构

*.wxss,处理页面的样式

为了减少配置同一个页面目录中的文件都需要以同一个名字命名,例如个人习惯将所有页面目录下面的文件都用index命名。

*.json中我可以配置什么?

上面有提到app.json可以配置页面的全局配置,而pages目录下*.json则可以配置对应页面window选项(窗口的样式),那么我们到底可以配置哪些具体内容呢?

// app.json
{
    // 定义小程序中有哪些页面
    "pages":[
        "pages/index/index",
        "pages/logs/logs"
    ],
    
    // 窗口的样式
    "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Demo",
        "navigationBarTextStyle":"black",
        "enablePullDownRefresh": true
    },
    
    // 底部tab的内容和样式
    "tabBar": {
        // tab的具体内容
        "list": [
            {
              "pagePath": "pages/index/index",
              "text": "首页"
            }, 
            {
              "pagePath": "pages/logs/logs",
              "text": "日志"
            }
        ]
    },
    
    // 设置不同请求的网络超时
    "networkTimeout": {
        "request": 10000,
        "downloadFile": 10000
    },
    
    // 是否开启debug模式,开启debug模式之后可以在微信开发者工具的控制台中看到整个APP,以及每个页面的生命周期日志
    "debug": true
}

常用的配置都在这里了,根据配置的命名其实已经可以猜个大概啦,如果猜不出来可以参考文档“配置”

什么是wxml

工程中出现了一个新的后缀*.wxml,而WXML(Weixin Markup Language)是微信小程序框架设计出来的一种标签语言,你可以直接把他理解成是微信定义了一套带有特殊事件、效果、属性的标签,但本质上和

引用

小程序提供了两种不同方式的引用importinclude,二者的区别在于:

import会引用目标文件中定义的 template

include会将目标文件中除了template外的所有内容拷贝到include定义的位置

还需要注意的是import存在作用域的概念,即它只会引用目标文件中的template,不会引用目标文件中import的文件。