快速了解微信小程序

这是一款来自小程序免费开发制作网的小程序demo源码，希望大家喜欢。

什么是小程序？

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

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

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

Hello World

工程结构

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

(此图片来源于网络，如有侵权，请联系删除! )

可以看出整个工程包括app.js、app.json、app.wxss，以及pages和utils目录，后面我们一次介绍各个文件和目录的作用。

其中app.js、app.json、app.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)是微信小程序框架设计出来的一种标签语言，你可以直接把他理解成是微信定义了一套带有特殊事件、效果、属性的标签，但本质上和<div>、<img>、<a>等相似。值得注意的是，在wxml中也可以使用HTML的标签。

数据绑定

WXML中还是实现了现在比较流行的数据绑定的功能，省去了我们操作DOM元素的烦恼。WXML使用了Mustache语法，即通过2个花括号来包裹某一个属性，通过修改调用JS来修改对象的属性，继而修改页面中dom元素的值。

<view>{{message}}</view>

Page({
    data: {
        message: 'Hello Mina!'
    }
});

列表渲染

而除了提供数据绑定，它还提供了列表渲染、条件渲染、模板、事件、引用等功能。不过语法都比较简洁，有基础的同学基本上都可以快速看懂。

<!-- 列表渲染 -->
<view wx:for="{{array}}">{{item}}</view>

条件渲染

在处理条件渲染时需要注意，小程序中所有的条件判断表达式、true、false都需要使用{{}}包裹，否则会按照字符串来处理。

<!-- 条件渲染 -->
<view wx:if="{{condition}}">HAHA</view

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

本资源来自易用通，如有侵权，请联系站长。