微信小程序在无论在功能、文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们的小程序在很多方面突破H5页面应用的限制,更加接近原生程序的功能,因此微信小程序具有很大的前景想象力。它提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。
1、小程序的目录结构
小程序的目录结构如下所示。
其中项目级别的的文件包括 app.js、app.json、app.wxss 这三个。其中.js
后缀的是脚本文件,.json
后缀的文件是配置文件,.wxss
后缀的是样式表文件。
页面级别可以包含很多个页面,如index,detail等页面,每个页面都包含.js,.json,.wxml,.wxss这些文件,其中.wxml为页面视图文件,是自定义标签的HTML页面。
app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量,可以调用框架提供的丰富的 API。
app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。
app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。
一个小程序主体部分由三个文件组成,必须放在项目的根目录。
微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。
index.json 是页面的配置文件:页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用 app.json 中的默认配置。
小程序开发框架的逻辑层是由JavaScript编写。
逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。 在 JavaScript 的基础上,我们做了一些修改,以方便地开发小程序。
- 增加 和 方法,进行程序和页面的注册。
- 增加 getApp 和 getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。
- 提供丰富的 ,如微信用户数据,扫一扫,支付等微信特有能力。
- 每个页面有独立的,并提供能力。
- 由于框架并非运行在浏览器中,所以 JavaScript 在 web 中一些能力都无法使用,如 document,window 等。
- 开发者写的所有代码最终将会打包成一份 JavaScript,并在小程序启动的时候运行,直到小程序销毁。类似 ServiceWorker,所以逻辑层也称之为 App Service。
框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。
将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。
WXML(WeiXin Markup language)用于描述页面的结构。
WXSS(WeiXin Style Sheet)用于描述页面的样式。
组件(Component)是视图的基本组成单元。
<h4 id="基础组件">基础组件
框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。
什么是组件:
- 组件是视图层的基本组成单元。
- 组件自带一些功能与微信风格的样式。
-
一个组件通常包括
开始标签
和结束标签
,属性
用来修饰这个组件,内容
在两个标签之内。注意:所有组件与属性都是小写,以连字符
-
连接
框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。
说明:
- wx.on 开头的 API 是监听某个事件发生的API接口,接受一个 CALLBACK 函数作为参数。当该事件触发时,会调用 CALLBACK 函数。
- 如未特殊约定,其他 API 接口都接受一个OBJECT作为参数。
- OBJECT中可以指定
success
,fail
,complete
来接收接口调用结果。
类型 | 必填 | 说明 |
---|---|---|
'I am global data'
2)注册页面处理代码
"This is page data."
viewTap: 'Set some data for updating view.''MINA'
3)JS函数模块化
!!module.exports.sayHello =<span style="color: #000000;"> sayHello
exports.sayGoodbye = sayGoodbye
2)注册页面处理代码
3)JS函数模块化
exports.sayGoodbye = sayGoodbye
在需要使用这些模块的文件中,使用 require(path)
将公共代码引入
<h4 style="text-align: left;">4)网络数据请求处理代码
<div class="cnblogs_code" style="text-align: left;">
that = </span><span style="color: #008000;">//</span><span style="color: #008000;">数据加载完成之前,显示加载中提示框</span>
<span style="color: #000000;"> wx.showToast({
title: <span style="color: #800000;">'<span style="color: #800000;">加载中。。。<span style="color: #800000;">'<span style="color: #000000;">,icon: <span style="color: #800000;">'<span style="color: #800000;">loading<span style="color: #800000;">'<span style="color: #000000;">,duration: <span style="color: #800080;">10000<span style="color: #000000;">
});
</span><span style="color: #008000;">//</span><span style="color: #008000;">发起请求,注意 wx.request发起的是 HTTPS 请求</span>
<span style="color: #000000;"> wx.request({
url: url + <span style="color: #800000;">"<span style="color: #800000;">?city=<span style="color: #800000;">" + that.data.inputValue + <span style="color: #800000;">"<span style="color: #800000;">&key=<span style="color: #800000;">" +<span style="color: #000000;"> apiKey,data: {},header: {
<span style="color: #800000;">'<span style="color: #800000;">content-type<span style="color: #800000;">': <span style="color: #800000;">'<span style="color: #800000;">application/json<span style="color: #800000;">'<span style="color: #000000;">
},success: function(res) {
<span style="color: #0000ff;">var data =<span style="color: #000000;"> res.data;
<span style="color: #008000;">//<span style="color: #008000;">将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值
<span style="color: #000000;"> that.setData({
restation: data.result,condition: <span style="color: #0000ff;">false<span style="color: #000000;">
});
<span style="color: #008000;">//<span style="color: #008000;">数据加载成功后隐藏加载中弹框
<span style="color: #000000;"> wx.hideToast();
}
})
}</span></pre>