第二章微信小程序开发基础-CSDN博客

本文链接：https://blog.csdn.net/ghgduhv568te4y/article/details/136468173

2.1 小程序的基本目录结构

pages：包含所有页面文件；

utils:工具包

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

app.jsomn:小程序公共设置文件，配置小程序全局设置

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

index.js：页面逻辑文件

index.wxml：页面结构文件

index.wxss：页面样式文件

index.json：页面配置文件

2.2 小程序的开发框架

视图层：是所有.wxml文件于.wxss文件的集合：.wxml文件用于描述页面的结构；.wxss文件用于描述页面的样式。

逻辑层：用于处理事务逻辑。

数据层：在逻辑上包括页面临时数据或缓存，文件存储（本地存储）和网络存储于调用。

2.3 创建小程序

第一步，删除index文件夹（pages目录里），

第二步，点击pages文件，在文件右上新建新建文件夹（英文命名，例如dong），分别新建 dong .js dong.json dong.wxml dong.wxss 等文件

第三步，删除原先pages，替换成现在用的"pages/dong/dong",页面文件。

第四步分别编辑并保存dong .js dong.json dong.wxml dong.wxss，代码如下：

dong .js：

Page({

})

dong.json ：

{
  
}

dong.wxml ：

星空白

dong.wxss：css样式

完成以上步骤，在工具栏点击编译，即完成。

运行效果图：

2.4 配置文件

2.4.1全局配置文件

1.0 pages配置项：pages配置项是必选项

{
  "pages": [
    "pages/dong/dong",
    "pages/logs/logs"
  ]
}

2.0 window配置项：

配置代码：

  "window":{
    "navigationBarBackgroundColor":"#fff",
    "navigationBarTextStyle":"black",
    "navigationBarTitleText": "微信小程序",
    "backgroundColor": "#ccc",
    "backgroundTextStyle":"light"
  }

3.0 tabBar配置

tabbar中lis选项

配置代码：

  "tabBar": {
    "color": "#666666",
    "selectedColor": "#ff0000",
    "borderStyle":"black",
    "backgroundColor": "#fffffff",
  "list": [
    {
    "pagePath":"pages/dong/dong",
    "iconPath": "img/1.jpg",
    "selectedIconPath": "img/2.jpg",
    "text": "日志"
    },
    {
    "pagePath":"pages/logs/logs",
    "iconPath": "img/1.jpg",
    "selectedIconPath": "img/2.jpg",
    "text": "新闻"
    } 
  ]
  },
"networkTimeout": {
  "request":20000,
  "connectSocket":20000,
  "uploadfile":20000,
  "downloadFile":20000 
}

4.0 networktimeeout配置项：

2.5 逻辑层文件

2.5.1 项目逻辑文件：

2.5.2 页面逻辑文件件：

2.6 页面结构文件

2.6.1数据绑定

运算：

<view>爱好：{{object.hobby}}</view>
<view>算数运算:{{age+num}}</view>
<view>逻辑运算：{{age==40}}</view>
<view>三元运算：{{age==30 ? 'happy':'sad'}}</view>
<view wx:if="{{age>40}}">1</view>
<view wx:elif="{{age==40}}"></view>
<view wx:else>-1</view>

2.6.4 模板

定义模板：

<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>

最终运行效果图：

2.7 页面样式文件

页面样式文件（WXSS）