01.小程序简要介绍_问题小程序简介-CSDN博客

本文链接：https://blog.csdn.net/weixin_41619240/article/details/117717857

文章目录

微信小程序的基本结构

写在开头

初步学习中，若有错误，还请谅解！

微信小程序的基本结构

01. 小程序简介

渲染层：web View渲染
- 有多个页面，可以有多个web View线程
逻辑层：JsCore线程

02. 项目基本结构

├
├── pages —————————————————— (页面文件夹)
│   │── index —————————————— (子页面文件夹)
│   │   ├── index.wxml ————— (子页面模板文件)
│   │   ├── index.js ——————— (子页面逻辑文件)
│   │   ├── index.json ————— (子页面配置文件)
│   │   └── index.wxss ————— (子页面样式文件)
│   └── logs
│       ├── logs.wxml
│       └── logs.js
├── utils —————————————————— (第三方工具文件夹)
├── app.js ————————————————— (全局入口文件)
├── app.json ——————————————— (全局配置文件)
├── app.wxss ——————————————— (全局公共样式)
├── project.config.json ———— (项目配置文件)
├── sitemap.json ——————————— (索引配置文件)
├─

03. 关于`app.json`

概念：app.json是小程序的全局配置，包括小程序的所有页面路径、界面表现等等
语法：键值对的形式，key值必须包裹在双引号""中，不能是单引号
- value值只支持：number、string、boolean、array、object、null
- 不能使用注释

基本配置

{
    ## 原则上 json 文件内不允许注释,这里为了方便学习加了一些注释
    
    // 页面配置：项目所有页面路径都要在这里配置
    "pages": [
        "pages/index/index", // 一般，第一个页面默认为首页
	    // 后续所有页面都要在这里定义
	    // 但直接通过微信开发者工具添加pages，会自动添加在这里
    	// 所以一般情况下，不需要设置
        "pages/logs/logs" 
    ],

	// window选项：用于设置小程序的状态栏、导航条、标题、窗口背景色
	"window": {
        "navigationBarBackgroundColor": "#ffffff", // 导航栏背景色
        "navigationBarTextStyle": "black", // 导航栏标题颜色
        "navigationBarTitleText": "微信小程序导航栏标题", // 导航栏标题
        "backgroundColor": "#eeeeee", // 窗口背景色
        "backgroundTextStyle": "light" // 下拉loading颜色 dark | light
    }

    // 底部tab栏
    "tabBar": {
        "color": "#ccc", // 文字颜色
        "selectedColor": "#f00", // 选中时的文字颜色
        "backgroundColor": "#eee", // Tab栏的背景色
        "position": "bottom", // Tab栏的位置--  bottom | top
        // Tab栏的选项
        "list": [
            {
                "text": "Tab1", // Tab上显示的按钮文字
                "pagePath": "pages/index/index", // 绑定的页面路径
                "iconPath": "", // 图标（未选中）
                "selectedIconPath": "" // 图标（已选中）
            },
            {
                "text": "Tab2",
                "pagePath": "pages/logs/logs"
            }
        ]
    }
}

注：这里只作简要介绍，具体配置需要到官网查看

04. 关于`app.js`

概念：app.js是小程序的逻辑文件
语法：同JS语法

基本结构：

需要使用App()构造器来注册一个程序App
在其它页面JS文件中，可以使用getApp()来获取这个程序实例

App({
    onLaunch: function(){
        // 小程序初始化完成之后触发一次
    },
    onShow: function(options){
        // 小程序启动时，或从后台进入前台显示时，触发
    },
    onHide: function(){
        // 小程序从前台进入后台时触发
    },
    onError: function(){
        // 小程序发生脚本错误，或者API调用失败时触发
    },
    globalData: "全局共享数据"
})

onLaunch、onShow、onHide是小程序的生命周期函数

由用户主动触发，不应该从其它代码里来调用生命周期函数

因此，在打开小程序时，会传递options参数给onLaunch和onShow
// options参数
options.path // 打开小程序的页面路径
options.query // 打开小程序的页面参数query
options.scene // 打开小程序的场景值
options.shareTicket 
options.referrerInfo // 从另一个小程序|公众号|App打开时的参数

05. 关于`app.wxss`

概念：app.wxss是小程序的一套样式语言，用于描述WXML的组件样式，作用于全局样式
语法：同CSS语法
- 扩展了响应式长度单位：rpx（responsive pixel），可以根据屏幕宽度进行自适应，规定屏幕宽度为750rpx
- 扩展了样式导入：@import，导入外联样式表，只支持相对路径
  - 引入样式文件：@import url('./test.css')
- 权重：important（最大）、style（1000）、id（100）、class（10）、Tags（1）
- 不支持通配符*选择器

注：以下用page代指每一个单独的页面

06. 关于`page.json`

概念：page.json用来单独定义每个页面的一些属性，如顶部颜色，是否允许下拉刷新等等
语法：同全局配置文件app.json
- 页面的配置项会覆盖app.json的window属性中相同的配置项
- 且，页面配置项只能设置部分window配置项的内容

07. 关于`page.wxml`

概念：page.wxml是微信小程序设计的一套标签语言，用于构建页面的基本架构
语法：同Vue中<template>的用法
- 属性格式为键值对形式
- 大小写敏感
- 可进行数据绑定
- 可使用微信wx:指令

常见标签：view、text、image、button、navigator、swiper、radio、checkbox

<view>用法同div</view>
<text>主要用于文本</text>
<image>放置图像</image>
<button>设置一个按钮</button>
<block>块级标签，用法同template,用于包裹块，但不会渲染到DOM节点</block>

数据绑定

数据绑定方式同Vue中数据绑定方式一致，使用插值表达式来进行

注意，即使在属性里，也要使用插值表达式，这一点和Vue不一样

<!-- 普通绑定 -->
<view>{{ name }}</view>

<!-- 绑定属性 -->
<view id="{{ myId }}"></view>

<!-- 三元表达式 -->
<view>{{ num === 0 ? '等于0' : '不等于0' }}</view>

<!-- 算术运算 -->
<view>{{ a + b }}</view>

微信指令：微信小程序的指令使用wx开头

（1）条件渲染
- 使用wx:if来进行逻辑判断，有多个则使用：wx:if、wx:elif、wx:else
  
  注意：这里和Vue不一样，wx:elif没有连接线

<!-- 进行条件逻辑判断 -->
<view wx:if="{{ num < 10 }}"> 小于10 </view>
<view wx:elif="{{ num > 10 }}"> 大于10 </view>
<view wx:else> 等于10 </view>

<!-- 类似的用法：hidden -->
<view hidden="{{ num < 10 }}">小于10</view>
<view hidden="{{ num > 10 }}">大于10</view>

两者区别同Vue中的v-if和v-show

wx:if：为真则渲染到页面，为假则不渲染
hidden：为真为假都会渲染到页面，为假则通过display:none来隐藏元素

（2）循环渲染

使用wx:for来进行循环，可以作用于数组、对象
- 使用 wx:for-index 来指定索引下标的变量名，如没有指定，则默认index为索引项
- 使用 wx:for-item 来指定元素项的变量名，如没有指定，则默认item为元素项
- 使用ws:key来标识唯一，用以提高渲染性能，同Vue中的key
  注意：这里和Vue不一样，小程序里的key使用循环值时，是不需要再加item前缀的
```

<view wx:for="{{ obj }}" wx:key="id">{{ item.name }}</view>
```

<!-- 循环遍历 -->
<view wx:for="{{ array }}">
    {{ index }} : {{ item.message }}
</view>

<!-- 使用 wx:for-index 来定义索引下标变量名，使用 wx:for-item 来定义元素项的变量名-->
<view wx:for="{{ array }}" wx:for-index="idx" wx:for-item="child" wx:key="index">
    {{ idx }} : {{ child.message }}
</view>

<!-- 使用block块级来包裹多级节点，block不会渲染到ＤＯＭ节点 -->
<block wx:for="{{ [1,2,3,4,5] }}">
    <view>{{ index }}</view>    
    <view>{{ item }}</view>
</block>

（3）事件绑定

小程序中的事件绑定需要使用bind，然后在后面直接跟事件名，不需要大写

<!-- handleTap、handleInput都是定义在 page.js 中的方法 -->
<view bindtap="handleTap">点击事件</view>
<input bindinput="handleInput" />

特别注意，小程序中事件绑定的方法不能携带参数，即不能写成bindtap="handleTap(...)"的形式
- 如果要传值，则需要借助标签自定义属性的方式（~~以前应该在H5新属性里学过~~）
自定义属性以data开头用短横线-连接key值：data-key="value"

可以用e.target.dataset.key或者e.currentTarget.dataset.key来获取对应的value值
- 不同的是，e.target触发可以是事件委托、冒泡
- e.currentTarget触发的只能是绑定事件的对象

<input bindinput="handleInput" data-item="这是自定义的参数" />
<script>
   handleInput: function(e) {
       // 在方法里，用 [e] 属性来接收
       // e.currentTarget.dataset 将接收 所有自定义属性 组成的 key-value 键值对对象
       console.log(e.currentTarget.dataset) // {item: "这是自定义的参数"}        
       console.log(e.detail.value) // 直接获取到输入框的值
   }
</script>

另外，使用bind绑定不会阻止冒泡事件，使用catch绑定事件可以阻止冒泡事件
```
<view catchtap="handleTap">阻止冒泡</view>
```

08. 关于`page.wxss`

概念：page.wxss是作用于每个page页面的样式文件
语法：同全局样式文件app.wxss
- 会覆盖相同的全局样式

09. 关于`page.js`

概念：page.js是作用于每个page页面的逻辑文件
语法：同JS语法

基本结构：

需要使用Page()构造器注册一个页面

   Page({    
      // 页面初始数据    
      data: {    },    
      // 5个生命周期函数    
      onLoad: function(options) {
          // 页面加载时触发，触发时机早于onShow和onReady
      },    
      onShow: function() {
          // 页面显示时触发，早于onReady
      },    
      onReady: function() {
          // 页面初次渲染完成时触发，表示页面已准备妥当，可以进行交互了
      },    
      onHide: function() {
          // 页面隐藏时触发，通过wx.navigateTo切换到其它页面
      },    
      onUnload: function() {
          // 页面卸载时触发，通过wx.redirectTo和wx.navigateBack到其它页面
      },    
      // 4个用户行为回调
      onPullDownRefresh: function() {
          // 监听用户下拉动作
      },    
      onReachBottom: function() {
          // 页面上拉触底事件    
      },    
      onShareAppMessage: function () {
          // 用户点击左上角转发    
      },    
      onPageScroll: function() {
          // 页面滚动触发事件    
      },    
      // 其它自定义事件、数据
  })

生命周期函数由用户主动触发，不应该在其它代码主动调用

10. 关于开发工具

微信开发者工具并不是那么好用，因此，这里使用VSCode来进行开发
相应插件：
- minapp：标签、属性的智能补全
- wechat-snippet-vscode：代码辅助、代码片段自动完成
- Easy Less：使用less语法写CSS，转换为wxss
```
"less.compile": {    
	"outExt": ".wxss"
}
```