原生微信小程序笔记完整总结4.0

ops/2024/9/22 15:46:59/

   🤹‍♀️潜意识起点：个人主页

🎙座右铭：得之坦然，失之淡然。

💎擅长领域：大前端

是的，我需要您的：

🧡点赞❤️关注💙收藏💛

是我持续下去的动力！

目录

一. 小程序的基本了解

1.1 小程序和网页的区别 *

1.2 小程序的项目结构

1.3 小程序的页面结构

二. 小程序页面 

  2.1 创建小程序页面

2.2 什么是wxml 

2.3 什么是wxss 

三. 小程序的基本语法

 3.1 view

3.2 scorll-view

 3.3 swiper

 3.4  text

 3.5 button

3.6 image

 四.小程序数据绑定和使用

 4.1 定义data数据

4.2 使用data数据 

 4.3 事件绑定bind:tap

4.4 this.setdata 

4.5 条件渲染vx:if

4.6 hidden

4.7 v:if 和 hidden的对比

五.小程序的其他知识点

 5.1 rpx尺寸单位

 5.2 微信小程序数据请求

 六.笔记总结

🏃‍♀️作者想说的话：

🧡

笔记是我观看黑马小程序课程总结出我认为比较重要的知识点，笔记是我的原创，知识点是我自己总结。要某一个知识点比较详细的话可以去找其他博文，作者从自学到写下这篇文章过程中有一定的编码经验，全部重点，我认为用不到的不会出现在笔记中！

🧡

❤️

不要用于商业活动，谢谢配合!

❤️

💙

本人也是大学生，编码习惯学习习惯不是特别的规范，用于交流学习讨论，目的在于提高大家的前端编程水平哈。希望这篇微信小程序的知识点能有效的帮助到大家！

💙

🧡一. 小程序的基本了解

1.1 小程序和网页的区别 *

e4d8e4ac75b04998bd730dd602db9917.png​

1.2 小程序的项目结构

🤹‍♂️后面会出现页面结构，组件结构，简单来说 ：项目结构是包括页面结构和组件结构的。💚

6c3ce81aaade44c98ce9e69f087b73b8.png​

💗这里记住这三个结构就可以了，其他的后面进阶了再了解，我认为简单的项目其他也用不到 

a9f20a95379b4984832d62c02c7319ad.png​

059a96d3d7214a4184ab0abb6d2e99b3.png​

0e12e4079da14aeea4028489aa527d07.png​

🍓你要有个概念：

  1. json结尾的就是配置文件。
  2. js结尾的就是js文件，放一些数据或者方法的。

1.3 小程序的页面结构

 89e9c0217b78497ea2266ffffdd7bb31.png​

💜如上图所示：

1.放在pages文件夹中的index和logs文件夹就是一个页面文件夹 ，里面放着页面的四个文件

2.js就是原生js

3.wxml可以看成html

4.wxss可以看成css

53374fd821d9455a8dfac7918510f70d.png​

  

💚二. 小程序页面 

 
 2.1 创建小程序页面

创建小程序页面非常简单的 

第一步：找到app.json

0b4ca225779e4812b206abafb6c48c04.png​

第二步：直接如上图模仿上面的路径再添加一个路径，如下所示：

  "pages": ["pages/home/home","pages/contact/contact","pages/shoplist/shoplist","pages/index/index"],

 第三步：小程序会自动创建出index页面，非常简单！

🧡小程序自动创建出页面文件夹，而且js json wxml  wxss四件套都帮你建好了。很神奇吧！

8c91ec29571e40e48d37d94358b90d15.png​

2.2 什么是wxml 

可以直接认为是html😀

wxml和html有一些区别：

 f1ee725f6d9144b4b704528726637930.png​

😅我们写微信小程序的话，div   ==   view 之类的不同，参考上表就可以了 

2.3 什么是wxss 

可以直接认为是css 😀

a8ae8541423d48b7a14a36c0161d0de5.png​ 

58b975d6335849f5ada58d50f033a916.png​ 

109c6b1b54844014b8c7dbdf5dcc4af5.png​ 

上面三张图片去了解了wxss的知识点就了解的差不多了 😆

💜三. 小程序的基本语法

 3.1 view

😂学过 html的都知道   view和div是一个用法

使用方法如下图所示，其他的我就不想啰嗦了。本来就简单！

<view>hello world</view>

706e4786005440a9a5621cbbf1a3b89e.png​ 

3.2 scorll-view

scorll-view的基本介绍：记住是滚动盒子就可以了

 实现一个案例帮助你更快的理解scorll-view
7a2844ad24654e14a0b8653330816101.png​

wxml中的代码 :

<scroll-view scroll-y><view class="one">1</view><view class="two">2</view><view class="three">3</view><view class="four">4</view>
</scroll-view>

wxss中的代码： 

scroll-view{/* display: flex; */width: 200rpx;height: 150px;
}
.one{width: 200rpx;height: 100px;background-color: aqua;
}
.two{width: 200rpx;height: 100px;background-color:red;
}
.three{width: 200rpx;height: 100px;background-color:sandybrown;
}
.four{width: 200rpx;height: 100px;background-color:seagreen;
}

运行结果： 往上滑动可以展示更多的盒子。

a83cec35bd5547beb22fbf484bb95bfe.png​

注意事项：

💙

用scorll-view的时候，scorll-view是作为最外面的大盒子的，里面还要一些view小盒子才可以实现滑动的效果。

💙

💜

用scorll-view的时候一定要给父盒子scorll-view设置一个宽高。

💜 

 3.3 swiper

 简单介绍：swiper是轮播图用的标签。

 下面一个案例带你了解轮播图swiper的使用。

wxml代码：

<!-- 轮播图结构 -->          
<!-- indicator-dots="true"设置是否出现小圆点 -->
<swiper class="swiper-container">
<!-- 第一个轮播图 轮播图里面可以放文字或图片，这里我放文字了-->
<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-item></swiper-item>即可 -->
</swiper>

wxss中的代码：

.swiper-container{height: 150px;
}
.item{height: 100%;line-height: 150px;text-align: center;
}
swiper-item:nth-child(1) .item{background-color: darkgoldenrod;
}
swiper-item:nth-child(2) .item{background-color: chartreuse;
}
swiper-item:nth-child(3) .item{background-color:magenta;
}

 运行结果：

5ed352f720464bf5bb56679c5405fbcc.png

swiper的常用属性：

e398a7d6dfd54eb3a80c5a5bb0b6f16e.png  

 3.4  text

 text没什么好讲的他就像html中的span知道吧，然后text有一个特性其他的标签没有的！

754e0ea2e3d04640991c00545c2c9892.png

wxml中代码：

<text selectable>18888888888</text>

 这样设置selectable属性，那么小程序就可以对这部分内容进行复制：

这是text唯一具有的特性！

 3.5 button

button是一个按钮，看下面这图足够了！

 dc27bfd1af9546f1afcc12ee81d3ab11.png

3.6 image

image是放图片的，相当于html中的img

3617469b63834aac96545bdc8b658700.png

🏃‍♀️基本使用方式：

<image src="图片地址"></image>

image中有一个最重要的属性mode:

 1d5cf0865e2d4acfb859faf6e8211ba3.png

使用方式如图所示：

857724bda4544c48aa7a682710f3b915.png

 💙四.小程序数据绑定和使用

 4.1 定义data数据

找到页面的 .js文件

a21a4e81c2b14c35ad97279f3ca9fd1b.png

然后data里面就是放数据和方法的，如图所示即可：

1a2b103f095a4e2793df53accdd67012.png

4.2 使用data数据 

 💗使用data数据直接花括号就可以了，这个花括号叫Mustache语法

44c06deebf724d5b80d832f50035c607.png  

 4.3 事件绑定bind:tap

🙉事件绑定很重要哦！事件绑定说的简单点就是给绑定点击事件，更简单点说就是给个按钮触发点击事件。就相当于@click。

使用方式 

<button type="primary" bind:tap="btn">点击触发</button>

我这讲的有一点基础要更加详细请移步：微信小程序基础

4.4 this.setdata 

this.setdata就是修改data中的值的用法，如下图所示：

dd76c378ec3246378aef10301e266716.png

4.5 条件渲染vx:if

🦁wx：if相当于vue中的v-if使用方式如下图所示：

18e0fb21c7c14a6da78a8ee360c8d8c1.png 780b2db18f004b39b7c3236c9fa4dbf4.png

 我这讲的有一点基础要更加详细请移步：微信小程序基础

4.6 hidden

学完vue后你可能不知道hidden是什么东西，hidden中文意思是隐藏的意思

e2c03f1b64824e7681238b76d5715d5a.png

95f43f92d2d74a25bfc2a070642aa86d.png 基本上和wx:if是一个用法，感觉会其中一个就差不多了，多去找几个项目做做！

4.7 v:if 和 hidden的对比

 abb59c5277284292a9df7c4202fbdce8.png

 72e818e902ee4738b65825d8cef58c89.png

 4.8  wx：for列表渲染

 e9510c2e31684817a3f73e4c9023646d.png

数组的遍历渲染：会有index  会有item 都是可以进行遍历的 

8c1fe9805be14131b0e2059bc09efe10.png

💛五.小程序的其他知识点

 5.1 rpx尺寸单位

💗

响应式设计： rpx是一种相对单位，其值相对于屏幕宽度。屏幕宽度分为750rpx，这意味着1rpx等于屏幕宽度的1/750。这种设计使得布局能够根据屏幕宽度自动调整，实现响应式设计。

💗

💚

灵活性： rpx单位的使用提高了布局的灵活性，使得开发者可以快速适配不同尺寸的屏幕，无需为不同屏幕单独编写样式。

💚

🧡

性能考量： 虽然rpx提供了响应式布局的能力，但在使用时也应注意不要过度依赖过于复杂的布局和样式计算，以免影响小程序的性能。

🧡

💜

开发者工具支持： 微信开发者工具支持rpx单位的预览和调试，开发者可以通过工具实时查看不同屏幕尺寸下的布局效果。

💜

❤️

兼容性： rpx单位在微信小程序中广泛使用，但需要注意的是，它仅适用于微信小程序平台，不是一种通用的Web标准。

❤️

使用方式：在微信小程序的WXML文件中，可以使用rpx单位来设置样式属性，如宽度、高度、边距、字体大小等。  微信小程序的页面宽度默认为750rpx，开发者可以在app.json或页面的.json文件中设置页面的窗口大小，以适应不同屏幕尺寸。

<view style="width: 100rpx; height: 50rpx;"></view>
{"window": {"width": "750rpx","height": "1334rpx"}
}

 5.2 微信小程序数据请求

🧡微信小程序提供了wx.request方法来发起HTTP请求。基本用法如下：

wx.request({url: 'https://example.com/api/data', // 开发者服务器接口地址method: 'GET', // 请求方法，如GET或POSTdata: {}, // 请求参数header: {'content-type': 'application/json' // 头部信息},success(res) {console.log(res.data) // 接口调用成功的回调},fail(err) {console.error(err) // 接口调用失败的回调}
})

💙在页面发起请求：

// 在页面的JavaScript文件中发起请求
Page({data: {items: []},onLoad: function() {this.fetchData();},fetchData: function() {wx.request({url: 'https://example.com/api/items',success: (res) => {this.setData({ items: res.data });},fail: (err) => {wx.showToast({title: '加载失败',icon: 'none'});}});}
});

 💙六.笔记总结

学习微信小程序是一个充满挑战和乐趣的过程，它不仅让我对前端开发有了更深入的理解，也让我体会到了移动应用开发的便捷和高效。希望笔记能真正的帮助到大家！

🤹‍♀️潜意识起点：个人主页

🎙座右铭：得之坦然，失之淡然。

💎擅长领域：大前端

是的，我需要您的：

🧡点赞❤️关注💙收藏💛

是我持续下去的动力！


http://www.ppmy.cn/ops/97653.html

相关文章

Linux驱动学习之点灯（四，linux2.6）

Linux驱动学习之点灯（四，linux2.6）

上篇最后的第二种点灯方法年代比较久远&#xff0c;register_chrdev&#xff08;&#xff09;这个函数一下申请了255个设备号&#xff0c;不建议使用 如下图 下图的函数在linux2.6里是上图函数的升级版&#xff0c;不过他是静态分配&#xff0c;后续还得添加到cdev里 从上图函…
阅读更多...
Pandas DataFrame的创建方法（Create DataFrame）

Pandas DataFrame的创建方法（Create DataFrame）

pandas是一个第三方数据分析库&#xff0c;其集成了大量的数据模型和分析工具&#xff0c;可以方便的处理和分析各类数据。其中主要对象类型有Series&#xff0c;DataFrame和Index。本文介绍DataFrame对象的基本创建方法。 关于DataFrame的基础用法&#xff0c;可以查看下面的…
阅读更多...
AIGC 与 ChatGPT 的区别与联系

AIGC 与 ChatGPT 的区别与联系

前言 在人工智能技术飞速发展的今天&#xff0c;生成式人工智能内容&#xff08;AIGC&#xff09;和对话式 AI&#xff08;如 ChatGPT&#xff09;成为了备受瞩目的话题。虽然这两者在技术基础和应用领域上有很多重叠之处&#xff0c;但它们也各自有独特的特点和用途。本文将深…
阅读更多...
使用Go env命令设置Go的环境

使用Go env命令设置Go的环境

前言 在进行Go开发的时候&#xff0c;设置Go的环境变量信息是必须的。下面介绍windows和Linux&#xff0c;以及Go自身提供的命令进行设置的形式 Linux的设置 In Linux or macOS, you can execute the below commands.(在Linux或者macOS&#xff0c;你可以执行下面的命令) 复制…
阅读更多...
SI4463直接模式发送接收

SI4463直接模式发送接收

终于知道程序Debug卡死在startup_stm32fxxx_hd.s问题
阅读更多...
BaseCTF2024 WP （主要为Rev）

BaseCTF2024 WP （主要为Rev）

Rev Rev视频解析&#xff1a;[Rev0&#xff1a;从零开始的逆向生活]BaseCTF2024 Week1 Rev 讲解_哔哩哔哩_bilibili [Week1] You are good at IDA [Week1] UPX mini 脱UPX标准壳&#xff0c;解base64 [Week1] Ez Xor 简单的反向异或&#xff0c;数据动调取一下 #base_xor e…
阅读更多...
舜宇光学科技社招校招入职测评：商业推理测验真题汇总、答题要求、高分技巧

舜宇光学科技社招校招入职测评：商业推理测验真题汇总、答题要求、高分技巧

舜宇光学科技&#xff08;集团&#xff09;有限公司&#xff0c;成立于1984年&#xff0c;是全球领先的综合光学零件及产品制造商。2007年在香港联交所主板上市&#xff0c;股票代码2382.HK。公司专注于光学产品的设计、研发、生产及销售&#xff0c;产品广泛应用于手机、汽车、…
阅读更多...
多重示例详细说明Eureka原理实践

多重示例详细说明Eureka原理实践

Eureka原理&#xff08;Eureka Principle&#xff09;是指在长时间的思考和积累之后&#xff0c;通过偶然的瞬间获得灵感或发现解决问题的方法的一种认知现象。这个过程通常包括三个主要阶段&#xff1a;准备阶段、潜伏期以及突然的灵感爆发。下面详细说明Eureka原理的实践步骤…
阅读更多...
最新文章

Copyright @ 2022~2023