01.小程序简要介绍

Posted 2022-12-05 Composition55555

文章目录

• 微信小程序的基本结构
• • • 01. 小程序简介
    • 02. 项目基本结构
    • 03. 关于`app.json`
    • 04. 关于`app.js`
    • 05. 关于`app.wxss`
    • 06. 关于`page.json`
    • 07. 关于`page.wxml`
    • 08. 关于`page.wxss`
    • 09. 关于`page.js`
    • 10. 关于开发工具

---

写在开头

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

---

微信小程序的基本结构

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前缀的

        <!-- 这里 id 和 name 均为 obj 的属性 -->
        <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"