第二章总结

最新推荐文章于 2024-11-09 12:38:09 发布

yiyiyayo

最新推荐文章于 2024-11-09 12:38:09 发布

阅读量567

点赞数 8

文章标签：微信小程序

本文链接：https://blog.csdn.net/2401_83190345/article/details/136460070

版权

小程序的基本目录结构

app.js主负责逻辑
app.json主配置文件
app.wxss主样式文件

在微信小程序的基本目录结构中，项目主目录下有2个子目录（pages和utils）和4个文件（app.js、app.json、app.wxss和project.config.json）。

project.config.json文件是项目配置文件，包含项目名称、AppID等相关信息。

pages目录中有2个子目录，分别是index和logs，每个子目录中保存着一个页面的相关文件。通常，一个页面包含4个不同拓展名（.wxml、.wxss、.js和.json）的文件，分别用于表示页面结构文件、页面样式文件、页面逻辑文件和页面配置文件。

utils目录用来存放一些公共的.js文件，当某个页面需要用到utils.js函数时，可以将其引入后直接使用。

主体文件

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

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

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

页面文件

.js文件页面逻辑文件，这些文件定义了小程序页面的逻辑，包括页面的生命周期函数、数据的处理和事件的绑定等。每个小程序页面至少包含一个与页面同名的js文件。

.wxml文件页面结构文件，WXML（WeiXin Markup Language）文件是小程序页面的结构描述文件，类似于HTML。它包含了页面的组件结构和布局，并通过数据绑定的方式将页面的数据渲染到对应的位置。

.wxss文件页面样式表文件，WXSS（WeiXin Style Sheet）文件是小程序页面的样式描述文件，类似于CSS。它用于定义页面的样式，包括文本样式、布局样式、背景样式等。

.json文件页面配置文件，每个小程序页面都需要有一个与页面同名的json文件。这个文件用于配置页面的一些属性，包括页面标题、导航栏样式、页面背景色等。

小程序的开发框架

小程序MINA框架示意图

视图层

MINA框架的视图层由WXML与WXSS编写，由组件来进行展示。对于微信小程序而言，视图层就是所有.wxml文件与.wxss文件的集合:.wxml文件用于描述页面的结构;.wxss文件用于描述页面的样式。
微信小程序在逻辑层将数据进行处理后发送给视图层展现出来，同时接收视图层的事件反馈。视图层以给定的样式展现数据并反馈时间给逻辑层，而数据展现是以组件来进行的。

逻辑层

逻辑层用于处理事务逻辑。对于微信小程序而言，逻辑层就是所有js脚本文件的集合。微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
微信小程序开发框架的逻辑层是采用JavaScript编写的。在JavaScript的基础上，微信团队做了适当修改，以便提高开发小程序的效率。

数据层

数据层在逻辑上包括页面临时数据或缓存、文件存储(本地存储)和网络存储与调用。

创建小程序页面

在page目录下新建一个index目录，并在index目录下新建index.js、index,json、index.wxml和index.wxss空文件。

代码

index.js


Page({
  data:{
    name:'lwk',
    age:30,
    birthday:[{year:1988},{month:11},{date:18}],
    object:{hobby:'computer'},
    num:99,
    students:[
      {nickname:"TOM",height:180,weight:140},
      {nickname:"JOM",height:160,weight:90},
    ]
  }
}

)

index.json

{
  
}

index.wxml

欢迎学习微信小程序
<view>姓名：{{name}}</view>
<view>年龄：{{age}}</view>
<view>
  {{birthday[0].year}}年
  {{birthday[1].month}}月
  {{birthday[2].date}}日
</view>
<view>爱好：{{object.hobby}}</view>

<view>算术运算:{{age+num}}</view>
<view>逻辑运算:{{age==40}}</view>
<view>三元运算：{{age==1?3:num}}</view>

<view wx:if="{{age>40}}">1</view>
<view wx:elif="{{age==40}}">2</view>
<view wx:else>3</view>

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

app.json

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarBackgroundColor": "#ff0",
    "navigationBarTitleText": "微信小程序",
    "backgroundColor": "#ccc",
    "backgroundTextStyle":"light"
  },
  "tabBar": {
    "color": "#666",
    "selectedColor": "#ff0000",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/pi.png",
        "selectedIconPath": "images/tu.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "images/pi.png",
        "selectedIconPath": "images/tu.png",
        "text": "新闻"
      }
    ]
  },
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}