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

苏冷.w

已于 2024-04-22 11:23:01 修改

阅读量1.3k

点赞数 29

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

于 2024-03-04 19:15:38 首次发布

本文链接：https://blog.csdn.net/m0_73490019/article/details/136436327

版权

学习目标：

了解微信小程序的基本目录结构

了解雄安程序的开发框架

掌握小程序的文件类型

掌握小程序的相关配置信息

学习内容：

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

2.1 小程序的基本目录结构

图1-1：

2.1.1主页文件

微信小程序的主体部分由３个文件组成, 这３个文件必须放在项目的主目录中, 负责小程序的整体配置, 它们的名称是固定的。

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

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

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

图1-2：

2.1.2页面文件

小程序通常是由多个页面组成的, 每个页面包含４个文件, 同一页面的这４个文件必须具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时, 小程序会根据app.json设置的路径找到相对应的资源进行数据绑定。

（1）.js文件：页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。
（2）.wxml:页面结构文件，用于设计页面的布局、数据绑定等。
（3）.wxss：页面样式表文件，用于定义本页面中用到的各类样式表。
（4）.json：页面配置文件，该文件在页面中不可缺少。

图 1-3：

2.2 小程序开发框架

图2-1

2.2.1视图层

MINA框架的视图层由WXML与WXSS 编写，由组件来进行展示，.wxml文件用于描述页面的结构； .wxss文件用于描述页面的样式。

2.2.2 逻辑层

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

微信小程序开发框架的逻辑层是采用javaScrict编写的。在javaScrict的基础上, 微信团队做了适当修改, 以便提高开发小程序的效率。主要修改包括:

(１) 增加app()和Page()方法, 进行程序和页面的注册。

(２) 提供丰富的API, 如扫一扫、支付等微信特有的能力。

(３) 每个页面有独立的作用域, 并提供模块化能力。

2-2小程序默认的app.js文件，如图：

2.2.3数据层

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

（1）页面临时数据或缓存
（2）文件存储（本地存储）
wx.getStorage:获取本地数据缓存

wx.setStorage:设置本地数据缓存
wx.clearStorage:清理本地数据缓存
（3）网络存储与调用
wx.request: 发起网络请求
wx.uploadFile: 上传文件
wx.downloadFile: 下载文件
调用URL的API接口，如下：
wx.navigateTo ：新窗口打开页面
wx.redirectTo: 原窗口打开页面

2.3创建另一个页面

启动微信发开发工具，创建新项目，如图所示：

图2-3所示：

2.3.1创建另一个页面文件

在pages目录新建一个ti目录，并在ti目录中新建ti.js、ti.json、ti.wxss、ti.wxml空文件。之后把原来的index目录删掉。

图2-4

在app.json中删掉"pages/index/index"

{
  "pages": [
    "pages/ti/ti",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "lazyCodeLoading": "requiredComponents"
}

图2-5

（1）首先，我们学习如何能在页面中显示“欢迎学习小程序，实现大梦想”，打开建的ti目录，找到ti.wxml文件中输入“欢迎学习小程序，实现大梦想”。如下所示：

图2-6

（2）打开ti.json文件，输入代码：

图2-7

{
}

（3）打开ti.js文件，引入Page()方法输入代码：

图2-8

Page({
  
})

将四个文件按Ctrl+S进行保存后，进行编译，运行结果如下所示：

运行效果图2-9

表2-10 各项文件的代码内容

2.4 配置文件

2.4.1 全局配置文件

小程序的全局配置保存在全局配置文件(app.json) 中, 使用全局配置文件来配置页面文件(pages) 的路径、设置窗口(window) 表现、设定网络请求ＡＰＩ的超时时间值(netwoekTimeout) 以及配置多个切换页(tabBar) 等。

图2-11 全局配置项

1.Pages配置项

设置Pages配置时要注意以下三点：

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

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

（3）文件名不需要写文件扩展名

app.json配置文件如下：

{
  "pages": [
    "pages/ti/ti",
    "pages/logs/logs"
  ],
}

2.widow配置项

widow配置项负责设置小程序状态栏、导航栏、窗口背景等系统样式

图2-12 widow配置项及其描述

3.taBar配置项

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

图2-13 taBar配置项及其描述

其中taBar配置项中list选项

图2-13taBar配置项中list选项

4.networkTimeout配置项

小程序中各种网络请求API的超时时间值只能通过networkTimeout配置项统一设置，不能单独在API中设置，显示颜色就近原则。

图2-14 networkTimeout配置项

5.debug配置项

用于开发者工具的调试模式，默认为false.

2.4.2页面配置文件

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

2.5逻辑文件

2.5.1.项目逻辑文件

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

图2-15 项目逻辑文件配置项

var app =getApp();
Console.log(app.data);

首先，我们可以在app.js文件中加入代码：

// app.js
App({
    onLaunch() {
      // 展示本地存储能力
     console.log("小程序初始化");
    },
    onShow(){
      console.log("小程序启动");
    },
    onHide(){
      console.log("小程序隐藏");
    },
    globalData: {
      userInfo: null
    }
  })

保存后运行控制台运行效果如下：

2.5.2页面逻辑文件

页面逻辑文件的主要功能有: 设置初始数据; 定义当前页面的生命周期函数; 定义事件处理函数等。每个页面文件都有一个相应的逻辑文件, 逻辑文件是运行在纯javaScrict引擎中。因此, 在逻辑文件中不能使用浏览器提供的特有对象(document、window) 及通过操作DOM改变页面, 只能采用数据绑定和事件响应来实现。

图2-16 页面逻辑文件配置项

（1)设置初始数据

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

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

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

■ onload 页面加载函数。当页面加载完成后调用该函数。一个页面只会调用一次。

■ onShow 页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。

■ onReady页面数据绑定函数。当页面初次数据绑定完成时调用该函数。一个页面只会调用一次, 代表页面已经准备就绪, 可以和视图层进行交互。

■ onHide 页面隐藏函数。当页面隐藏时及当navigateTo 或小程序底部进行tab 切换时,调用该函数。

■ onUnload页面卸载函数。当页面卸载、进行navigateBack 或redirectTo 操作时, 调用该函数。

示例1：

首先，在ti.js文件中输入代码：

Page({
    //页面的初始数据
    data:{
    name:'lwk',//字符串
    age:30,//数字
    birthday:[{year:1988},{month:11},{ date:18 }],//数组object:{hobby:'computer'}//对象
    }
})

在ti.wxml中输入代码：

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

按Ctrl+S保存后，运行效果如下：

示例2：

在miniprogram目录文件下，新建一个images文件放入两张图片

在ti.js文件中输入代码：

// ti.js
Page({
  data:{
    name:'lwk',//字符串
    age:30,//数字
    birthday:[{year:1988},{month:11},{ date:18 }],//数组object:{hobby:'computer'}//对象
  }
})

在logs.js文件中输入代码：

// logs.js
const util = require('../../utils/util.js')

Page({
  data: {
    logs: []
  },
  onLoad() {
   console.log("logs onLoad ......"),
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(log => {
        return {
          date: util.formatTime(new Date(log)),
          timeStamp: log
        }
      })
    })
  },
// 生命周期函数--监听页面加载 

      //生周期函数--监听页面初次渲染完成 
      onReady: function (){
        console.log("logs onReady......")},
      // 生命周期函数--监听页面显示 
      onShow: function () {
        console.log("logs onShow ......")},
      //*生命周期函数--监听页面隐藏 
      onHide: function () {
        console.log("logs onHide ......")
      },
      //生命周期函数--监听页面卸载
       onUnload: function (){
        console.log("logs onUnload......")
       }
})

在app.json中写入代码：

{
  "pages": [
    "pages/ti/ti",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "images/logs.jpg",
      "selectedIconPath": "images/logs.jpg"
    },{
      "pagePath": "pages/ti/ti",
      "text": "ti页",
      "iconPath": "images/ti.jpg",
      "selectedIconPath": "images/ti.jpg"
    }]
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "lazyCodeLoading": "requiredComponents"
}

保存编译，运行结果：

（3)定义事件处理函数

开发者在Page() 中自定义的函数称为事件处理函数。视图层可以在组件中加入事件绑定, 当达到触发事件时, 小程序就会执行Page() 中定义的事件处理函数。

示例代码如下：

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

(4)使用setData 更新数据

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

2.6页面文件

页面结构文件(WXML) 是框架设计的一套类似HTML的标签语言, 结合基础组件、事件系统, 可以构建出页面的结构, 即.ｗｘｍｌ文件。在小程序中, 类似HTML的标签被称为组件, 是页面结构文件的基本组成单元。

2.6.1.数据绑定

１.简单绑定

简单绑定是指使用双大括号({{}})将变量包起来, 在页面中直接作为字符串输出使用。简单绑定可以作用于内容、组件属性、控制属性等的输出。

注意：简单绑定作用于组件属性、控制属性等，双大括号外应该添加双引号。

2.运算

在{{}} 内可以做一些简单的运算(主要有算术运算、逻辑运算、三元运算、字符串运算等), 这些运算均应符合JavaScript 运算规则。

示例代码如下：

目的算术运算、逻辑运算、三元运算运算代码

在ti.wxml写入代码：

<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>算术运算：{{age+num}}</view>
<view>逻辑运算：{{age==40}}</view> 
<view>三元运算：{{age==1 ?3:4}}</view>

在ti.js文件中输入代码：

// ti.js
Page({
  data:{
    name:'lwk',//字符串
    age:30,//数字
    birthday:[{year:1988},{month:11},{ date:18 }],//数组object:{hobby:'computer'}//对象
}
})

运行结果：

2.6.2条件数据绑定

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

１.wx:if条件数据绑定wx:if条件数据绑定是指使用wx:if 这个属性来判断是否数据绑定当前组件。当需要添加多个分支块时, 可以使用wx:elif、wx:else属性。当控制表达式为true 时,数据绑定一个分支; 当控制表达式为false 时, 数据绑定另一个分支。

２.block:wx:if 条件数据绑定

例如：

目的：使用条件数据绑定运行字符串

在ti.js中继续加入代码：

// ti.js
Page({
  data:{
    name:'lwk',//字符串
    age:30,//数字
    birthday:[{year:1988},{month:11},{ date:18 }],//数组object:{hobby:'computer'}//对象
num:100,
students:[
  {nickname:"Tom",height:150,weight:150},
  {nickname:"Anne",height:160,weight:100}
]
}
})

在ti.wxml继续加入代码：

<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>算术运算：{{age+num}}</view>
<view>逻辑运算：{{age==40}}</view> 
<view>三元运算：{{age==1 ?3:4}}</view> 

<view wx:if="age>40">1</view> 
<view wx:elif="age==40">2</view> 
<view wx:else>3</view> 
<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>

运行结果：

2.6.3列表数据绑定

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

１.wx:for 在组件上, 可以使用wx:for 控制属性绑定一个数组, 将数据中的各项数据循环进行数据绑定到该组件, 格式如下:

<view wx.for="{{items}}">
{{index}}:{{item}}
</view>

2.6.4 模板

概念：在小程序中, 如果要经常使用几个组件的组合(如“登录” 选项), 通常把这几个组件结合定义为一个模板, 以后在需要的文件中直接使用这个模板。

１.定义模板

模板代码由wxml组成, 因此其定义也是在wxml文件中, 定义模板的格式为:

< template ＝ "模板名" >

相关组件代码为: </template> 其中, < template> 为模板标签, name 属性用于定义模板的名称。

２.调用模板

将模板定义后, 就可以对其进行调用了。调用模板的格式为: < template is＝ "模板名称" data == "{{传入的数据}}" />

例如：

在原来的ti.js文件中加入代码：

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

在原来的ti.js加入代码：

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

运行结果：