搜索
首页web前端js教程微信小程序速查知识

微信小程序速查知识

Feb 28, 2018 pm 02:47 PM
小程序知识速查

本文主要和大家分享微信小程序速查知识,可以让大家对微信小程序开发更加容易,希望本文能帮助到大家。

1. 配置

配置全解析

  • project.config.json ( 项目配置文件 )

{
    // 文件描述
    "description": "项目配置文件",
    // 项目代码配置
    "setting": {
        // 是否检查 url 域名安全性和 TLS 版本
        "urlCheck": false,
        // 是否将项目的 es5 代码转成 es6
        "es6": true,
        // 是否自动补全 css 兼容前缀
        "postcss": true,
        // 是否压缩代码
        "minified": true,
        // 是否启用新功能
        "newFeature": true
    },
    // 编译方式
    "compileType": "miniprogram",
    // 版本号
    "libVersion": "1.7.2",
    // appid
    "appid": "touristappid",
    // 项目名
    "projectname": "haiyangbg",
    // 项目配置
    "condition": {
        // 搜索关键字
        "search": {
            "current": -1,
            "list": []
        },
        // 客服
        "conversation": {
            "current": -1,
            "list": []
        },
        // 编译方式
        "miniprogram": {
            "current": -1,
            "list": []
        }
    }
}
  • app.json ( 小程序配置 )

{
  // 项目路由设置(第一项为首页)
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  // 窗口设置
  "window":{
    // 顶部导航栏背景色,必须是十六进制颜色值,如"#000000"
    "navigationBarBackgroundColor": "#9ef468",
    // 顶部导航栏显示文字
    "navigationBarTitleText": "组件展示",
    // 导航栏文字颜色,仅支持 black/white
    "navigationBarTextStyle": "black",
    // 下拉背景的文字样式,仅支持 dark/light
    "backgroundTextStyle":"light",
    // 下拉背景色,必须是十六进制颜色值,如"#000000"
    "backgroundColor": "#333",
    // 是否开启下拉刷新
    "enablePullDownRefresh": true,
    // 距离最底端触多少距离时触发触底事件,单位px
    "onReachBottomDistance": 40
  },
  //网络请求过期时间,单位毫秒
  "networkTimeout": {
    // 普通ajax请求
    "request": 20000,
    // Socket请求
    "connectSocket": 20000,
    // 文件上传
    "uploadFile": 20000,
    // 文件下载
    "downloadFile": 20000
  },
  // tab导航栏
  "tabBar": {
    // 文字的颜色
    "color": "#999",
    // 选中时文字的颜色
    "selectedColor": "#000",
    // 背景色
    "backgroundColor": "#fff",
    // 上边框的颜色,仅支持 black/white
    "borderStyle": "black",
    // tab导航栏显示在底部还是顶部(顶部不显示图片)
    "position": "bottom",
    // 导航栏列表项
    "list": [{
      // 导航到的页面路径
      "pagePath": "pages/index/index",
      // tab按钮上的文字
      "text": "组件",
      // 图片路径
      "iconPath": "img/com-l.png",
      // 选中后显示的图片
      "selectedIconPath": "img/com-d.png"
    },{
      "pagePath": "pages/logs/logs",
      "text": "API",
      "iconPath": "img/api-l.png",
      "selectedIconPath": "img/api-d.png"
    }]
  },
  // 调试信息
  "debug": true
}
  • page.json ( 单页面配置 )

单页面的json就是app.jsonwindow字段,当加载到这个页面时,此配置将覆盖app.json

2. 生命周期

  • 小程序 App 生命周期

  • onLaunch ------ 小程序初始化完成时,触发(只会调用一次)

  • onShow ------ 1. 小程序启动 2. 从后台进入前台显示,触发

  • onHide ------ 当小程序从前台进入后台,触发

  • onError ------ 1. 发生脚本错误 2. api 调用失败,触发并带上错误信息


  • 单页面 Page 生命周期

  • onLoad ------ 页面加载时,触发(只会调用一次)

  • onShow ------ 页面显示时,触发

  • onReady ------ 初次渲染完成时,触发(只会调用一次)

  • onHide ------ 页面隐藏时,触发

  • onUnload ------ 页面卸载时,触发


详细的生命周期分类:

1.小程序启动:

App.onLaunch - -> App.onShow - -> 注册app.json pages里的页面(按索引顺序) - -> 将app路由设置为首页路由 - -> 首页page参数深拷贝 - -> 初始化首页 data - -> Page.onLoad - -> Page.onShow - -> Page.onReady

2.切后台(app 和 page 生命周期重合):

小程序被切到后台 - ->  page.onHide - -> App.onHide - -> 切回小程序 - -> App.onShow - -> page.onShow

3.跳转页面:

old 表示前一个页面, new 表示新页面

  1. navigateTo跳转 - -> 将路由设置为目标页面路由 - -> old.onHide - -> 初始化页面 data - -> new.onLoad - -> new.onShow - -> new.onReady

  2. redirectTo重定向 - -> 设置路由 - -> old.onUnload - -> init data - -> new.onLoad - -> new.onShow - -> new.onReady

  3. navigateBack页面返回 - -> 设置路由 - -> old.onUnload - -> init data - -> new.onShow

  4. reLaunch重启动 - -> 设置路由 - -> old.onUnload - -> init data - -> new.onLoad - -> new.onShow - -> new.onReady

  5. switchTabTab 切换(图截自官方文档)

微信小程序速查知识

3. 数据绑定和渲染

  1. 数据绑定: { { message } }

  2. 渲染

  • 列表渲染:

    - wx:for=" { { message } } "  
    - wx:for-index="idx" (设置索引的变量名,默认 index ) 
    - wx:for-item="itemName"(设置每一项的变量名,默认item )
  • 渲染块:

  • 条件渲染:

    - wx:if="boolean" - wx:elif="boolean" -wx:else="boolean" == (if - else if - if)
    - hidden="boolean"

4. 模板(template)

基本用法:

( 定义代码片段,可以在不同的地方调用,使用 name 属性,作为模板的名字,调用时使用 is 属性 )

// 源码(需要和调用的页面在同一个wxml里)
<template name="template">
  <view>
    I am {{ name }} 
  </view>
</template>

// 调用
<template is="template" data="{{...message}}"/>

// js 数据
Page({
  data: {
    message: {
      name: '海洋饼干'
    }
  }
})

进阶用法

当时很多的页面都需要同一个模板时,就需要模板导入了

先在pages文件夹中新建一个template文件夹,文件夹中新建一个template.wxml文件

// template.wxml
<template name="template">
  <view>
    I am {{ name }} 
  </view>
</template>
// page.wxml 调用
<import src ="../template/template.wxml"/>
<template is="template" data="{{...message}}"/>

// js 数据
Page({
  data: {
    message: {
      name: '海洋饼干'
    }
  }
})

5. 事件

事件列表

  1. 点击 事件

  • 点击事件 tap

  • 长按事件(超过0.35秒) longpress

  • 触摸 事件

    • 触摸开始 touchstart

    • 触摸后开始移动 touchmove

    • 触摸后被打断 touchcancel

    • 触摸结束 touchend

  • 动画 事件

    • 过渡完成时触发 transitionend

    • 动画开始时触发 animationstart

    • 一次迭代结束时触发 animationiteration

    • 动画完成时触发 animationend

    事件冒泡,事件捕获

    1. 绑定事件 + 冒泡:bind + 事件名  , 如 bindtap

    2. 绑定事件 + 阻止冒泡:catch + 事件名 , 如 catchtap


    1. 捕获 + 冒泡:capture-bind: + 事件名  , 如 capture-bind:tap

    2. 捕获 + 中断事件 + 取消冒泡:capture-catch: + 事件名  , 如 capture-catch:tap

    事件对象

    • BaseEvent( 基础事件,所有事件的父类 )

      • 同 target

      • id ( String - 事件源的id )

      • tagName ( String - 当前组件的类型 )

      • dataset ( Object - 事件源组件上由data-开头的自定义属性集合 )

      • type ( String - 事件类型 )

      • timeStamp ( Integer - 事件生成时的时间戳 )

      • target ( Object - 触发事件的组件的属性 )

      • currentTarget ( Object - 当前组件的属性 )

    • TouchEvent ( 触摸事件 )

      • identifier ( Number - 触摸点的标识符 )

      • pageX ( Number - 距文档左上角 x 轴的距离 )

      • pageY ( Number 距文档左上角 y 轴的距离 )

      • clientX ( Number 距页面可显示区域 x 轴的距离 )

      • clientY ( Number 距页面可显示区域 y 轴的距离 )

      • touches ( Array 停留在屏幕中的触摸点的信息对象集合 )

      • changedTouches ( Array 变化的触摸点信息对象集合 )

    • CustomEvent ( 自定义事件 )

      • detail ( Object - 自定义事件额外的信息 )

    6. wxs 模块

    wxs 文件就是 js 文件,引入 wxs 文件就是引入一个 js 模块( 不能用es6 ),现有两种引入方式

    1. wxml 里引用,使用 <wxs> 标签
        1.1. module 必填,为当前模块的模块名
        1.2. src 选填,引用 .wxs 文件的相对路径(仅当标签为 单闭合标签 标签的内容为空 时有效)
        1.3. 例

         引入:<wxs src="./index.wxs" module="index" />
      
         自己撸:
         <wxs module="index">
             var foo = '海洋饼干'
             module.exports = {
                 foo
             }
         </wxs>
    2. wxs 里引用,使用 require 引用
        2.1. 例 var tools = require("./tools.wxs")

    7. wxss 样式

    微信版的 css ,几个不同的地方

    1. 添加 自适应尺寸单位 ( rpx )

    2. 添加 导入外联样式 ( @import )

    3. 精减 css选择器,只支持

      1. 类选择器 .class

      2. id选择器 #id

      3. 标签选择器 element

      4. 兄弟选择器 element1,element2

      5. 伪元素选择器 只支持两种 ::after ::before

    8. 自定义组件

    使用自定义组件

    1. 创建自定义组件( 类似于page,但需要在 json 文件中将 component 字段设为 true

      {
        "component": true
      }
    2. 创建组件构造器 ( 构造函数不是page(),而是Component() )

      Component({
        // 组件的对外属性(父组件传的数据)
        properties: {
          msg: {
            type: String,
            value: 'msg',
            // 父组件值改变时触发的回调
            observer: () => {
                console.log('i am change')
            }
          }
        },
        data: {
          componentData: {}
        },
      })
    3. 使用自定义组件( 先要在页面的 json 文件中进行引用声明 )

      // 先引用声明
      "usingComponents": {
          // hybg 标签名
          "hybg": "../component/component" // 相对路径
        }
        
        // 直接使用,需要的话要绑定数据
        <hybg msg="{{ data }}"></hybg>

    slot 模板

     1. 单 solt  
        "
        // component
        <view>
            <slot></slot>
        </view>
        
        // page ( hybg 是上面的组件标签名)
        <hybg>
            <view> page 的 slot </view>
        </hybg>
        
        // 效果
        <view>
            <view> page 的 slot </view>
        </view>
        
        "
     2. 多slot
        "
        // 先在 Component 的 js 中添加
        options: {
            // 启用多slot
            multipleSlots: true
          },
        // 多 slot 需要使用不同的 name 来区分
        <view>
            <slot name="first"></slot>
            <slot name="last"></slot>
        </view>
        
        // page ( hybg 是上面的组件标签名)
        <hybg>
            <view slot="first"> first -- slot </view>
            <view slot="last"> last-- slot </view>
        </hybg>
        
        // 效果
        <view>
            <view slot="first"> first -- slot </view>
            <view slot="last"> last-- slot </view>
        </view>
        
        "

    父子组件事件(子组件传值)

    // page
    fatherEvent: function(e){
        console.log(e.detail) // 组件传递的自定义信息
      }
    <hybg bindhybgEvent="fatherEvent"></hybg>
    
     // component
     tap: function(){
      var myEventDetail = { a: 10} // detail对象,提供给事件监听函数
      var myEventOption = {} // 触发事件的配置选项
      // bubbles 事件是否冒泡
      // capturePhase 事件是否拥有捕获阶段
      // composed 是否可以穿越父组件边界
      this.triggerEvent('hybgEvent', myEventDetail, myEventOption)
    }
    
     <view bindtap="tap">触发 hybgEvent 事件</view>

    相关推荐:

    微信小程序入门到实战实例分享(四)

    微信小程序授权获取用户详细信息实例

    微信小程序request请求后台接口php代码实例

    以上是微信小程序速查知识的详细内容。更多信息请关注PHP中文网其他相关文章!

    声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    JavaScript是用C编写的吗?检查证据JavaScript是用C编写的吗?检查证据Apr 25, 2025 am 12:15 AM

    是的,JavaScript的引擎核心是用C语言编写的。1)C语言提供了高效性能和底层控制,适合JavaScript引擎的开发。2)以V8引擎为例,其核心用C 编写,结合了C的效率和面向对象特性。3)JavaScript引擎的工作原理包括解析、编译和执行,C语言在这些过程中发挥关键作用。

    JavaScript的角色:使网络交互和动态JavaScript的角色:使网络交互和动态Apr 24, 2025 am 12:12 AM

    JavaScript是现代网站的核心,因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容,2)通过DOMAPI操作网页,3)支持复杂的交互效果如动画和拖放,4)优化性能和最佳实践提高用户体验。

    C和JavaScript:连接解释C和JavaScript:连接解释Apr 23, 2025 am 12:07 AM

    C 和JavaScript通过WebAssembly实现互操作性。1)C 代码编译成WebAssembly模块,引入到JavaScript环境中,增强计算能力。2)在游戏开发中,C 处理物理引擎和图形渲染,JavaScript负责游戏逻辑和用户界面。

    从网站到应用程序:JavaScript的不同应用从网站到应用程序:JavaScript的不同应用Apr 22, 2025 am 12:02 AM

    JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中,JavaScript与HTML、CSS一起操作DOM,实现动态效果,并支持如jQuery、React等框架。2)通过ReactNative和Ionic,JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行,支持高并发请求。

    Python vs. JavaScript:比较用例和应用程序Python vs. JavaScript:比较用例和应用程序Apr 21, 2025 am 12:01 AM

    Python更适合数据科学和自动化,JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色,使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺,用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用,支持全栈开发。

    C/C在JavaScript口译员和编译器中的作用C/C在JavaScript口译员和编译器中的作用Apr 20, 2025 am 12:01 AM

    C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。 1)C 用于解析JavaScript源码并生成抽象语法树。 2)C 负责生成和执行字节码。 3)C 实现JIT编译器,在运行时优化和编译热点代码,显着提高JavaScript的执行效率。

    JavaScript在行动中:现实世界中的示例和项目JavaScript在行动中:现实世界中的示例和项目Apr 19, 2025 am 12:13 AM

    JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用,涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

    JavaScript和Web:核心功能和用例JavaScript和Web:核心功能和用例Apr 18, 2025 am 12:19 AM

    JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互;2)在用户提交数据前进行客户端验证,提高用户体验;3)通过AJAX技术实现与服务器的无刷新通信。

    See all articles

    热AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智能驱动的应用程序,用于创建逼真的裸体照片

    AI Clothes Remover

    AI Clothes Remover

    用于从照片中去除衣服的在线人工智能工具。

    Undress AI Tool

    Undress AI Tool

    免费脱衣服图片

    Clothoff.io

    Clothoff.io

    AI脱衣机

    Video Face Swap

    Video Face Swap

    使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

    热工具

    SecLists

    SecLists

    SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

    SublimeText3 Linux新版

    SublimeText3 Linux新版

    SublimeText3 Linux最新版

    DVWA

    DVWA

    Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

    ZendStudio 13.5.1 Mac

    ZendStudio 13.5.1 Mac

    功能强大的PHP集成开发环境

    安全考试浏览器

    安全考试浏览器

    Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。