一篇搞定微信小程序

这篇具有很好参考价值的文章主要介绍了一篇搞定微信小程序。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


组件

视图类容器组件

view

  • 普通视图区域
  • 类似于html中的div,是一个块级元素
  • 常用来实现页面的布局效果
基本使用
<view class="container">
	<view>A</view>
	<view>B</view>
	<view>C</view>
</view>
.container1 view{
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
}
.container1 view:nth-child(1){
	background-color: lightgreen;
}
.container1 view:nth-child(2){
	background-color: lightskyblue;
}
.container1 view:nth-child(3){
	background-color: lightcoral;
}
.container1{
	display: flex;
	/**分散布局**/
	justify-content: space-around; 
}

scroll-view

  • 可滚动的视图区域
  • 常用来实现滚动列表效果
基本使用
<!--pages/list/list.wxml-->
<scroll-view class="container1" scroll-y="true">
  <view>view A</view>
  <view>view B</view>
  <view>view C</view>
</scroll-view>
/* pages/list/list.wxss */
.container1 view{
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
}
.container1 view:nth-child(1){
	background-color: lightgreen;
}
.container1 view:nth-child(2){
	background-color: lightskyblue;
}
.container1 view:nth-child(3){
	background-color: lightcoral;
}
.container1{
  border: 1px solid red;
  height: 120px;
  width: 100px;
}

swiper和swiper-item

  • 轮播图组件和轮播图item组件
基本使用
<!--pages/list/list.wxml-->
<swiper class="swiper-container" indicator-dots>
<swiper-item>
<view class="item">A</view>
</swiper-item>
<swiper-item>
<view class="item">B</view>
</swiper-item>
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>
/* pages/list/list.wxss */
.swiper-container{
  height: 150px;
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1).item{
  background-color: lightgreen;
}
swiper-item:nth-child(2).item{
  background-color: lightskyblue;
}
swiper-item:nth-child(3).item{
  background-color: lightcoral;
}
常用属性

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

基础内容类组件

text

  • 文本组件
  • 类似于html中的span标签,行内元素
基本使用
  • 通过selectable属性,实现长按选中文本内容的效果
<!--pages/list/list.wxml-->
<view>
  手机号
  <text selectable="true">11111111111111</text>
</view>

rich-text

  • 富文本组件
  • 支持把html字符串渲染为wxml结构
基本使用

通过 rich-text 组件的** nodes** 属性节点,把 HTML 字符串染为对应的 UI 结构

<!--pages/list/list.wxml-->
<view>
  <rich-text nodes="<h1 style='color:red'>标题</h1>"></rich-text>
</view>

其他组件

button

  • 按钮组件
  • 功能比HTML中的button按钮丰富
  • 通过open-type属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
基本使用
<!--pages/list/list.wxml-->
<view>
<view>---------通过type指定按钮类型-------------</view>
<button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
</view>
<view>---------size=“mini”小尺寸按钮-------------</view>
<button size="mini">默认按钮</button>
<view>---------plain镂空按钮-------------</view>
<button size="mini" plain="true">默认按钮</button>

image

  • 图片组件
  • 默认宽度约为300px,高度约为240px
基本使用
<view>
<!-- 空白图片也会占空间 -->
<image></image>
<image src=""></image>
</view>
mode属性

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

navigator

  • 页面导航组件
  • 类似于html中的a标签

小程序API

事件监听类API

特点:以on开头,用来监听某些事件的触发

同步API

特点:

  • 以Sync结尾的
  • 同步API的执行结果,可以通过函数返回值直接获取,如果出错直接抛出异常

异步API

特点:类似于JQuery中的$.ajax(option)函数,需要通过success、fail、complete接收调用的结果

模板语法

数据绑定

基本原则

  1. 在data中定义数据

在对应页面的js文件中,把数据定义到data对象即可

// pages/list/list.ts
Page({

  /**
   * 页面的初始数据
   */
  data: {
    info:"init data",
    msgList:[{msg:"hello"},{msg:"world"}]
  },
})
  1. 在WXML中使用数据

把data中的数据绑定到页面中渲染,使用Mustache语法(双大括号)将变量包起来即可。

<view>{{要绑定的数据名称}}</view>

事件绑定

事件是渲染层到逻辑层的通讯方式

常用事件

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

  1. bintap语法格式
<button type="primary" bind:tap="test"></button>
test(e: any){
  console.log(e);
},
  1. bindinput语法格式

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

事件对象的属性列表

当事件回调触发时,会收到一个事件对象event,属性如下表
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序
PS:

  1. target事件和currentTarget事件的区别

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

  1. 点击事件函数不能直接传参数,参考下图

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

在事件处理函数中为data中的数据赋值

通过调用this.setData(dataObject)方法,可以给页面data中的数据重新赋值

Page({
  /**
   * 页面的初始数据
   */
  data: {
    count: 0
  },
  methods:{
    changeCount(){
      this.setData({
        count: this.data.count++
      })
    }
  },

实现文本框与data之间的数据同步

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

条件渲染

wx:if

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

结合block标签使用wx:if

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

hidden

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序
PS:wx:if与hidden对比
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

列表渲染

wx:for

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序
PS:手动指定索引和当前项的变量名
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

wx:key

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

WXSS模板样式

定义

WXSS (WeChat Style Sheets)是一套样式语言,用于美化WXML的组件样式,类似于网页开发中的CSS。

与CSS的关系

WXSS 具有 CSS 大部分特性,同时,WXSS 还对CSS 进行了扩充以及修改,以适应微信小程序的开发。
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

新增特性

  • rpx尺寸单位
  • @import样式导入.

rpx

定义

rpx是微信小程序独有的,用来解决屏适配的尺寸单位

实现原理

rpx 的实现原理非常简单:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx把所有设备的屏幕在宽度上等分为 750 份(即:当前屏幕的总宽度为750rpx)。

样式导入

使用 WXSS 提供的 @import 语法,可以导入外联的样式表。

语法格式

@import 后跟需要导入的外联样式表的相对路径,用;表示语句结束。示例如下:
@import "common.wxss";

全局样式与局部样式

全局样式

定义在 app.wxss 中的样式为全局样式,作用于每一个页面。

局部样式

在页面的 .wxss 文件中定义的样式为局部样式,只作用于当前页面
PS:
注意:

  • 当局部样式和全局样式冲突时,根据就近原则,局部样式会覆盖全局样式
  • 当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局的样式

全局配置

小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下:

pages

记录当前小程序所有页面的存放路径

window

全局设置小程序窗口的外观

小程序窗口的组成部分

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

常用配置项

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

tabBar

tabBar 是移动端应用常见的页面效果,用于实现多页面的快速切换。小程序中通常将其分为:

  • 底部tarBar
  • 顶部tarBar

PS:

  • tabBar中只能配置最少2个、最多5个tab 页签
  • 当渲染顶部 tabBar 时,不显示icon,只显示文本

组成部分

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

配置项

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

style

是否启用新版的组件样式

页面配置

作用

小程序中,每个页面都有自己的 .json 配置文件,用来对当前页面的窗口外观、页面效果等进行配置。

页面配置与全局配置的关系

小程序中,app.json 中的 window 节点,可以全局配置小程序中每个页面的窗口表现
如果某些小程序页面想要拥有特殊的窗口表现,此时,“页面级别的.json 配置文件”就可以实现这种需求。

常见配置项

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

网络数据请求

网络请求限制

出于安全性方面的考虑,小程序官方对数据接口的请求做出了如下两个限制:

  • 只能请求 HTTPS 类型的接口
  • 必须将接口的域名添加到信任列表中

配置request合法域名

配置步骤:登录微信小程序管理后台 -> 开发 -> 开发设置 ->服务器域名 ->修改 request 合法域名
PS:

  • 域名只支持 https 协议域名不能使用IP 地址或localhost
  • 域名必须经过 ICP 备案
  • 服务器域名一个月内最多可申请5 次修改

GET请求

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

POST请求

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

在页面刚加载时请求数据

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

注意事项

跳过request合法域名检验

仅能在开发与调试阶段跳过
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

关于跨域和ajax的说明

跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器,而是微信客户端,所以小程序中不存在跨域的问题。
Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象,由于小程序的宿主环境是微信客户端,所
以小程序中不能叫做“发起 Ajax 请求”,而是叫做“发起网络数据请求”

页面导航

页面导航指的是页面之间的相互跳转

声明式导航

  • 在页面上声明一个导航组件
  • 通过点击组件实现页面跳转

导航到tarBar页面

tabBar 页面指的是被配置为 tabBar 的页面。
在使用 组件跳转到指定的 tabBar 页面时,需要指定 url属性和 open-type 属性,其中:

  • url表示要跳转的页面的地址,必须以/开头
  • open-type 表示跳转的方式,必须为switchTab

<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>

导航到非tarBar页面

非 tabBar 页面指的是没有被配置为 tabBar 的页面
在使用 组件跳转到普通的非 tabBar 页面时,则需要指定url属性和 open-type 属性,其中:

  • url 表示要跳转的页面的地址,必须以/开头
  • open-type 表示跳转的方式,必须为navigate

<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>
PS:为了简便,在导航到非tabBar页面时,open-type="navigate"属性可以省略

后退导航

如果要后退到上一页面或多级页面,则需要指定 open-type 属性和 delta 属性,其中:

  • open-type 的值必须是 navigateBack,表示要进行后退导航
  • delta 的值必须是数字,表示要后退的层级

<navigator open-type='navigateBack' delta='1'>返回上一页</navigator>
PS:为了简便,如果只是后退到上一页面,则可以省略 delta 属性,因为其默认值就是 1。

编程式导航

调用小程序的导航 API,实现页面的跳转

导航到tarBar页面

调用 wx.switchTab(0bject object)方法,可以跳转到 tabBar 页面。其中 Object 参数对象的属性列表如下:
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

导航到非tarBar页面

调用 wx.navigateTo(0bject object)方法,可以跳转到非 tabBar 的页面。其中 Object 参数对象的属性列表如下:
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

后退导航

调用 wx.navigateBack(0bject object)方法,可以返回上一页面或多级页面。其中 Object 参数对象可选的属性列表如下:
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

导航传参

声明式导航传参

navigator 组件的 url属性用来指定将要跳转到的页面的路径。同时,路径的后面还可以携带参数:

  • 参数与路径之间使用?
  • 分隔参数键与参数值用=相连
  • 不同参数用 &分隔

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

编程式导航传参

调用 wx.navigateTo(0bject object)方法跳转页面时,也可以携带参数,代码示例如下:
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

在onload里接收导航参数

通过声明式导航传参或编程式导航传参所携带的参数,可以直接在 onLoad 事件中直接获取到,示例代码如下:
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

下拉刷新

下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。

启用下拉刷新

全局

在 app.json 的 window节点中,将enablePullDownRefresh 设置为 true

局部

在页面的 .json 配置文件中,将 enablePullDownRefresh 设置为 true
PS:在实际开发中,推荐使用第2种方式,为需要的页面单独开启下拉刷新的效果

配置下拉刷新窗口的样式

在全局或页面的 .json 配置文件中,通过 backgroundColor 和 backgroundTextstyle 来配置下拉刷新窗口的样式,其中:

  • backgroundcolor 用来配置下拉刷新窗口的背景颜色,仅支持16 进制的颜色值
  • backgroundTextStyle 用来配置下拉刷新 loading 的样式,仅支持 dark 和 light

监听页面的下拉刷新事件

在页面的 .js 文件中,通过 onPullDownRefresh()函数即可监听当前页面的下拉刷新事件。
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

停止下拉刷新的效果

当处理完下拉刷新后,下拉刷新的loading 效果会一直显示,不会主动消失,所以需要手动隐藏loading 效果。此时,调用 wx.stopPullDownRefresh()可以停止当前页面的下拉刷新。示例如下:
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

上拉触底

上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。

监听页面的上拉触底事件

在页面的 .js 文件中,通过 onReachBottom()函数即可监听当前页面的上拉触底事件。示例代码如下:
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

配置上拉触底的距离

上拉触底距离指的是触发上拉触底事件时,滚动条距离页面底部的距离
可以在全局或页面的 .json 配置文件中,通过 onReachBottomDistance 属性来配置上拉触底的距离。
小程序默认的触底距离是 50px,在实际开发中,可以根据自己的需求修改这个默认值。

生命周期

定义

生命周期(Life Cycle)是指一个对象从创建 ->运行 ->销毁的整个阶段,强调的是一个时间段。

分类

应用生命周期

特指小程序从启动 ->运行->销毁的过程

页面生命周期

特指小程序中,每个页面的加载->渲染 ->销毁的过程

PS:其中,页面的生命周期范围较小,应用程序的生命周期范围较大,如图所示:
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

生命周期函数

定义

生命周期函数是由小程序框架提供的内置函数会伴随着生命周期,自动按次序执行

作用

允许程序员在特定的时间点,执行某些特定的操作。例如,页面刚加载的时候,可以在onLoad 生命周期函数中初始化页面的数据。
PS:生命周期强调的是时间段,生命周期函数强调的是时间点

分类

应用生命周期函数

定义:特指小程序从启动->运行->销毁期间依次调用的那些函数
小程序的应用生命周期函数需要在 app.js 中进行声明,示例代码如下:
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

页面周期函数

特指小程序中,每个页面从加载->渲染 ->销毁期间依次调用的那些函数
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

WXS

定义

WXS(WeiXin Script)是小程序独有的一套脚本语言,结合 WXML,可以构建出页面的结构。

使用场景

wxml中无法调用在页面的 .js 中定义的函数,但是,wxml中可以调用 wxs 中定义的函数。因此,小程序中wxs 的典型应用场景就是“过滤器”

WXS与JS的区别

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

基础语法

内嵌脚本

wxs 代码可以编写在 wxml文件中的标签内,就像Javascript 代码可以编写在 html文件中的

定义外联的WSX脚本

wxs 代码还可以编写在以 .wxs 为后缀名的文件内,就像javascript 代码可以编写在以 .js 为后缀名的文件中一样。示例代码如下:
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

使用外联的WSX脚本

在 wxml 中引入外联的 wxs 脚本时,必须为 标签添加 module 和 src 属性,其中:
module 用来指定模块的名称
src 用来指定要引入的脚本的路径,且必须是相对路径
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

自定义组件

创建组件

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

引用组件

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

局部引用

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

全局引用

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

全局引用VS局部引用

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

样式

样式隔离

默认情况下,自定义组件的样式只对当前组件生效,不会影响到组件之外的UI结构,如图所示:

  • 组件 A的样式不会影响组件C的样式
  • 组件 A的样式不会影响小程序页面的样式
  • 小程序页面的样式不会影响组件A和C的样式

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序
PS:

  • app.wxss中的全局样式对组件无效
  • 只有 class 选择器会有样式隔离效果,d 选择器、属性选择器、标签选择器不受样式隔离的影响
  • 建议:在组件和引用组件的页面中建议使用 class 选择器不要使用 id、属性、标签选择器!

修改组件

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

stylelsolation

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

data数据

在小程序组件中,用于组件模板渲染的私有数据,需要定义到 data 节点中,示例如下:
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

method方法

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

properties属性

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

生命周期

定义

有时,自定义组件的行为依赖于页面状态的变化,此时就需要用到组件所在页面的生命周期
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

pageLifetimes

组件所在页面的生命周期函数,需要定义在 pageLifetimes 节点中,示例代码如下
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

插槽

在自定义组件的 wxml结构中,可以提供一个节点(插槽),用于承载组件使用者提供的 wxml结构
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

单个插槽

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

启用多个插槽

在小程序的自定义组件中,需要使用多插槽时,可以在组件的.js 文件中,通过如下方式进行启用。
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

组件通信

父子组件之间的3种通信方式

属性绑定

用于父组件向子组件的指定属性设置数据,仅能设置JSON 兼容的数据
属性绑定用于实现父向子传值,而且只能传递普通类型的数据,无法将方法传递给子组件。父组件的示例代码如下:
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

事件绑定

用于子组件向父组件传递数据,可以传递任意数据
事件绑定用于实现子向父传值,可以传递任何类型的数据。使用步骤如下:

  1. 在父组件的js 中,定义一个函数,这个函数即将通过自定义事件的形式,传递给子组件

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

  1. 在父组件的 wxml中,通过自定义事件的形式,将步骤1中定义的函数引用,传递给子组件

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

  1. 在子组件的js 中,通过调用 this.triggerEvent(‘自定义事件名称’’,{/*参数对象 */}),将数据发送到父组件

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

  1. 在父组件的js 中,通过 e.detail 获取到子组件传递过来的数据

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

获取组件实例

可在父组件里调用 this.selectComponent(“id或class选择器”),获取子组件的实例对象,从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器,例如 this.selectComponent(“.my-component”)。
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

behaviors

定义

behaviors 是小程序中,用于实现组件间代码共享的特性,类似于 Vue.js,中的“mixins”
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

工作方式

每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被合并到组件中。
每个组件可以引用多个 behavior,behavior 也可以引用其它 behavior。

创建behavior

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

导入并使用behavior

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

behavior中所有可用的节点

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

同名字段的覆盖和组合规则

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

npm

使用npm包的支持与限制

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

vant Weapp

定义

Vant weapp 是有赞前端团队开源的一套小程序 U1组件库,助力开发者快速搭建小程序应用。它所使用的是MIT 开源许可协议,对商业使用比较友好。

安装Vant组件库

Vant Weapp - 轻量、可靠的小程序 UI 组件库

定制全局主题样式

Vant Weapp 使用 CSS 变量来实现定制主题。关于 CSS 变量的基本用法,请参考 MDN 文档:
使用 CSS 自定义属性(变量) - CSS:层叠样式表 | MDN
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

API Promise化

基于回调函数的异步API的缺点

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序
缺点:容易造成回调地狱的问题,代码的可读性、维护性差!

定义

API Promise化,指的是通过额外的配置,将官方提供的、基于回调函数的异步 API,升级改造为基于Promise 的异步 API,从而提高代码的可读性、维护性,避免回调地狱的问题。
一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

全局数据共享

定义

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

小程序中全局数据共享方案

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

Mobx

安装Mobx相关的包

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

创建MobX的Store实例

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

将Store成员绑定到页面中

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

将Store中的成员绑定到组件中

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

分包

定义

分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。

好处

  • 可以优化小程序首次启动的下载时间
  • 在多团队共同开发时可以更好的解耦协作

分包前项目的构成

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

分包后项目的构成

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

分包加载原则

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

分包的体积限制

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

基本用法

配置方法

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

打包原则

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

引用原则

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

独立分包

定义

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

与普通分包的区别

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

应用场景

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

配置方法

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

引用原则

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

分包预下载

定义

在进入小程序的某个页面时,由框架自动预下载可能需要的分包,从而提升进入后续分包页面时的启动速度。

配置

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序

限制

一篇搞定微信小程序,微信小程序,前端,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-857975.html

到了这里,关于一篇搞定微信小程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端开发——微信小程序

    使用的开发平台为——微信开发者工具(点击此处链接)  依次点击【工具】-【下载】-【稳定版更新日志】,找到适合的版本,进行下载安装。 注册微信小程序(点击注册链接),注意注册的是”小程序“。 根据注册提示完成后,进入以下界面: 在侧边栏点击【开发】-

    2024年02月03日
    浏览(52)
  • 【前端面试题——微信小程序】

    标签名字有点不一样 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式 开发工具限制:WXML仅能在微信小程序开发工具中预览,而HTML可以在浏览器内预览。 组件封装不同:WXML对组件进行了重新封装,为后续的性能优化提供了可能,同时避免开发者写出低质量的代码。 没有

    2024年02月09日
    浏览(44)
  • 前端笔记--微信小程序(原生)

    介于工作需要,这里总结一下微信小程序的开发。 官网:微信小程序 开发文档:微信开放文档 vscode安装插件:   ‘ wxml 对应 html wxss 对应 css js 逻辑层 json 数据配置层 同样也是MVVM模型 (1)app.json pages :该项目的所有页面,字符串对应文件路径,但是不要加后缀名。 我们可

    2024年02月11日
    浏览(42)
  • 微信小程序支付流程(前端)

    微信小程序的支付只要用到官方的支付API : wx.requestPayment(Object object) 官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/payment/wx.requestPayment.html 1、总体流程 一般情况下,前端接触到的支付流程是这样的:商品页选择商品 —— 提交商品订单(跳转到确认订单页) ——

    2024年02月11日
    浏览(53)
  • 【一步搞定】uniapp运行微信小程序时报错routeDone with a webviewId ** that is not the current page

    每次刷新还不同webviewId!! 每次刷新还不同webviewId!! 已试过其他帖子,设置pages.json的配置仍旧无效的,可以继续往下。 小程序基础库支持的问题。 基础库版本 版本 实测效果 3.0 无效 2.33.0 无效 2.32.3 无效 2.32.1 无效 2.30.4 无效 2.29.2 无效 2.28.1 无效 2.27.3 无效 2.26.2 有效 点

    2024年04月09日
    浏览(109)
  • 【Web实战】零基础微信小程序逆向(非常详细)从零基础入门到精通,看完这一篇就够了

    本文以微信小程序为例,从实战入手,讲解有关于小程序这种新型攻击面的渗透,对于了解小程序的安全性和防范措施有一定的帮助。 作为中国特有的一种程序形态,小程序在我们的日常生活中已经无处不在。腾讯、百度、阿里巴巴、字节跳动、京东等各家互联网大厂都有各

    2024年02月04日
    浏览(64)
  • 微信小程序——个人相册(前端)

    1)用户管理,信息包括:头像、昵称,功能包括:获取微信用户信息、验证用户是否存在、修改头像、修改昵称 2)上传相片:上传图片 3)照册列表:封面图(轮播图)、照片列表、照片选择、删除照片 4)照片信息:照片信息包括 显示照片、大小(字节)、上传时间 此项

    2024年02月03日
    浏览(41)
  • 前端实现微信支付(H5,微信小程序)

    通常一些电商项目使用到微信支付操作,所以简单地介绍一下微信支付的具体流程。 微信支付是微信内置微信浏览器(其他浏览器不支持)或者微信小程序的支付接口,主要负责用户对商家执行支付操作的流程。 例如常见的电商在下单环节,就需要通过使用微信支付接口,

    2024年02月08日
    浏览(56)
  • 微信小程序完整项目实战(前端+后端)

    基于微信小程序的在线商城点单系统 前言:闲来无事,制作一个微信小程序商城。系统采用Java语言作为后端实现与小程序的交互,给用来学习或者想自己开个小店的朋友当个参考。 小程序 管理端 1.创建maven project,先创建一个名为SpringBootDemo的项目,选择【New Project】 然后在

    2024年02月03日
    浏览(64)
  • 微信小程序|前端技术主要框架分析

    1.框架 微信提供了一套自己的用于开发小程序的前端框架,和目前主流的前端框架相比,其既有类似的地方,也有特殊的地方。 特殊的地方在于其只能在微信小程序开发工具内使用,并做了相对严格的使用和配置限制,开发者必须按照其规定的用法来使用。一些外部的框架和

    2024年02月11日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包