初识小程序

2018-04-01 本文已影响26人 Gopal

什么是小程序

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

小程序就是依赖于微信平台，利用小程序框架提供视图层描述语言WXML、WXSS，以及JavaScript来实现一个具备原生体验的web应用。

开发工具

使用的是微信开发者工具v1.02.1802080

项目结构

主要介绍一下app.js、app.json、app.wxss

app.js声明小程序的整个声明周期、定义全局变量
app.json，对整个小程序的一个全局的配置（如规定小程序包括哪些页面、窗口的样式等等）
app.wxss，类似于CSS。定义了全局的一些小程序的样式

app.json文件的常用配置如下：

// 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
}

pages用来放置各个界面
utils用来放置工具类

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

*.js，处理页面的逻辑
*.json，处理页面的配置
*.wxml，处理页面的结构
*.wxss，处理页面的样式

什么是WXML

工程中出现了一个新的后缀*.wxml，而WXML(Weixin Markup Language)是微信小程序框架设计出来的一种标签语言，你可以直接把他理解成是微信定义了一套带有特殊事件、效果、属性的标签，但本质上和<div>、<img>、<a>等相似。值得注意的是，在wxml中也可以使用HTML的标签。

个人认为是可以类比vue中的双向数据绑定、条件渲染。列表渲染。

事件
这里单独说一下WXML中所提到的事件，小程序框架通过事件来保持视图层和逻辑层的通讯，例如，用户进行点击行为，点击行为触发了点击事件，进而触发逻辑层中所绑定的函数。

和我们在浏览器中开发JS有区别的是，这里的事件分两种：冒泡事件和非冒泡事件。其中冒泡事件包括touchstart、touchmove、touchcancel、touchend、tap、longtap，其余未提及的事件或者自定义事件均为非冒泡事件。

而在标签绑定事件函数存在两种方式bind、catch，其中bind的事件绑定不会阻止冒泡事件向上冒泡，catch则会阻止冒泡事件向上冒泡相当于直接在函数中执行e.stopPropagation()来阻止事件冒泡。

什么是WXSS？

WXSS(WeiXin Style Sheets)是一套样式语言，我们可以简单理解成CSS的一个拓展，它增加了两个特性：

尺寸单位
样式导入

在WXSS中引入了一个新的单位rpx(responsive pixel)，根据屏幕宽度的不同rpx代表的实际px也不同。WXSS规定一个屏幕的宽度为750rpx，750刚好是iphone6的物理宽度大小，也是目前大多数设计师出设计稿的标准宽度。也就是说当我们拿到设计稿的时候，我们不需要通过百分比、rem，而是直接测量出设计稿上的像素大小并使用微信提供的rpx就可以满足多屏适配的问题。

除了rpx，WXSS还提供了目前大部分CSS预编译语言所提供的是样式导入，即将外联样式导入当当前文件中

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

APP
我们可以通过App()来注册一个小程序，并指定它的生命周期

App({
    // 监听小程序初始化，只会在小程序注册时调用，其中返回值中包括了`path`小程序路径、`query`打开小程序的query、`scene`场景值
    onLaunch: function (options) {},
    
    // 监听小程序显示，当小程序启动或者从前台进入后台时会调用该方法
    onShow: function(options) {},
    
    // 监听小程序隐藏，当小程序从前台进入后台时调用
    onHide: function() {},
    
    // 监听小程序的错误，当小程序发生错误时触发，类似`window.onerror`
    onError: function() {},

    // 全局对象
    globalData: {}
});

// app本身是一个单例在一个程序中只有一个，所以在其它文件中如果想要使用APP对象需要通过下列方法调用
var appInstance = getApp();

PAGE
和注册小程序类似，注册页面可以通过Page()去指定页面的生命周期、事件函数以及初始化数据。

Page({
    // 初始化的页面数据
    data: {
        text: "初始化数据"
    },
    
    // 页面加载时触发，这里的加载指的是第一次加载
    onLoad: function(options) {},
    
    // 页面渲染完成时触发
    onReady: function() {},
    
    // 页面显示时触发，每次打开都会触发
    onShow: function() {},
    
    // 页面隐藏时触发
    onHide: function() {},
    
    // 页面卸载时触发
    onUnload: function() {},
    
    // 用户下拉时触发
    onPullDownRefresh: function() {},
    
    // 用户上拉触底时触发
    onReachBottom: function() {},
    
    // 点击分享后触发
    onShareAppMessage: function () {},
    
    // 事件绑定函数
    viewTap: function() {
        // 修改页面数据
        this.setData({
            text: '啦啦啦啦啦'
        })
    },
    
    // 自定义的对象
    customData: {
        hi: 'MINA'
    }
})

大量的组件和API

组件

API

初识小程序

什么是小程序

开发工具

项目结构

猜你喜欢

热点阅读