微信小程序第二章总结

小程序的基本目录结构

utils：工具包，可以为一些图片，音频资源类文件来进行存放。

pages：所有页面，每个页面一个文件夹。目录中有两个子目录，分别是index和logs，每个子目录都有着相关文件。通常一个页面包含4个不同的扩展名（.wxml件、.wxml、.js和.json）文件，分别用于表示、页面逻辑文件、页面配置文件、页面结构文件。

主体文件：app.js:主逻辑文件，不可缺少；app.json：小程序公共设置文件，主的配置文件，不可缺少；app.wxss：主样式文件，设置的样式在其他页面文件中同样有效该项目不是必须的。

小程序的开发框架

视图层：是所有.wxml和.wxss文件的集合，.wxml用于描述页面的结构；.wxss用于描述页面的样式。

逻辑层：就是所有.js脚本文件的集合，微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的反馈。

数据层：

1. 页面临时数据缓存
2. 文件存储

   wx.getStorage 获取本地数据缓存

   wx.setStorage 设置本地数据缓存

   wxclearStorage 清理本地数据缓存

3. 网络存储与调用

         wx.request 发起网络请求

         wx.uploadFlie 上传文件

         wx.downloadFile 下载文件

创建小程序页面

app.json文件代码

{
  "pages": [
   "pages/hello/hello",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom"
  },
  "style": "v2",
  "rendererOptions": {
    "skyline": {
      "defaultDisplayBlock": true,
      "disableABTest": true,
      "sdkVersionBegin": "3.0.0",
      "sdkVersionEnd": "15.255.255"
    }
  },
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

Page({
  
})

{
  
}

你好啊,学习第二章微信小程序

配置文件 

全局配置文件

表1 全局配置项

1. pages配置项

pages配置项接受一个数组，用来指定小程序由那些页面组成，数组的每一项都是字符串，代表对应的“路径”+“文件名”。例如app.json文件的配置如下：

{
  "pages": [
   "pages/hello/hello",
    "pages/logs/logs"
  ],

2. window配置项

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

表2 window配置项及其描述

例如在app.json文件配置如下

 "window": {
    "navigationBarBackgroundColor": "#94F521",
    "navigationBarTitleText": "微信小程序",
    "navigationBarTextStyle": "black",
    "BackgroundColor": "#ccc",
    "backgroundTextStyle": "light"
  },

3. tabBar配置项

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

表3 tabBar配置项及其描述

表4 tabBar中list选项

例如在app.json文件配置如下：

 

"tabBar": {
      "color": "#666",
      "selectedColor": "#f00",
      "borderStyle": "black",
      "backgroundColor": "#fff",
      "list": [
        {
        "pagePath":"pages/hello/hello",
        "iconPath":"images/index.jpg",
        "selectedIconPath": "images/index1.jpg",
        "text": "日志"
      },
      {
        "pagePath":"pages/logs/logs",
        "iconPath":"images/index.jpg",
        "selectedIconPath": "images/index1.jpg",
        "text": "新闻"
      }
      ]
  },

 

4. networkTimeout配置项

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

表5 networkTimeout配置项

5. debug配置项

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

页面配置文件

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

页面配置的代码如下：

{
  "navigationBarBackgroundColor": "#94F521",
    "navigationBarTitleText": "微信小程序-新闻",
    "navigationBarTextStyle": "black",
    "BackgroundColor": "#ccc",
    "backgroundTextStyle": "light"
}

逻辑层文件

项目逻辑文件

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

项目逻辑文件配置项

app.js配置文件

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

页面逻辑文件 

 

页面逻辑文件配置项

1. 设置初始数据 

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

在hello.js中完成数据初始代码如下：

Page({
  data:{
    name:'lwk',
    age:30,
    birthday:[{year:1988 },{month:11},{date:18}],
    object:{hobby:'computer'},
    students:[
      {nickname:"Tom",height:180,weight:150},{nickname:"Anne",height:160, weight:100}
  ]
  }
})

在hello.wxml 中数据绑定代码如下：

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

 

2. 定义当前生命周期

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

3. 定义事件处理函数

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

4. 使用sttData更新数据

页面结构文件

 数据绑定

（1）简单绑定

<view>姓名：{{name}}</view>
<view>年龄：{{age}}</view>

（2）运算

<view>算术运算:{{age + 20}}</view>
<view>逻辑运算:{{age==30}}</view>
<view>三元运算:{{age==30?20:5}}</view>

条件数据绑定

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

 模版

（1）定义模版

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

（2）调用模版

</template>
<template is="stu" data="{{students}}"></template>

页面事件 

 

页面样式文件 

WXSS常用属性