微信小程序开发基础_微信小程序开发 csdn

2.1 小程序的基本目录结构

2.1.1 主体文件

（1）app.js:小程序逻辑文件，主要用来注册小程序全局实例。

（2）app.json:小程序公共设置文件，配置小程序全局设置。

（3）app.wxss:小程序主样式表文件，类似HTML的.css文件。

2.1.2 页面文件

（1）.js文件：页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。

（2）.wxml文件：页面结构文件，用于设计页面的布局，数据绑定等，类似Html页面中的.html文件。

（3）.wxss文件：页面样式表文件，用于定义本页面中用到的各类样式表。

（4）.json文件：页面配置文件。

2.2 小程序的开发框架

小程序 MINA 框架将整个系统划分为视图层和逻辑层。视图层（View）由框架设计的标
签语言 WXML (Weixin Markup Language）和用于描述 WXML 组件样式的 WxSS ( Weixin
Style Sheets ）组成，它们的关系就像 HTVL 和 CSS 的关系。逻辑层（App Service）是 MINA
框架的服务中心，由微信客户端启用异步线程单独加运行。页面数据鄉定所需的数据、页
面交互处理逻辑都在逻辑层中实现。MINA 框架中的逻辑层使用 JavaScript 来编写交互逻辑
网络请求、数据处理，但不能使用 JavaScript 中的,DOM 操作。小程序中的各个页面可以通过
逻辑层来实现数据管理、网络通信、应用生命周期管理和页面路由。
MINA 框架为页面组件提供了 bindtap、bindtouchstart 等与事件监听相关的属性，并与逻
辑层中的事件处理两数绑定在一起，实现面向逻辑层与用户同步交互数据。MINA 框架还提
供了很多方法将逻辑层中的数据与页面进行单向鄉定，当逻辑层中的数据变更时，小程序会
主动触发对应页面组件的重新数据绑定。
微信小程序不仅在底层架构的运行机制上做了大量的优化，还在重要功能（如page 切
换、tab 切换、多媒体、网络连接等）上使用接近于系统层（Native）的组件承载。所以
小程序 MINA 框架有着接近原生 App 的运行速度，对 Android 端和 i0s 端能呈现得高度一致
并为开发者准备了完备的开发和调试工具。

小程序MINA框架示意图

2.2.1 视图层 

微信小程序在逻辑层将数据进行处理后发送给视图层展现出来，同时接收视图层的事件反馈。视图层以给定的样式展现数据并反馈时间给逻辑层，而数据展现是以组件来进行的。组件是视图的基本组成单元。

2.2.2 逻辑层

逻辑层用于处理事务逻辑。对于微信小程序而言，逻辑层就是所有，js 脚本文件的集合。
微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
微信小程序开发框架的逻辑层是采用 JavaSeript 编写的。在JavaSeript 的基础上，微信团
队做了适当修改，以便提高开发小程序的效率。主要修改包括：
(1）增加 app(）和Page(）方法，进行程序和页面的注册。

(2）提供丰富的 API，如扫一扫、支付等微信特有的能力。

（3） 每个页面有独立的作用域，并提供模块化能力。

app.js文件内容

2.2.3 数据层

数据层在逻辑上包括页面临时数据或缓存，文件储存（本地存储）和网络存储与调用。

1.页面临时数据或缓存

在Pege(）中，使用 setData 函数将数据从逻辑层发送到视图层，同时改变对应的
this. data 的值
setData（）两数的参数接收一个对象，以 （koy,valve）的形式表示将key 在this. data 中
对应的值改变成 value。

2.文件存储（本地存储） 

wx. getStorage：获取本地数据缓存。

wx. setStorage：设置本地数据缓存。

wx. clearStorage：清理本地数据缓存。

3.网络存储和调用

上传或下载文件API接口，如下：

wx. request：发起网络请。
wx. uploadFile：上传文件。
wx. downloadFile：下载文件。

调用 URL 的 API 接口，如下：
wx. navigateTo：新窗口打开页面。
wx. redirectTo：原窗口打开页面。

2.3 创建小程序页面

启动微信开发工具，创建新的项目demo2,此处不勾选“创建QuickStart项目”复选项，如图所示：

创建demo2项目

2.3.1 创建第一个页面文件

 继续在项目主目录下新建一个pages目录，在pages目录下新建一个index目录，并在index目录下新建一个index.js,index.json,in-dex.wxml和index.wxss空文件。

此时，系统任然提示错误信息，需要输入以下代码：

//app.json
{
"pages":[
"pages/index/index"
  ]
}

接下来，打开index.json文件输入以下代码：

//index.json
{
}

在index.json文件中，只需加入一对空“{}”即可。

打开index.js文件，输入以下代码：

//index.js
page({
})

只需引入page()方法，保证index.js文件不为空就行。

2.4 配置文件

小程序的配置文件按其作用范围可以分为全局配置文件（app. Json)和页面配置文件(*•json）全局配置文件作用于整个小程序，页面配置文件只作用于当前页面，由于页配置文件的优先级高于全局配置文件的优先级，因此，当全局配置文件与页面配置 文件有相同配置项时，页面配置文件会覆盖全局配置文件中的相同配置项内容。

2.4.1 全局配置文件

代码如下：

{
//设置页面路径
"pages":[],
//设置默认页面的窗口表现
"window":{},
//设置底部 tab的表现
"tabBar":{},
//设置网络请求 API 的超时时间值
"networkTimeout":{},
//设置是否开启 debug 模式
"debug ": talse
}

1.pages配置项

（1）数组的第一项用于设定小程序的初始页面。

（2）在小程序中新增或减少页面时，都需要对数组进行修改。

（3）文件名不需要写文件扩展名。小程序框架会自动寻找路径。

例如以下代码：

{
"pages":[
        "pages/news/news",
        "pages/index/index"
]
}

2.window配置项

window配置项负责设置小程序状态栏，导航条，标题，窗口背景色等系统样式。

3.tabBar配置项

当需要在程序顶部或底部设置菜单栏时，可以通过配置tabBar配置项来实现。

其中，list（列表）接受数组值，数组中的每一项也都是一个对象。

4.networkTimeout 配置项

小程序中各种网络请求API的超时时间值只能通过networkTimeout 配置项进行统一配置，不能再API单独配置。

5.debug配置项

debug配置项用于开启开发者工具的调试模式，默认为false。

2.4.2 页面配置文件

页面配置文件（*•json）只能设置本页面的窗口表现，而且只能设置window 配置项的内容在配置页 面配置文件后，页面中的window 配置值将覆盖全局配置文件 (app. json）中的配置值。

代码如下：

{
"navigationBar Backgrounacolor":"#ffffff",
"navigationBarTextStyle": "black",
"navigationBarritlerext":"页面window配置显示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light "
}

2.5 逻辑层文件

小程序的逻辑层文件分为（项目逻辑层）和（页面逻辑层）

2.5.1项目逻辑文件

项目逻辑文件app. js 中可以通过 App(）函数注册小程序生命周期函数、全局属性和全局方法已注册的小程序实例可以在其他页面逻辑文件中通过 getApp(）获取。

代码如下：

// app.ts
    App<IAppOption>({  
      globalData:{},
      /**
       * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
       */
      onLaunch() {
        console.log("初始化")
      },
    
      /**
       * 当小程序启动，或从后台进入前台显示，会触发 onShow
       */
      onShow(opts) {
        console.log(opts.query)
        console.log("小程序启动")
      },
    
      /**
       * 当小程序从前台进入后台，会触发 onHide
       */
      onHide() {
        console.log("小程序进入后台")
      },
    
      /**
       * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
       */
      onError(msg) {
        console.error(msg)
      },
    })

运行视图如下：

2.5.2 页面逻辑文件

页面逻辑文件的主要功能有：设置初始数据；定义当前页面的生命周期函数；定义事件等函数。

1.设置初始值

设置初始数据是对页面的第一次数据绑定。

2.定义当前页面的生命周期函数

在page()函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad，onShow，onReady，onHide，onUnload

onLoad ：页面加载两数。当页面加载完成后调用该两数。一个页面只会调用一次
该函数的参数可以获取 wx. navigateTo 和 wx. redireetTo及＜navigator/＞中的query
onShow：负面显不两数。当页面显示时调用该两数。每次打开页面都会调用-
m onReady： 页面数据绑定两数。当页面初次数据鄉定完成时调用该函数。一个页面只
会调用一次，代表页面已经准备就绪，可以相视冬层进行交红
onHide：页面隐藏两数。当页面隐藏时及 当navigateTo 或小程序底部进行 tab切换时调用该函数。
on Unload：页面卸载函数。当页面卸载、进行navigateBack 或 redirectTo 操作时，调用该函数。

3.定义事件处理函数

开发者在page()中自定义的函数称之为事件处理函数。

代码如下：

//index.wxml
<view bindtap="myclick">单击执行逻辑层事件</view>
//index.js
page({
myclick:function(){
console.log("点击了view">
}
});

4.使用setData更新数据

小程序在page()对象中封装了一个名为setData（）的函数，用来更新data中的数据。

// miniprogram/pages/setdata/setdata.js
Page({
 
/**
 * 页面的初始数据
 */
data: {
  name: "itclanCoder"
},
 
/**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {
 
}
})

2.6 页面结构文件

页面结构文件（WXMI）是框架设计的一套类似 HITVL 的标签语言，结合基础组件、
结合基础组件、事件系统，可以构建出页面的结构，即。wxml 文件。在小程序中，类似 HIML 的标签被称为组是页面结构文件的基本组成单元。这些组件有开始（如＜view＞）和结束如＜/vew ＞）标志，每个组件可以设置不同的属性（如id、dlass 等），组件还可以嵌套WXML 还具有数据鄉定、条件数据鄉定、列表数据鄉定、模板、引用页面文件、页面事件等能力。

2.6.1 数据绑定

1.简单绑定：用于使用双大括号（{{ }}）将变量打包起来，在页面中直接作为字符串输出使用、

2.运算：在{{ }}内可以做一些简单的运算（算术运算，逻辑运算，三元运算，字符串运算）

2.6.2 条件数据绑定

条件绑定就是根据绑定表达式的逻辑值来判断是否数据绑定当前组件。

1.wx：if 条件数据绑定

2.block wx：if 条件数据绑定

2.6.3 列表数据绑定

列表数据绑定用于将列表中的各项数据进行重复数据绑定。

1.wx:for

2.block wx:ior

2.6.4 模板

1.定义模板

<template name="模板名">

2.调用模板

<template is="模板名称"data=="{{传入的数据}}"/>

2.6.5 引入页面文件

1.import方式：如果在要引用的文件中定义了模板代码，则需要用到import方式引用。

2.include方式：可以将源文件中除模板之外的其他代码全部引入，相当于复制到include所在位置。

2.6.6 页面事件

（1）定义事件函数

（2）调用事件：也称之为注册事件。

（3）冒泡事件：指某个组件上的事件被触发后，事件一直向其父级元素传递。

（4）非冒泡事件：指某个组件上的事件被触发后，不会向父节点传递。

2.7 页面样式的文件

页面样式文件（WXSS)是基于 CSS 拓展的样式语言，用于描述 WXML 的组成样式。决定wXSS的组件如何显示。WXSS具有CSS的大部分特性，小程序对WXSS做了一些扩充和修改。

1.尺寸单位

2.样式导入

3.选择器

4.WXSS常用属性