第二章总结

小程序基本目录结构

两个子目录（pages，utils）和4个文件（app.js;app.json;app.wxss;project.config.json）

主体文件；

app.js:小程序逻辑文件

app.json:小程序公共设置文件

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

页面文件;（都是不可或缺的，问就是少不了）

.js:页面逻辑文件

.wxml:页面结构文件

.wxss:页面样式表文件

.json:页面配置文件

小程序的开发框架

视图层；决定我们看到的东西

逻辑层；主要就是我们的.js文件

数据层；没有明确的单独的一个层次，数据是融合在整个整体里面

数据层包括，页面临时数据或缓存；文件储存；网络存储与调用。

创建小程序页面

首先删除pages里面的index文件，然后打开app.json文件，把“pages/index/indes”命令删除

然后在pages里面新建一个文件夹（名字自己取）这里取ly，在ly文件夹里面新建4个文件

分别为ly.js;      ly.json;       ly.wxml;     ly.wxss

打开app.json，在pages里面加上“pages/ly/ly”，   （记住不能少逗号，与下面的命令区别）

然后在ly.js  ;     ly.json;     ly.wxml里面分别加上内容

ly.js  ;     ly.json; 里面的内容不能少

ly.wxml里面的内容可以自己随意编写

然后单击编译按钮进行编译，效果图如上，代码如下

Page({
  
})




{
  
}




孤独的岛
你听得到

配置文件

在app.json中进行配置

首先要单机miniporgram里面新建一个文件夹images这个文件用来存放图片，图片大小不可以超过

40kb，放俩图片

逻辑层文件

{
  "pages": [
    "pages/ly/ly",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ff69b4",
    "navigationBarTextStyle":"black",
    "navigationBarTitleText": "微信小程序",
    "backgroundColor": "#ccc",
    "backgroundTextStyle":"light"
  },
  "tabBar": {
    "color": "#666666",
    "backgroundColor": "#ff0000",
    "borderStyle":"black",
    "list": [
      {
        "pagePath": "pages/ly/ly",
        "iconPath": "images/1.jpg",
        "selectedIconPath": "images/2.jpg",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "images/1.jpg",
        "selectedIconPath": "images/2.jpg",
        "text": "新闻"
      }
    ]
},
"networkTimeout": {
  "request": 20000,
  "connectSocket": 20000,
  "uploadFile": 20000,
  "downloadFile": 20000
}
}

app.js代码

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

在之前新建的ly文件中

ly.js

Page({
  data:{
    name:'1wk',
    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}
    ]
  }
})

 

ly.json 导航栏因为就近原则会变成“微信小程序-新闻”

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

页面结构文件

ly.wxml代码

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

<view>算术运算:{{age+10086}}</view>
<view>逻辑运算:{{age <= 10086}}</view>
<view>三元运算:{{age==10 ? '缓缓飘落的枫叶像思念 ':'雨下整夜我的爱溢出就像雨水'}}</view>
<view wx:if="{{age>18}}">i</view>
<view wx:elif="{{age==18}}">love</view>
<view wx:else>you</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>

运行结果图

文件里面所有用到的配置项的用法和解释

页面事件 

定义事件函数

调用事件

冒泡事件

非冒泡事件

主要冒泡事件指某个组件上的事件被触发后，事件会向父级元素传递，父级元素在向其父级元素传递，一直到页面的顶级元素

页面样式文件

wxss常用属性；