微信小程序开发基础
小程序的基本目录结构
-
app.js： 这是小程序的入口文件，包含小程序的生命周期函数、全局变量等。在这个文件中，你可以进行一些全局配置和初始化工作。
-
app.json： 用于配置小程序的全局设置，如窗口背景色、导航栏样式、页面路径等。在这个文件中，你可以定义小程序的页面结构，设置小程序的全局配置项。
-
app.wxss： 小程序的全局样式文件，定义整个小程序的样式风格，包括文字样式、颜色等。
-
pages目录： 存放小程序的各个页面，每个页面通常由四个文件组成：
- page.js： 页面的逻辑代码。
- page.json： 页面的配置文件，用于配置页面的一些特殊设置，如页面标题、导航栏样式等。
- page.wxml： 页面的结构代码，使用类似HTML的标签语言定义页面结构。
- page.wxss： 页面的样式文件，定义页面的样式。
-
utils目录： 存放一些工具函数或者公共的业务逻辑代码。
小程序的开发框架
小程序的开发框架涉及MINA，MINA将系统分为视图层和逻辑层，以下是关于三个层次的总结
视图层(view)分为VXML和WXSS
VXML:视图层主要由WXML负责，用于描述小程序的页面结构。WXML类似于HTML，负责展示页面的布局和结构。
WXSS:视图层的样式由WXSS定义，类似于CSS。WXSS用于控制页面的外观，包括颜色、字体、布局等。
逻辑层： 负责页面的业务逻辑和事件处理，使用JavaScript编写，通过生命周期函数响应页面的生命周期事件。
数据层： 通过数据绑定实现逻辑层和视图层之间的数据同步，同时可以通过逻辑层发起网络请求获取数据。
如何创建小程序页面
1.打开app.json文件
2.在“pages"中复制已有的路径，并更改后面两个路径的名称即可，另一种是右击pages文件夹新建文件夹，在右击新建的文件夹，新建Page即可
清空创建的四个文件内容，在wxml中写入要写的内容；.js文件中有page（{}）即可；.json文件中有一对{}即可，至此创建完成
当下运行结果
配置文件
配置文件按其作用范围可以分为全局配置文件 (app.json) 和页面配置文件（*.json)
全局配置：小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
以下是一个包含了部分常用配置选项的 app.json ：
{
"pages": [
"pages/admin/admin",
"pages/logs/logs",
"pages/news/news"
],
"window": {
"navigationBarBackgroundColor": "#00FFFF",
"navigationBarTextStyle":"black",
"navigationBarTitleText": "小程序window功能演示",
"backgroundTextStyle":"light",
"backgroundColor": "#DF3737"
},
"tabBar": {
"color": "#DF3737",
"selectedColor": "#ff0000",
"borderStyle":"black",
"backgroundColor": "#00FFFF",
"list": [{
"pagePath": "pages/admin/admin",
"iconPath": "pages/image/001.png",
"selectedIconPath": "pages/image/002.png",
"text": "首页"
},
{
"pagePath": "pages/news/news",
"iconPath": "pages/image/003.png",
"selectedIconPath": "pages/image/004.png",
"text": "新闻"
}
]
},
"style": "v2",
"rendererOptions": {
"skyline": {
"defaultDisplayBlock": true,
"disableABTest": true,
"sdkVersionBegin": "3.0.0",
"sdkVersionEnd": "15.255.255"
}
},
"componentFramework": "glass-easel",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}
页面配置
每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
例如：
Page({
data:{
name:'lwk',
age:30,
num:"what",
birthday:[{ year:1991},{ month:11},{data:18}],
obiect:{hobby:'computer'},
students:[
{nickname:"linni",height:"160",weight:"85"},
{nickname:"tiany",height:"150",weight:"90"}
]
}
})
逻辑层文件
在微信小程序开发中，逻辑层主要包含小程序的页面逻辑和交互，主要由两个类型的文件组成：*.js（逻辑层文件）和*.wxml（视图层文件）。
-
逻辑层文件（*.js）：
- 作用： 包含小程序页面的逻辑代码，处理用户交互、网络请求、数据处理等任务。
- 生命周期函数： 包括
onLoad（页面加载时触发）、onShow（页面显示时触发）、onHide（页面隐藏时触发）等，用于执行不同阶段的逻辑操作。 - 数据绑定： 通过
data字段定义页面数据，可以通过数据绑定在视图层显示数据。 - 事件处理： 通过事件绑定和事件处理函数，响应用户的交互操作，例如点击、输入等。
-
视图层文件（*.wxml）：
- 作用： 定义小程序页面的结构和布局，使用类似 HTML 的语法。
- 数据绑定： 使用
{{}}语法进行数据绑定，将逻辑层的数据显示在页面上。 - 条件渲染和循环渲染： 使用
wx:if和wx:for等指令进行条件渲染和循环渲染，实现动态展示页面内容。 - 事件绑定： 通过
bind和catch绑定事件，将用户的交互操作传递给逻辑层处理。
-
样式层文件（*.wxss）：
- 作用： 定义小程序页面的样式，类似于 CSS。
- 全局样式和局部样式： 可以定义全局样式和局部样式，通过
app.wxss实现全局样式，通过页面独立的page.wxss实现局部样式。 - 样式导入： 可以使用
@import导入外部样式文件。
-
模板文件（*.wxml）：
- 作用： 将页面中重复的结构和代码抽离成模板，提高代码复用性。
- 模板引入： 使用
<import>和<template>标签引入模板文件，通过is属性调用模板。
逻辑层文件通过生命周期函数和事件处理实现与视图层的交互，数据绑定实现数据的动态展示，样式层文件定义页面的样式，而模板文件提高了代码的可维护性和复用性。这些文件共同构成了微信小程序的逻辑层。
页面结构文件
什么是页面结构文件？
页面结构文件通常是指网页的HTML文件，用于标记网页的结构和内容
在微信小程序开发中，页面结构文件通常是WXML，用于描述小程序页面结构，类似于HTML，但有一些特有的语法和标签
WXML还具有数据绑定之类的能力
数据绑定
WXML 中的动态数据均来自对应 Page 的 data。
简单绑定
数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：
内容
<view> {{ message }} </view>Page({
data: {
message: 'Hello MINA!'
}
})组件属性(需要在双引号之内)
<view id="item-{{id}}"> </view>Page({
data: {
id: 0
}
})关键字(需要在双引号之内)
true：boolean 类型的 true，代表真值。
false： boolean 类型的 false，代表假值。
<checkbox checked="{{false}}"> </checkbox>运算
可以在 {{}} 内进行简单的运算，支持的有如下几种方式：
三元运算
<view hidden="{{flag ? true : false}}"> Hidden </view>算数运算
<view> {{a + b}} + {{c}} + d </view>Page({
data: {
a: 1,
b: 2,
c: 3
}
})逻辑判断
<view wx:if="{{length > 5}}"> </view>数组
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>实操
运行结果 
流程
- 创建一个自己的文件：app.json文件中找到“pages”，复制其中一行代码，粘贴并更改后两项便会自动创建文件
- 设置app.json中的内容
"window": { "navigationBarBackgroundColor": "#00FFFF", "navigationBarTextStyle":"black", "navigationBarTitleText": "小程序window功能演示", "backgroundTextStyle":"light", "backgroundColor": "#DF3737" }, "tabBar": { "color": "#DF3737", "selectedColor": "#ff0000", "borderStyle":"black", "backgroundColor": "#00FFFF", "list": [{ "pagePath": "pages/admin/admin", "iconPath": "pages/image/001.png", "selectedIconPath": "pages/image/002.png", "text": "首页" }, { "pagePath": "pages/news/news", "iconPath": "pages/image/003.png", "selectedIconPath": "pages/image/004.png", "text": "新闻" } ] }, "style": "v2", "rendererOptions": { "skyline": { "defaultDisplayBlock": true, "disableABTest": true, "sdkVersionBegin": "3.0.0", "sdkVersionEnd": "15.255.255" } }, "componentFramework": "glass-easel", "sitemapLocation": "sitemap.json", "lazyCodeLoading": "requiredComponents" }注意
"pages": [ "pages/index/index", "pages/ages/ages", "pages/logs/logs" ],路径须与左边的资源管理器位置对应，不然可能会报错，路径填自己的就行，还要新建一个image的文件存放图片（ps:右击文件在资源管理器打开，然后将图片放到对应的image文件即可)
-
打开自己创建的文件，点击xxx.js,将以下代码输入
Page({ data:{ name:'lwk', age:30, num:"what", birthday:[{ year:1991},{ month:11},{data:18}], obiect:{hobby:'computer'}, students:[ {nickname:"linni",height:"160",weight:"85"}, {nickname:"tiany",height:"150",weight:"90"} ] } }) - xxx.wxml
<view>姓名：{{ name }}</view> <view>年龄：{{age}}</view> <view>出生日期： {{birthday[0].year}}年 {{birthday[1].month}}月 {{birthday[2].data}}日 </view> <view>算数运算：{{age+"what"}}</view> <view>逻辑运算：{{age==40}}</view> <view>三目运算：{{"what"==age ? 001 : 37}}</view> <view wx:if="{{age>40}}">01</view> <view wx:elif="{{age==40}}">02</view> <view wx:else>03</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>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
