微信小程序入门笔记

news2024/11/16 6:54:39

常用技术:开源库

图表:wxcharts-min.js

网络通信:类似 ajax

ui: WeUi

 

JSON 配置文件

小程序中,包含唯一的全局配置文件 app.json,以及每个页面的配置文件 page.json。每单页页面相应的 JSON 文件会覆盖与 app.json相同的配置项。

如下,是一个包含了所有配置选项的简单配置 app.json。

项目配置文件

  1. 项目根目录中的 project.config.json 和 project.private.config.json 文件可以对项目进行配置,
  2. project.private.config.json 中的相同设置优先级高于 project.config.json
  3. 可以在 project.config.json 文件中配置公共的配置,在 project.private.config.json 配置个人的配置,可以将 project.private.config.json 写到 .gitignore 避免版本管理的冲突。
  4. project.private.config.json 中有的字段,开发者工具内的设置修改会优先覆盖 project.private.config.json 的内容。如在 project.private.config.json 有 appid 字段,那么在 详情-基本信息 中修改了 appid,会写到 project.private.config.json 中,不会覆盖掉 project.config.json 的 appid 字段的内容
  5. 开发阶段相关的设置修改优先同步到 project.private.config.json 中,与最终编译产物有关的设置无法在 project.private.config.json 中生效

 

注册初始小程序

  1. app()函数注册微信小程序。全局小程序中,只能注册一次;

  2. 不能在 app()内的函数中调用 getApp()(小程序实例),使用 this就可以拿到小程序的实例;

  3. 不要在 onLaunch的时候 getCurrentPage(),因为此时 Page还没有生成;

注册小程序的页面 page.js

Page()用来注册一个页面,维护该页面的生命周期以及数据。

JS层

调用 getApp()(小程序实例)

JS 逻辑层

小程序的逻辑层由 Java 语言完成。但因为小程序不在浏览器中运行,所以 JS 在 web 浏览器中的一些函数不能用,如 document、 window等。

app.js有全局的小程序生命周期, page.js有自己本页面的生命周期。

公共模块 util.js

公共模块方法需要通过 module.exports对外暴露接口,使用的时候需要利用 require(path),将文件引入。如:

数据操作

setData()不能直接操作数据,例如 this.data.text="xxxxx"就是错误的。你需要在 this.setData()之中,进行数据的操作。

同时,这里有作用域的问题。比如,需要在局部函数中使用,就需要 .bind(this)。

如果你需要操作全局的数据,你需要在 app.js中进行相应设置,例如:

视图层 WXML

视图层的数据绑定均来自于 Page中的 data,想要修改相应值,你需要用到 this.setData。数据绑定使用两对花括号,将变量名包起来。

条件渲染

你可以利用 if和 else,在视图层上编写在特定情况下,出现的不同的视图结果。

很多人会将 CSS 中的 display: hidden属性,与 WXML 的这个特性做一个比较。

  • 微信小程序中的 wx:if是惰性的。如果不符合渲染条件,它不会渲染相应部分;

  • 使用 display: hidden时,元素始终渲染,只是视图层上没有显示,用户看不见。

如果你的小程序有元素显示频繁切换的需求,建议你使用 display: hidden,能够为用户提供能顺畅的使用体验。

列表渲染

相当于让 WXML 处理一个循环。

在 WXML 中,你可以这样来建立一个 for循环:

然后在相应的 JS 中,新建一个数组:

需要注意的是,如果列表中的项需要动态添加到列表中,并希望项目保持原有的特征和状态,那么你应该使用 wx:key。

wx:key有两种形式:

  1. 字符串:wx:key="unique";

  2. 保留关键字:wx:key="*this"。

运算

WXML 可以执行简单的运算任务。例如:

也可以做到字符串拼接:

甚至,你可以使用 ...在 WXML 中展开对象。字:wx:key="*this"。

小程序API的3大分类

以下来了解一下小程序里面的API。小程序中的API是由的宿主环境提供的,通过宿主环境提供了这些丰富的API,开发者可以方便的去调用微信的能力。可以去获取用户的信息,可以进行本地数据的存储,也可以用微信支付等相关的功能。

接下来了解一下小程序中API的三大分类,第一类是事件监听类的API,第二类是同步API,第三类是异步API。接下来分别看一下这每一类API各自的特点事件监听类的API,都是以UN开头的,通过事件监听API可以来监听某些事件的触发可以调用wx.onWindowResize这么一个事件来监听窗口尺寸变化的一个事件。

 

顶级对象: wx

注意浏览器里面有一个顶级的js对象,是window对。在微信小程序的js里面,也有一个顶级的对象就是wx,可以认为这个wx就相当于是浏览器里面Window,可以全局进行调用,不用声明。

通过wx.onWindowResize就可以来接听窗口尺寸变化。凡事以on开头的都是事件监听类的API。

接下来再了解一下同步API的特点。它的特点有两个,首先同步API都是以sync结尾的,这是第一个特点,同时还有第二个特点,就是同步API的执行结果,可以通过函数返回值直接获取。

可以调用wx.setStorageSync,就可以在本地存储里面去写入内容。Key就是对应内容的键,Value是对应内容的值。

接下来再了解一下异步的API,异步API的特点就和JavaScript里面的ajax函数比较类似,需要通过success fail 还有compete,这些回调函数来接收异步API执行的结果。在微信小程序里面,可以调用微信点request,这个方法来发起一个网络的数据请求,可以指定一个success回调,如果成功了就会执行这个回调,如果失败的话咱们可以执行fail对应的代码。

project.config.json

es6:false 是否es6转成es5 ,否:不转

IDE

微信开发者工具是一定要安装,

因为用习惯Westorm, 安装了支持微信小程序语法插件:Wechat mini program support,写代码在webstorm, 同时运行微信开发者工具运行,看效果与log信息

插件使用参考手册 :

Webstorm 支持微信小程序开发插件 Wechat mini program support_Lan.W的博客-CSDN博客 

 

 以上是我开发时操作界面,完美结合了webstorm。

开心搬码每一天,嘻嘻~~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/605383.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

门控时钟检查(clock gating check)的理解和设计应用(上)

在笔者的一篇老文Clock Gating之浅见 中,一起探讨过工具处理门控时钟的方法和门控时钟所带来的相关收益和面积代价。除此之外,门控时钟的检查(clock-gating check)在STA中也有相应的处理方式,通过这篇文章,…

4年测试经验,一问三不知,过于离谱...

公司今年要招人,面倒是面了很多测试,但没有一个合适的。一开始想要的就是中级的水准,也没指望来大牛,当然来了更好,提供的薪资在10-20k,来面试的人有很多,但平均水准真的是让人失望。 看简历时很多都写着3…

【瑞萨MCU】玩转 HMI-Board 之 MDK + RASC 点灯

此前我们已经配置好了 瑞萨 MCU MDK RASC 的开发环境,接下来进入到瑞萨 MCU 的 HelloWorld 环节,使用 MDK 点亮两个 LED 灯。 这次我们使用的是瑞萨和 RT-Thread 联合推出的 HMI-Board 开发板。 HMI-Board 开发板简介 HMI-Board 为 RT-Thread 联合瑞…

3.6 多边形游戏

博主简介:一个爱打游戏的计算机专业学生博主主页: 夏驰和徐策所属专栏:算法设计与分析 1.什么是多边形游戏? 对于多边形游戏,一种特定类型的玩法,即在给定的简单多边形上进行移动、删除顶点或边&#xff…

[图表]pyecharts-3D柱状图

[图表]pyecharts-3D柱状图 先来看代码: import randomfrom pyecharts import options as opts from pyecharts.charts import Bar3D from pyecharts.faker import Fakerdata [(i, j, random.randint(0, 12)) for i in range(6) for j in range(24)] c (Bar3D().…

box-shadow盒子阴影几种用法

box-shadow盒子阴影 语法: 外阴影:box-shadow: X轴 Y轴 Rpx color; 属性说明(顺序依次对应): 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值(大小) 阴影的颜色 内阴…

【Linux】LAMP框架的架构与环境配置

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 LAMP框架的架构与环境配置 一、LAMP架构的相关知识1.LAMP组件的主要作用2.LAMP组件安装顺序 二、编译安装Apache httpd服务1.关闭防火墙,将所需软件包传到/opt目录…

00后简直太卷了,让我们这些老油条情何以堪......

前几天我们公司一下子也来了几个新人,这些年前人是真能熬啊,本来我们几个老油子都是每天稍微加会班就打算走了,这几个新人一直不走,搞得我们也不好走。 2023年春招结束了,最近内卷严重,各种跳槽裁员&#x…

ARM-LED灯--蜂鸣器

目录 点亮LED灯 1.开发板介绍 2.cpu控制硬件原理 3.本地开发和交叉开发 4.点灯实验 分析电路图 底板原理图:1)电路原理图,LED的控制方式->高电平亮,低电平灭 核心板原理图:2)LED与SOC的连接关系-&…

Vue+node.js校园食堂餐厅外卖点餐系统088e4

外卖点餐系统的主要使用者分为管理员和用户,实现功能包括用户管理、菜品分类管理、菜品信息管理、系统管理、订单管理等功能。由于本网站的功能模块设计比较全面,所以使得整个外卖点餐信息管理的过程得以实现。 本外卖点餐系统主要包括二大功能模块&…

Dynamic Connected Networks for Chinese Spelling Check ---- 论文阅读

DCN 动机简介方法动态连接评分器候选生成拼音增强候选生成器 训练损失函数预训练 预测 实验数据集方法比较 消融 Paper:https://aclanthology.org/2021.findings-acl.216.pdf Code:https://github.com/destwang/DCN [Pytorch] 哈工大讯飞 动机 大多数关…

【Linux】Apache 配置与应用

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 一、构建虚拟 Web 主机1.httpd服务支持的虚拟主机类型 二、基于域名的虚拟主机1.为虚拟主机提供域名解析2.为虚拟主机准备网页文档3.添加虚拟主机配置4.设置访问控制…

FreeRTOS进阶学习

一、FreeRTOS内核控制控制函数: 1、请求任务切换函数: 函数原型:#define taskYIELD() 函数解析:实际上是一个宏定义的函数,调用一次会触发pendSV中断来实现任务切换; /// 2、在任务中进入临界区函数&…

LLM:大模型的正则化

主流大模型使用的Normalization主要有三类,分别是Layer Norm,RMS Norm,以及Deep Norm。 小模型的正则化参考: l1l2正则和dropout正则化[https://youzipi.blog.csdn.net/article/details/75307522] LN和BN归一化 [深度学习&…

【3000字帮你深度剖析数据在内存中的存储】

本节重点 -- 重中之重 数据类型详细介绍 整形在内存中的存储:原码、反码、补码 大小端字节序介绍及判断 浮点型在内存中的存储解析 准备好了,开始啰,在小小的花园里面......最近被这个歌曲洗脑,但是我们并不是要唱歌,而…

linux基础知识学习记录

这里写自定义目录标题 一、 计算机基础知识二 、 Linux操作系统的介绍三、 Linux的安装四、Linux命令使用汇总 一、 计算机基础知识 计算机组成:计算机主要硬件和软件2部分组成。计算机软硬件的概念:硬件是可以看得见的物理实体,软件是运行在…

还在担心期末挂科吗? 期末必备复习资料-----“树“的概念

🎈个人主页:🎈 :✨✨✨初阶牛✨✨✨ 🐻推荐专栏: 🍔🍟🌯C语言进阶 🔑个人信条: 🌵知行合一 🍉本篇简介:>:记录期末复习 数据结构中有关树的一些知识 金句分享: ✨我将…

2023最新150道渗透测试面试题

前言 眨眼间2023年快过去一半了,不知道大家有没有找到心仪的工作呀,今天我给大家整理了150道渗透测试面试题给大家,需要答案的话可以在评论区给我留言哦~ 第一套渗透测试面试题 你了解什么是网络安全渗透测试吗? 你的网络安全渗…

Stream相关知识点

这里写目录标题 Stream流体验Stream流Stream流的常见生成方式流程分类具体操作 Stream流常见中间操作之filter简介具体操作 Stream流常见中间操作之limit&skip简介具体操作 Stream流常见中间操作之concat&distinct简介具体操作 Stream流常见中间操作之concat&disti…

什么是SSO

1. 什么是SSO? 「SSO」(单一登录single sign on)是一种身份验证机制,它允许用户使用单一的凭据登录到多个相关应用程序或系统中。换句话说,用户只需一次登录,就可以访问多个不同的应用程序,无需…