微信小程序开发第二节总结

小程序的基本目录结构

1.主体文件：微信小程序的主体部分由三个文件组成。

app.js 小程序逻辑文件，主要用来注册小程序全局实例。

app.json 小程序公共设置文件，配置小程序全局设置。

app.wxss 小程序主样式表文件，类似HTML的.css文件。

2.页面文件：小程序通常是由多个页面组成的，每个包含四个文件，同一页面的这四个文件必须具有相同的路径与文件同名。

.js文件 页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。

.wxml文件 页面样式表文件，用于设计页面布局，数据绑定等。

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

.json文件 页面配置文件。

2.小程序的开发框架

视图层，逻辑层，数据层。

Page({
  
})
{
  
}
<text>嘿嘿嘿嘿</text>

运行成功！

window配置项及其描述

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

 "window": {
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextstyle": "black",
    "navigationBartitletext": "微信小程序",
    "backgroundColor": "#ccc",
    "backgroundtextsstyle":"light"

  },

tabBar配置项

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

 "tabBar": {
    "color": "#666666",
    "selectedColor": "#ff0000",
    "borderStyle":"black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "images/hh.png",
        "selectedIconPath": "images/ll.png",
        "text": "日志"
      },
      {
        "pagePath": "pages/haode/haode",
        "iconPath": "images/ll.png",
        "selectedIconPath": "images/hh.png",
        "text": "新闻"
      }
    ]
  }
}

<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>爱好：{{object.hobby}}</view>
<view>逻辑运算{{ age== 40}}</view>
<view>算数运算{{ age + 3}}</view>
<view>三元运算{{1==1 ?3:4}}</view>

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

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