响应式网页设计、开放源代码、永久使用、不限域名、不限使用次数

2024年微信小程序 模板 函数(合集3篇)

微信小程序 模板 函数 第1篇

概念:上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。 设置步骤: -> window -> 为 onReachBottomDistance 设置新的数值

注意:默认距离为50px,如果没有特殊需求,建议使用默认值即可。

 

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

注意:

 

根据资料中提供的小图标、 在小程序中配置如图所示的 tabBar 效果:

① 把资料目录中的 images 文件夹,拷贝到小程序项目根目录中

② 将需要用到的小图标分为 3 组,每组两个,其中:

 

通过 文件的 pages 节点,快速新建 3 个对应的 tab 页面,示例代码如下:

其中,home 是首页,message 是消息页面,contact 是联系我们页面。

 

① 打开 配置文件,和 pages、window 平级,新增 tabBar 节点

② tabBar 节点中,新增 list 数组,这个数组中存放的,是每个 tab 项的配置对象

③ 在 list 数组中,新增每一个 tab 项的配置对象。对象中包含的属性如下:

在文件中输入tar会自动生成一些配置项目 

 

 

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

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

注意:当页面配置与全局配置冲突时,根据就近原则,最终的效果以页面配置为准。

 

全局变量定义的项目:                                局部变量的项目:

 

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

需求描述:假设在自己的微信小程序中,希望请求 域名下的接口 配置步骤:登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名

 

然后进行身份验证

 

注意事项:

调用微信小程序提供的 () 方法,可以发起 GET 数据请求,示例代码如下:

 

 

调用微信小程序提供的 () 方法,可以发起 POST 数据请求,示例代码如下:

 

在很多情况下,我们需要在页面刚加载的时候,自动请求一些初始化的数据。此时需要在页面的 onLoad 事件中调用获取数据的函数,示例代码如下:

 

如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https

协议的接口。

此时为了不耽误开发的进度,我们可以在微信开发者工具中,临时 开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」选项, 跳过 request 合法域名的校验。

 

注意:跳过 request 合法域名校验的选项,仅限在开发与调试阶段使用!

跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器,而是微信客户端,所以小 程序中不存在跨域的问题。

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

① 获取轮播图数据列表的接口

② 获取九宫格数据列表的接口

① 能够使用 WXML 模板语法渲染页面结构

⚫ wx:if、wx:elif、wx:else、hidden、wx:for、wx:key

② 能够使用 WXSS 样式美化页面结构

⚫ rpx 尺寸单位、@import 样式导入、全局样式和局部样式

③ 能够使用 对小程序进行全局性配置

⚫ pages、window、tabBar、style

④ 能够使用 对小程序页面进行个性化配置

⚫ 对单个页面进行个性化配置、就近原则

⑤ 能够知道如何发起网络数据请求

⚫ () 方法、onLoad() 事件

微信小程序 模板 函数 第2篇

微信客户端在打开小程序之前,会把整个小程序的代码包下载到本地。

通过 pages 字段获取当前小程序的所有页面路径。

pages 中的一个行就是首页。

小程序启动后,执行 定义的 App 实例的 onLaunch 回调。

微信客户端先根据 pages/logs/ 配置生成一个页面,接着装载这个页面的 WXML 结构 和 WXSS 样式,最后装载

Page 是一个页面构造器,会生成一个页面,在生成页面的同时,小程序会把 data 数据 和 一起渲染出最终结构。

页面渲染完成后,页面实例会收到一个 onLoad 的回调,这个回调可以处理逻辑,一般用来请求网络接口获取数据。

小程序提供了丰富的基础组件。详情 小程序自定义组件 详情

在客户端,长按屏幕可以选中进行复制。

将文本渲染成 html 格式。

微信小程序 模板 函数 第3篇

on 开头的 API 用来监听某个事件是否触发。

Sync 结尾的 API 都是同步 API。

大多数 API 都是异步 API。这类 API 接口通常都接受一个 Object 类型的参数,这个参数都支持按需指定以下字段来接收接口调用结果。

异步 API 支持 callback & promise 两种调用方式,接口参数 object 中不包含 success/fail/complete 时将默认返回 promise,否则仍按回调方式执行,无返回值。

回调函数的参数

successfailcomplete 函数调用时会传入一个 Object 类型参数,包含以下字段。

需要开通 微信云开发 ,在小程序直接调用服务端的云函数。

mut-bind 也可以绑定事件,mut-bind 触发后,冒泡到其他节点上的 mut-bind 不会触发,但是 bindtapcatchtap 依旧会触发。

组件触发事件后,处理函数会手到一个事件对象 BaseEvent 。详情

通关 data-参数名 的形式传参,再通过 .参数名 的形式获取。

通过 获取表单数据。

频繁切换时,使用 hidden

控制条件复杂时,使用 wx:if 搭配 wx:elif wx:else 使用。

block 配合 vx:for 使用,block 不渲染在页面上。

hidden 为 true,表示隐藏,false 则显示。

wx:for 用于循环渲染。item 为每一项,index 为下标,wx:key 为唯一标识。

通过 wx:for-indexwx:for-item 来起别名。

猜你喜欢