微信小程序官方文档复习

2024年5月14日 274次阅读 来源: 轻颜小弟

持续整理

前端

小程序代码构成

JSON配置

app.json 全局配置
page.json 页面配置
project.config.json sitemap 配置

WXML 模板

  • 小程序的 WXML 用的标签(组件)是 view, button, text 等等
  • wx:if

WXSS 样式

  • 新的尺寸单位 rpx
  • app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效

JS 逻辑交互

WXS

小程序宿主环境

  • 页面管理(路由,生命周期…), 基础组件, API

协同工作和发布

  • 小程序管理后台, 开发者权限, 体验版小程序, 发布上线, 小程序审核规范, 小程序码, 运营数据

小程序框架-主要文档1

场景值

逻辑层

注册实例

  • getApp 和 getCurrentPages 获取对应实例 注意调用局限,还有实例的数据结构
  • 注册小程序(也就是app.js中的 App({}) ); 注册页面(也就是app.js中的 Page({}) )

使用 Component 构造器构造页面. Component 构造器的主要区别是：方法需要放在 methods: { } 里面.

这种创建类似 自定义组件 ，
可使用 behaviors 等高级特性。
Component 构造器

生命周期

平时开发要结合wx.XXX 等API的异步, 业务接口的异步的情况

页面路由

页面栈 getCurrentPages()

<navigator open-type=”navigateTo”/>、wx.switchTab 等 注意底部菜单的二次切换、reLaunch页面先清空页面栈的操作体验、

模块化、文件作用域

模块只有通过 module.exports 或者 exports 才能对外暴露接口

使用小程序的npm管理功能

wxMini 在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响

API

事件监听 API、同步 API 、 异步 API、

  • 约定以
    on 开头的 API 用来监听某个事件是否触发，wx.onSocketOpen

  • 约定以
    Sync 结尾的 API 都是同步 API， 如 wx.setStorageSync，wx.getSystemInfoSync 等。此外，也有一些其他的同步 API，-如 wx.createWorker，wx.getBackgroundAudioManage

try {
  wx.setStorageSync('key', 'value')
} catch (e) {
  console.error(e)
}

  • 大多数 API 都是异步 API，如 wx.request，wx.login 等

视图层

WXML: 数据绑定、列表渲染、条件渲染、模板、引用

<block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性.
不能和hidden一起使用
wx:for="{{array}}" , wx:for-item="item" ,  wx:for-index="index" ,  wx:key="*this"  默认值,保留字 

wx:for="array" === wx:for="{{['a','r','r','a','y']}}"
wx:for="{{[1,2,3]}} "  ===   wx:for="{{[1,2,3] + ' '}}"
wx:for="3"  ===  wx:for="{{[3]}}"
wx:for="{{3}}" === wx:for="{{[1,2,3]}}"

wx:if vs hidden

<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

模板 template

定义模板name 属性 , 使用模板 is 属性 (可以动态引入)

模板的作用域只能使用
data 传入的数据以及模板定义文件中定义的 <wxs />,
Page的Fn可以直接调用.

  • 引用 import和include

mport 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。
include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置

假设: include是非<template/>包裹抽离的文件

WXS 小程序脚本语言-支持部分js语法

导出 ` module.exports = xxx `  
wxs模块均为单例 多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象 
引用其他 wxs 文件模块` require `函数 相对路径

<wxs module="diy_name"></wxs>
<wxs src="./../comm.wxs" module="diy_name"></wxs>

事件系统

以bind或catch开头，然后跟上事件的类型. catch事件绑定可以阻止冒泡事件向上冒泡

在非原生组件中，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart

基础库版本 2.8.1 起，原生组件也支持bind后紧跟冒号的写法

事件的捕获阶段, 事件对象 , mark , 使用WXS函数响应事件

基础组件

注意：所有组件与属性都是小写，以连字符-连接

获取界面上的节点信息

wx.createSelectorQuery() ; WXML节点布局相交状态 ;

响应显示区域变化

略

动画

CSS 渐变 ; CSS 动画 ; wx.createAnimation ;
WXS 响应事件 的方式可以通过使用 WXS 来响应事件的方法来动态调整节点的 style 属性
将页面的 setData 改为 自定义组件 中的 setData 来提升性能

自定义组件

插件

小程序运行时

小程序进程小时 5分钟, ios退出杀死进程等; 小程序更新机制

    原文作者：轻颜小弟
    原文地址: https://segmentfault.com/a/1190000020283134
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞