第二章总结

dsgbg

已于 2024-03-08 12:59:28 修改

阅读量828

点赞数 25

文章标签：微信小程序

于 2024-03-04 20:51:35 首次发布

本文链接：https://blog.csdn.net/dsgbg/article/details/136460234

版权

微信小程序开发基础

1 小程序的基本目录结构

资源管理器中pages目录由index和utils两个子目录组成。

index子目录如图1-1所示：

utils子目录如图1-2所示：

1.1 主体文件

微信小程序的主体部分由app.js、app.json、app.wxss3个文件组成。

app.js 小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app.js文件和其他页面的逻辑文件打包成一个Javascript文件。该文件在项目中不可缺少。

app.js文件代码1-3所示

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this;
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo;
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      });
    }
  },
  globalData:{
    userInfo:null
  }
})

app.json 小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少。

app.json文件代码1-4所示

{
  "pages":[
    "pages/index/index",
    "pages/calc/calc",
    "pages/history/history",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#da7c0c",
    "navigationBarTitleText": "简易计算器",
    "navigationBarTextStyle":"white"
  }
}

app.wxss 小程序主样式表文件，类似HTML的.css文件。在主样式表文件中设置的样式在其他页面文件中同样有效。该文件在项目中不是必需的。

app.wxss文件代码1-5所示

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

1.2 页面文件

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

.js文件页面逻辑文件，在该文件中编写JavaSeript代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。

.wxml文件页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的、html文件。该文件在页面中不可缺少。

.wxss文件页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖app.wxss中的样式规则;否则，直接使用app.wxss中指定的样式规则。该文件在页面中不可缺少。

.json文件页面配置文件。该文件在页面中不可缺少。

2 小程序的开发框架

微信小程序的开发框架是一种用于在微信环境中开发具有原生APP体验服务的工具。整个小程序框架系统主要分为两部分：视图层（View）和逻辑层（App Service）。小程序提供了自己的视图层描述语言WXML和WXSS，以及基于JavaScript的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

如图2-1所示

2.1 视图层

MINA框架的视图层由WXML与WXSS编写，由组件来进行展示。对于微信小程序而视图层就是所有.wxml文件与.wxss文件的集合:.wxml文件用于描述页面的结构:.wxss 文件用于描述页面的样式。

2.2 逻辑层

逻辑层用于处理事务逻辑。对于微信小程序面言，逻层就是所有,脚本文件的集合微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

3 创建小程序页面

3.1 创建页面文件

在资源管理器中pages新建一个maxinhua文件并在改文件下新建maxinhua. js maxinhua.json maxinhua.wxml maxinhua.wxss四个空文件。

如图3-1所示

此时系统依旧会报错，首先，我们打开maxinhua.wxml输入“马新华爱吃华莱士” 。然后打开app.json配置文件输入如下3-2代码

这段代码将maxinhua页面注册到小程序中，这个对象的第一属性pages接受了一个数组,该数组的每一项是一个字符串，该字符串由“路径”+“文件名”组成，不包含扩展名, pages属性用来指定这个项目由哪些页面组成，多个页面之同用“,”分隔。

maxinhua.json文件输入如下3-3代码

在maxinhua.json中文件中加入“{}”即可。

maxinhua.js文件输入如下3-4代码

只需要引入Page()方法，保证maxinhua.js文件不为空即可。

4 配置文件

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

4.1 全局配置文件

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

4-1 全局配置项

1.pages配置项

pages配置项接受一个数组，用来指定小程序由哪些页面组成，数组的每一项都是字符串，代表对应页面的“路径”+“文件名”。pages 配置项是必填项。

设置pages 配置项时，应注意以下3点:

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

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

(3)文件名不需要写文件扩展名。小程序框架会自动寻找路径及对,、jmwxss 文件进行整合数据绑定。

2. window配置项

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

4-2 window配置项及其描述

在app.js中设置如下window配置项代码4-3所示:

"window":{
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle":"black",
    "navigationBarTitleText": "微信小程序",
    "backgroundColor": "#ccc",
    "backgroundTextStyle":"light"
  }

3.tabBar配置项

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

4-4 tabBar 配置项及其描述

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

4-5 tabBar中list选项

在app.json 文件中设置如下 tabBar 配置代码4-6所示:

"tabBar": {
    "color": "#666666",
    "selectedColor": "#ff0000",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/maxinhua/maxinhua",
      "text": "ad",
      "iconPath": "images/ad.png",
      "selectedIconPath": "images/ad.png"
    },{
      "pagePath": "pages/logs/logs",
      "text": "ps",
      "iconPath": "images/ps.png",
      "selectedIconPath": "images/ps.png"
    }
  ]

配置后的页面效果如图4-7所示:

4.networkTimeout配置项

小程序中各种网络请求AP的超时时间值只能通过nawakTimeout 配置项进行统一设置,不能在 API 中单独设置。networkTimeout可以配置的属性。

4-7 networkTimeout配置项

5.debug配置项

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

4.2 页面配置文件

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

页面中的 window 配置只需书写配置项，不必书写 window，代码4-8所示:

"navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle":"black",
    "navigationBarTitleText": "微信小程序",
    "backgroundColor": "#ccc",
    "backgroundTextStyle":"light"

5 逻辑层文件

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

5.1 项目逻辑文件

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

App()函数用于注册一个小程序，参数为0bject，用于指定小程序的生命周期函数、用户自定义属性和方法。

如图5-1所示:

例5-2所示：

App({
  onLaunch(){
    console.log("小程序初始化")
  },
  onShow(){
    console.log("小程序启动")
  },
  onHide(){
    console.log("小程序隐藏")
  }
})

在逻辑层，Page()方法用来注册一个页面，并且每个页面有且仅有一个。

5-3 页面逻辑文件配置项

设置初始数据是对页面的第一次数据绑定。对象data将会以JSON(Javascript Obiect No-tation，JS对象简谱)的形式由逻辑层传至视图层。因此，数据必须是可以转成JSON的格式(字符串、数字、布尔值、对象、数组)。
视图层可以通过 WXML 对数据进行绑定。

maxinhua.js代码5-4所示:

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

maxinhua.wxml代码5-5所示:

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

效果图如图5-6所示:

5.2 页面逻辑文件

页面结构文件(WXML)是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构，即.wxml文件。在小程序中，类似HTML的标签被称为组件，是页面结构文件的基本组成单元。这些组件有开始(如<view>)和结束(如</view>)标志，每个组件可以设置不同的属性(如id、class 等)，组件还可以嵌套。

1.简单绑定

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

2.运算

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

js代码5-7所示:

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

wxml代码5-8所示:

<view>算数运算:{{num+age}}</view>
<view>算数运算:{{num+100}}</view>

<view>逻辑运算:{{num==100}}</view>
<view>逻辑运算:{{num==50}}</view>

<view>三元运算:{{1==2?3:4}}</view>
<view>三元运算:{{1==1?3:4}}</view>
<view>三元运算:{{age==1?3:num}}</view>

效果图如图5-9所示:

3.条件数据绑定

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

wxml代码5-10所示:

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

js代码5-11所示:

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

效果图如图5-12所示:

4.列表数据绑定

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

wxml代码5-13所示:

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

js代码5-14所示:

Page({
  //页面的初始数据
  data:{
    name:'lwk',  //字符串
    age: 30,  //数字
    num: 100, 
    students:[
      {nickname:"Tom",height:180,weight:150},
      {nickname:"Anne",height:160,weight:100}
    ],
    birthday:[{year:1988},{month:11},{ date:18 }],  //数组
    object:{hobby:'computer'}  //对像
  }
})

效果图如图5-15所示:

5.模版

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

wxml代码5-16所示:

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

js代码5-17所示:

Page({
  //页面的初始数据
  data:{
    name:'lwk',  //字符串
    age: 30,  //数字
    num: 100, 
    students:[
      {nickname:"Tom",height:180,weight:150},
      {nickname:"Anne",height:160,weight:100}
    ],
    birthday:[{year:1988},{month:11},{ date:18 }],  //数组
    object:{hobby:'computer'}  //对像
  }
})

效果图如图5-18所示:

6 页面样式文件

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

6-1 WXSS常用属性

dsgbg

关注

25
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
第二章总结

这段代码将maxinhua页面注册到小程序中，这个对象的第一属性pages接受了一个数组,该数组的每一项是一个字符串，该字符串由“路径”+“文件名”组成，不包含扩展名, pages属性用来指定这个项目由哪些页面组成，多个页面之同用“,”分隔。对于微信小程序而视图层就是所有.wxml文件与.wxss文件的集合:.wxml文件用于描述页面的结构:.wxss 文件用于描述页面的样式。文件页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的、html文件。该文件在每个小程序的页面中不可缺少。
复制链接

扫一扫