01.小程序简要介绍

Posted Ruovan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了01.小程序简要介绍相关的知识，希望对你有一定的参考价值。

文章目录

写在开头

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

微信小程序的基本结构

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

以上是关于01.小程序简要介绍的主要内容，如果未能解决你的问题，请参考以下文章

小程序根据索引滚动指定的位置

微信小程序代码片段

Android课程---Android Studio使用小技巧：提取方法代码片段

微信小程序代码片段分享

小程序各种功能代码片段整理---持续更新

Servlet简要介绍及入门案例。