【微信小程序】第二章总结

学习各个文件的作用：

pages文件:各个页面的配置文件，每个文件夹对应一个页面

页面文件:

打开其中一个页面文件夹，可以看到4个文件ts（或.js）是逻辑文件，.json是配置文件，.wxss是样式文件，.wxml是结构文件

注意：.json至少需要一个{}，.js至少需要一个Page({})。

.js:可以定义变量，数组的值以键值对呈现：

Page({
  data:{
    name:'bsb',//定义变量
    age: 18,
    bir:[{year:2004},{month:8},{day:24}],//定义数组
    obj:{hoppy:'com'},//定义对象
    stu:[
      {name:"aaa",hei:180},
      {name:"bbb",hei:810}
    ]
  }
})

.json:可以进行页面窗口设置

{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信小程序-新闻",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": true
}

.wxml:页面控件，结构设置，可以对其中的进行逻辑运算和算术，还可以逻辑处理，模板的建立和调用

<view>姓名：{{name}}</view>
<view>年龄：{{age}}</view>
<view>生日:
{{bir[0].year}}年
{{bir[1].month}}月
{{bir[2].day}}日
</view>
<view>爱好：{{obj.hoppy}}</view>
<view>大羁绊：{{age + 100}}{{age == 18 ? 0 : 1}}米</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="{{stu}}">
  <text>姓名：{{item.name}}</text><!--逻辑循环-->
  <view>身高：{{item.hei}}</view>
  </view>
</template>

<template is="stu" data="{{stu}}"></template><!--调用模板-->

.wxss:设置样式，样式设置和css语法几乎一样

view{
  color: blueviolet;
  text-align: center;
  font-size: 20px;
}

结果如图：

app文件：管理主体的设置

app文件：

 

在pages外，和pages文件夹并列的app打头的文件，是主文件，.wxss用于大致定义页面格式，.json定义全局配置，.ts逻辑处理

app.json:注册页面文件，用于页面文件注册（如图“pages”项），进行窗口和下拉窗口简单设置（如图“window”项）

页面跳转图标设置（如图“tabBar”项），“list”项必须是前面“pages”项注册的页面地址，点击对应地址的图标，可以跳转到对应页面

代码参考：

{
  "pages": [
    "pages/firstApp/firstApp",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "微信小程序",
    "navigationBarBackgroundColor": "#ff00ff",
    "backgroundTextStyle": "dark",
    "backgroundColor": "#00ff00",
    "enablePullDownRefresh": true
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "lazyCodeLoading": "requiredComponents",
  "tabBar": {
    "color": "#00ff00",
    "selectedColor": "#000000",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [{
      "pagePath": "pages/firstApp/firstApp",
      "text": "sbb",
      "iconPath": "imgs/sbb.png",
      "selectedIconPath": "imgs/sbb.png"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "bbs",
      "iconPath": "imgs/sbb.png",
      "selectedIconPath": "imgs/sbb.png"
    }]
  }
}

app.js:负责生命周期调用函数的内容编写

App({
  onLaunch(){
    console.log("初始化");
  },
  onShow(){
    console.log("启动");
  },
  onHide(){
    console.log("关闭");
  }
})

结果如图：