第二章微信小程序开发基础

^辞忧 \

已于 2024-05-15 17:28:34 修改

阅读量1.8k

点赞数 25

文章标签：微信小程序小程序

于 2024-03-08 13:26:11 首次发布

本文链接：https://blog.csdn.net/2301_81870381/article/details/136460118

版权

2.1 小程序的基本目录结构

pages:页面文件夹

utils:工具包文件夹

2.1.1 主体文件

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

app.json:主配置文件，作用：配置小程序全局设置。

app.wxss:主样式表文件，作用：设置页面的样式。

2.1.2 页面文件

.js 文件 : 页面逻辑文件

.wxml 文件 : 页面结构文件，作用：用于设计页面的布局、数据绑定等。

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

.json 文件：页面配置文件

2.2 小程序的开发框架

视图层：由WXML与WXSS编写，由组件来进行展示。

逻辑层：用于处理事务逻辑。

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

2.3 创建小程序页面

步骤：

1.在pages下面创建一个页面文件夹news,再在news文件夹中创建四个页面文件

2.在news.wxml文件中输入“欢迎大家学习微信小程序开发”并保存。

3.在news.js文件中输入下图代码：

4.在news.json文件中输入下图代码：

5.在app.json文件中输入下图代码：

6.结果视图

2.4 配置文件

小程序的配置文件按其作用范围分为全局配置文件（app.json）和页面配置文件（*.json）。

2.4.1 全局配置文件

1. pages 配置项

2. windows 配置项

3. tabBar 配置项

tebBar 中 list 选项

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

4. networkTimeout 配置项

5. debug 配置项

debug 配置项用于开启开发者工具的调试模式，默认为false。开启后，页面的注册、路由、数据更新、事件触发等调试信息将以info的形式输出到Console（控制台）面板上。

2.4.2 页面配置文件

2.5 逻辑层文件

2.5.1 项目逻辑层文件

2.5.2 页面逻辑文件

2.6 页面结构文件（WXML）

WXML具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力。

2.6.1 数据绑定

1、简单绑定

<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期：
   {{birthday[0].year}}年
   {{birthday[1].month}}月
   {{birthday[2].date}}日
</view>
<view>爱好:{{object.hobby}}</view>

2、运算

<view>算术运算：{{age+num}}</view>
<view>逻辑运算：{{age==40}}</view>
<view>三元运算：{{age==1 ? 3:num}}</view>

2.6.2 条件数据绑定

if条件数据绑定

<view wx:if="{{age>40}}">1</view>
<view wx:elif="{{age==40}}">2</view>
<view wx:else>3</view>

<block wx:if="{{true}}">
<view>view1</view>
<view>view2</view>
</block>

2.6.3 列表数据绑定

for

<view wx:for="{{students}}">
   <text>姓名:{{item.nickname}}</text>
   <text>身高:{{item.height}}</text>
   <text>体重:{{item.weight}}</text>
</view>

2.6.4 模板

<template name="stu">
<view wx:for="{{students}}">
   <text>姓名:{{item.nickname}}</text>
   <text>身高:{{item.height}}</text>
   <text>体重:{{item.weight}}</text>
</view>
</template>
<template is="stu" data="{{students}}"></template>