用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

快速了解微信小程序

纸飞机 2018-3-6 12:34

作者:ssh,来自原文地址什么是?先引用小龙哥的一句话来看看啥是小程序?小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的 ...

作者:ssh,来自

原文地址

什么是?

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

小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。 - 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)是微信小程序框架设计出来的一种标签语言,你可以直接把他理解成是微信定义了一套带有特殊事件、效果、属性的标签,但本质上和

等相似。值得注意的是,在wxml中也可以使用HTML的标签。

数据绑定

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

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

列表渲染

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


<view wx:for="{{array}}">{{item}}view>

条件渲染

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


<view wx:if="{{condition}}">HAHAview
                
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏