第二章总结

一、目录结构

1）主体文件

1. pages:用于放置所有的页面文件（每一个页面为一个文件夹
2. utils：工具包，pages中所有的页面都可以用到此中的工具
3. app.js:主逻辑文件 进行小程序的全局示例注册
4. app.json:主配置文件，配置小程序的全局设置
5. app.wxss：主样式文件（类似HTML的.css文件

2）页面文件

1. js：文件为逻辑文件，在该文件夹中编写JavaScript代码控制页面的逻辑
2. json：页面配置文件
3. wsml：页面结构文件，类似HTML的.html文件
4. wxss：页面样式表文件，用于定义本页面中用到的各类样式表

二、开发框架

视图层：wxml决定能看到的东西，wxss决定看到的东西的样式属于视图层
逻辑层：用于处理事务逻辑
数据层：进行页面临时数据的存储、文件存储和网络存储于调用

三、创建

删除pages的index，删除app.json中的index的页面，后于pages中创建一个文件夹并在该文件夹中创建页面文件，后在app.json中添加该文件夹的页面，然后在json中添加{}，json添加Page({})

会用到的：

全局配置文件（app.json)

window配置项

tabBa配置项

tabBar中的list项

networkTimeOut配置项

项目逻辑文件配置项

页面逻辑文件配置项

一些代码：

app.json:

{
  "pages": [
    "pages/test1/test",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ac5845",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "罗德岛工具箱",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "color": "blue",
    "selectedColor": "#ff0000",
"backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/logs/logs",
      "text": "111",
      "iconPath": "images/屏幕截图 2024-03-06 193809.png",
      "selectedIconPath": "images/屏幕截图 2024-03-06 193800.png"
    },{
      "pagePath": "pages/test1/test",
      "text": "222",
      "iconPath": "images/屏幕截图 2024-03-06 194010.png",
      "selectedIconPath": "images/屏幕截图 2024-03-06 194000.png"
    }]
  },
  "networkTimeout": {
    "request": 20000,
    "connectSocket": 20000,
    "uploadFile": 20000,
    "downloadFile": 20000
  }
}

  

app.js:

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

test.js:

Page({
data:{
  name:'lw',
  age:30,
  brithday:[{year:2077},{month:11},{date:18}],
  object:{hobby:'computer'},
  num:100,
  students:[
    {nickname:'tom',height:'170',weight:'140'},
    {nickname:'anna',height:'160',weight:'100'}
  ]
    }
  })

test.wxml:

<view>姓名：{{name}}</view>
<view>年龄：{{age}}</view>
<view>出生日期：
{{brithday[0].year}}年
{{brithday[1].month}}月
{{brithday[2].date}}日
</view>
<view>爱好:{{object.hobby}}</view>
<view>算术运算:{{age+num}}</view>
<view>逻辑运算：{{age==40}}</view>
<view>三元运算：{{1==4 ? 4 : 1}}</view>
<view>三元运算：{{age>=20 ? 'yes' : 'no'}}</view>
<view wx:if="{{age>40}}">1</view>
<view wx:elif="{{age==40}}">0</view>
<view wx:else>-1</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>

四.运行