第二章总结

2.1 小程序的基本目录结构

一:主体文件有哪些以及各有什么作用

1.app.js 小程序逻辑文件 主要用来注册晓辰戌全局实例

2.app.json 小程序公共设置文件 配置小程序全面设置

3.app.wxss 小程序主样式表文件

二:页面文件有哪些以及各有什么作用

1.js文件 页面逻辑文件 用于编写JavaScript代码控制页面的逻辑

2.wxml文件 页面结构文件 用于设计页面的布局 数据绑定等

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

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

2.2 小程序的开发框架

小程序MINA的框架示意图如下图所示

小程序MINA有哪几个层以及作用

1.视图层 由WXML与WXSS编写

2.逻辑层 用于处理事务逻辑 开发框架的逻辑层是采用JavaScript编写的 逻辑层就是通过各个页面的.js脚本文件实现的

3.数据层 数据层包括:页面临时数据或缓存  文件储存(本地储存)  网络储存与调用

2.3 创建小程序页面 

创建小程序页面如下图所示

文件.js输入

Page({

     })

文件.json输入

{
  "usingComponents": {}
}

文件.wxml输入

<text>南昌</text>

2.4 配置文件

全局配置项 

window配置项及其描述 

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

tabBar配置项机器描述

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

tabBar中list选项

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

networkTimeout配置项

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

页面配置的window文件代码

"window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"

 2.5 逻辑层文件

项目逻辑文件配置项

   App()函数用于注册一个小程序 参数为Object 用于指定小程序的生命周期函数 

 我制作的Demo2的app.js文件代码

// app.js
App({
  onLaunch: function(){
    console.log("小程序初始化完成")
  },
  onShow:function(options){
    console.log("小程序显示");
    console.log( this.data);
    console.log(this.fun())
  },
  onHide:function(){
    console.log("小程序进入后台")
  },
  onError:function(msg){
  },
  fun:function(){
    console.log("在app.js中定义的方法");
  },
  data:'在app.js中定义的属性'
})

页面逻辑文件配置项

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

 

数据初始 数据绑定及运行结果 

                                                                       数据初始

data: {
   name:'lwk',
   age:30,
   num:100,
   birthday:[{ year:1988},{month:11},{date:18}],
   object:{hobby:'computer'},
       })

                                                                        数据绑定

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

运行效果

 

2.6 页面结构文件 

运算代码与结果

.wxml里的 

  <view>算术运算:{{age+num}}</view>
  <view>逻辑运算:{{age==40}}</view>
  <view>三元运算:{{age==1 ? 3 : num}}</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>

.js里的 

 students:[
     {nickname:"Tom",height:180,weight:150},
     {nickname:"Aiz",height:160,weight:100}
   ]
  },

冒泡事件表

  在WXML中 冒泡事件有6个 

2.7 页面样式文件 

                                                              WXSS常用事件 

  WXSS文件与CSS文件有大部分属性名及属性值相同