前言在微信小程序中,包含了很多指令,有wx:for、wx:if等。其中,wx:if是用来判断某个条件是否成立,如果返回值为true,则渲染这个元素,否则不渲染;还可以使用wx:if显示或隐藏一个元素一、wx:if在框架中,使用wx:if=""来判断是否需要渲染该代码块,也可以用wx:elif和wx:else来添加一个else块。javascript<viewwx:if="{{length5}}"1
一、列表渲染1.wx:for的item和index在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为itemjavascript<viewwx:for="{{array}}"{{index}}:{{item.message}}</view使用wx:foritem可以指定数组当前元素的变量名,使
前言1.小程序页面结构微信小程序的页面结构主要是分别由四个文件组成:js(逻辑处理文件):负责页面逻辑内容的处理,遵循js语言框架。json(配置文件):用来设置页面的窗口内容,遵循JSON语法规范。wxml(页面结构文件或视图文件):用于页面可视化组件的组织和描述,语法结构类似于xml,与html格式差别较大。wxss(样式文件):兼容CSS语法规范。2.数据绑定的定义数据绑定:视觉层数据与逻辑
一、Component组件的扩展javascript//behavior.jsmodule.exports=Behavior({definitionFilter(defFields){defFields.data.from='behavior'},})//component.jsComponent({data:{from:'component'},behaviors:require('behavi
前言relations定义段包含目标组件路径及其对应选项,可包含的选项见下表。选项类型是否必填描述typeString是目标组件的相对关系,可选的值为parent、child、ancestor、descendantlinkedFunction否关系生命周期函数,当关系被建立在页面节点树中时触发,触发时机在组件attached生命周期之后linkChangedFunction否关系生命周期函数,当关
前言1.组件间通信组件间的基本通信方式有以下几种。WXML数据绑定:用于父组件向子组件的指定属性设置数据,仅能设置JSON兼容数据事件:用于子组件向父组件传递数据,可以传递任意数据。如果以上两种方式不足以满足需要,父组件还可以通过this.selectComponent方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法。一、Component组件的通信与事件1.监听事件事件系统是组件间
一、Component组件的数据监听器数据监听器可以用于监听和响应任何属性和数据字段的变化,相当于vue中的计算属性。1.使用数据监听器有时,在一些数据字段被setData设置时,需要执行一些操作。例如,this.data.sum永远是this.data.numberA与this.data.numberB的和。此时,可以使用数据监听器进行相应处理。csharpComponent({attached
一、组件模板组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树,将被插入到组件的引用位置上。在组件模板中可以提供一个<slot节点,用于承载组件引用时提供的子节点。1.无命名插槽csharp<!组件模板<viewclass="wrapper"<view这里是组件的内部节点</view<slot</slot</viewcsharp<!引用组件的页面模板<view<componentt
一、Behavior1.Behavior的定义behaviors是用于组件间代码共享的特性,类似于一些编程语言中的“mixins”或“traits”。每个behavior可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被合并到组件中,生命周期函数也会在对应时机被调用。每个组件可以引用多个behavior,behavior也可以引用其它behavior。2.Behav
一、Component1.组件的属性定义段类型是否必填描述最低版本propertiesObjectMap否组件的对外属性,是属性名到属性设置的映射表dataObject否组件的内部数据,和properties一同用于组件的模板渲染observersObject否组件数据字段监听器,用于监听properties和data的变化,参见数据监听器2.6.1methodsObject否组件的方法,包括事件
一、页面栈1.获取页面栈方法:getCurrentPages()获取当前页面栈。数组中第一个元素为首页,最后一个元素为当前页面。2.注意事项不要尝试修改页面栈,会导致路由以及页面状态错误。不要在App.onLaunch的时候调用getCurrentPages(),此时page还没有生成。3.获取页面栈来刷新页面javascript//刷新上一个页面__refreshBeforePage(){let
前言在小程序中如果一个页面由另一个页面通过wx.navigateTo打开,这两个页面间将建立一条数据通道:被打开的页面可以通过this.getOpenerEventChannel()方法来获得一个EventChannel对象;wx.navigateTo的success回调中也包含一个EventChannel对象。这两个EventChannel对象间可以使用emit和on方法相互发送、监听事件。1.
一、页面生命周期1.JS使用注册小程序中的一个页面。接受一个Object类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。小程序页面的生命周期函数如下:属性类型说明dataObject页面的初始数据optionsObject页面的组件选项,同Component构造器中的options,需要基础库版本2.10.1behaviorsStringArray类似于mixins和traits的组
前言从软件的角度来看,生命周期指程序从创建、到开始、暂停、唤起、停止、卸载的过程。微信小程序的生命周期:应用生命周期页面生命周期一、应用生命周期1.JS配置javascriptApp({//生命周期回调——监听小程序初始化onLaunch(options){console.log('生命周期回调——监听小程序初始化')},//生命周期回调——监听小程序启动或切前台onShow(options){c
前言场景值就是进入该小程序的来源,就是用户是通过什么途径点进的小程序。通过app中的onLaunch或onShow方法中可以获取到场景值。比如获取到的场景值是1005,表示用户是通过微信顶部的搜索框搜索到的该小程序。通过这个场景值来实现更多的业务逻辑。一、场景值以下是场景值的ID和说明:场景值ID说明1000其他1001发现栏小程序主入口,「最近使用」列表(基础库2.2.4版本起包含「我的小程序」
前言1.sitemap.json介绍开发者可以通过sitemap.json配置,或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。2.小程序爬虫特征当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索词条触发该索引时,小程序的页面将可能展示在搜索结果中。爬虫访问小程序内页面时,会携带特定的useragent:mpcrawler及场景值:1129。一、si
一、页面配置页面中配置项在当前页面会覆盖app.json中相同的配置项(样式相关的配置项属于app.json中的window属性,但这里不需要额外指定window字段),能覆盖的配置属性如下:属性类型默认值描述最低版本navigationBarBackgroundColorHexColor000000导航栏背景颜色,如000000navigationBarTextStylestringwhite导
一、resizable在iPad上运行的小程序可以设置支持屏幕旋转,在PC上运行的小程序,用户可以按照任意比例拖动窗口大小,也可以在小程序菜单中最大化窗口。app.json配置如下;csharp{resizable:true}二、usingComponents在app.json中声明的自定义组件视为全局自定义组件,在小程序内的页面或自定义组件中可以直接使用而无需再声明。app.json配置如下;c
一、app.json配置属性之requiredBackgroundModes申明需要后台运行的能力,类型为数组。目前支持以下项目:audio:后台音乐播放location:后台定位如:csharp{"pages":"pages/index/index","requiredBackgroundModes":"audio","location"}注:在此处申明了后台运行的接口,开发版和体验版上可以直接
一、app.json配置属性之Worker我们知道js是单线程的,在有时候需要处理一些密集计算或者是高延迟的时候,总会出现不便。而且,现在的cpu都是多核的,单线程也无法充分发挥电脑的计算能力。正是基于这种情况,才有了worker的诞生。一些异步处理的任务,可以放置于Worker中运行,待运行结束后,再把结果返回到小程序主线程。Worker运行于一个单独的全局上下文与线程中,不能直接调用主线程的方
一、app.json配置属性之subpackages和preloadRule1.subpackages分包的功能主要是实现小程序按需加载,进入分包页面才会进行分包的加载。在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包,即放置默认启动页面/TabBar页面,以及一些所有分包都需用到公共资源/JS脚本;而分包则是根据开发者的配置进行划分。在小程序启动时
@TOC(文章目录)一、app.json配置属性之debug可以在开发者工具中开启debug模式,在开发者工具的控制台面板,调试信息以info的形式给出,其信息有Page的注册,页面路由,数据更新,事件触发等。可以帮助开发者快速定位一些常见的问题。二、debug配置案例首先我们打开微信开发者工具、并找到项目文件中的app.json!在这里插入图片描述(https://s2.51cto.com/im
一、app.json配置属性之plugins1.添加插件首先打开官网网址:https://mp.weixin.qq.com/wxamp/basicprofile/thirdauth?token=1843552346&lang=zh_CN(https://mp.weixin.qq.com/wxamp/basicprofile/thirdauth?token=1843552346&lang=zh_CN
一、app.json配置属性之networkTimeout全局设置各类网络请求的超时时间,单位均为毫秒。属性类型必填默认值说明requestnumber否60000wx.request的超时时间,单位:毫秒。connectSocketnumber否60000wx.connectSocket的超时时间,单位:毫秒。uploadFilenumber否60000wx.uploadFile的超时时间,单位
一、app.json配置属性之tabBar如果小程序是一个多tab应用(客户端窗口的底部或顶部有tab栏可以切换页面),可以通过tabBar配置项指定tab栏的表现,以及tab切换时显示的对应页面。属性类型必填默认值描述最低版本colorHexColor是tab上的文字默认颜色,仅支持十六进制颜色selectedColorHexColor是tab上的文字选中时的颜色,仅支持十六进制颜色backgr
一、app.json配置属性之window属性类型默认值描述最低版本navigationBarBackgroundColorHexColor000000导航栏背景颜色,如000000navigationBarTextStylestringwhite导航栏标题颜色,仅支持black/whitenavigationBarTitleTextstring导航栏标题文字内容navigationStylest
前言微信小程序是由一个个单页面组成,每个页面都是由固定规则的。小程序页面自身分为两个主要部分独立运行:view模块和service模块。在开发者工具中,它们独立运行于不同的webivewtag中。view模块负责UI显示,它由开发者编写的wxml和wxss转换后代码以及微信提供相关辅助模块组成。一个view模块对应一个webview组件(也就是我们常规理解的一个页面),小程序支持同时多个view存
前言一、entryPagePath1.入口文件的配置指定小程序的默认启动路径(首页),常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填,将默认为pages列表的第一项。不支持带页面路径参数。csharp{"entryPagePath":"pages/index/index"}!在这里插入图片描述(https://s2.51cto.com/images/blog/202210/0917
一、app.json配置属性类型必填描述最低版本entryPagePathstring否小程序默认启动首页pagesstring是页面路径列表windowObject否全局的默认窗口表现tabBarObject否底部tab栏的表现networkTimeoutObject否网络超时时间debugboolean否是否开启debug模式,默认关闭functionalPagesboolean否是否启用插件
前言Request网络请求在任何应用中都是必不可少的,但微信小程序的wx.request()太过单一没法满足复杂的请求,所以就有本片文章讲解如何封装小程序的请求一、微信小程序首先我们来看一下官方文档中介绍的wx.request()!在这里插入图片描述(https://s2.51cto.com/images/blog/202210/07203352_63401cb03b0ed20558.png?xo
Copyright © 2005-2024 51CTO.COM 版权所有 京ICP证060544号