微信小程序超详细学习笔记【转载】

微信小程序学习笔记总结
最新推荐文章于 2025-08-26 00:09:48 发布
转载 最新推荐文章于 2025-08-26 00:09:48 发布 · 95 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：https://blog.youkuaiyun.com/weixin_73355603/article/details/143093006?ops_request_misc=&request_id=&biz_id=102&utm_term=%E5%B0%8F%E7%A8%8B%E5%BA%8F&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~sobaiduweb~default-4-143093006.nonecase&spm=1018.222
文章标签：

#微信小程序 #学习 #笔记 

            <div id="content_views" class="htmledit_views">
                <p>&nbsp;&nbsp;🤹‍♀️潜意识起点：<a href="https://blog.youkuaiyun.com/weixin_73355603?spm=1000.2115.3001.5343" title="个人主页">个人主页</a></p>

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

💎擅长领域：大前端

是的，我需要您的：

🧡点赞❤️关注💙收藏💛

是我持续下去的动力！

目录

一. 小程序的基本了解

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​

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


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     "pages": [
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     "pages/home/home",
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     "pages/contact/contact",
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     "pages/shoplist/shoplist",
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     "pages/index/index"
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       ],

 第三步：小程序会自动创建出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中的代码 :


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

wxss中的代码： 


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     scroll-view{
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     /* display: flex; */
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     width: 
     
     200rpx;
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     height: 
     
     150px;
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     }
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     .one{
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     width: 
     
     200rpx;
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     height: 
     
     100px;
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     background-color: aqua;
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     }
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     .two{
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     width: 
     
     200rpx;
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     height: 
     
     100px;
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     background-color:red;
    
    
    
   
   
  15. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     }
    
    
    
   
   
  16. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     .three{
    
    
    
   
   
  17. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     width: 
     
     200rpx;
    
    
    
   
   
  18. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     height: 
     
     100px;
    
    
    
   
   
  19. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     background-color:sandybrown;
    
    
    
   
   
  20. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     }
    
    
    
   
   
  21. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     .four{
    
    
    
   
   
  22. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     width: 
     
     200rpx;
    
    
    
   
   
  23. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     height: 
     
     100px;
    
    
    
   
   
  24. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     background-color:seagreen;
    
    
    
   
   
  25. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     }

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

a83cec35bd5547beb22fbf484bb95bfe.png​

注意事项：

💙

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

💙

💜

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

💜 

 3.3 swiper

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

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

wxml代码：


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <!-- 轮播图结构 -->          
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <!-- indicator-dots="true"设置是否出现小圆点 -->
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <swiper class="swiper-container">
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <!-- 第一个轮播图 轮播图里面可以放文字或图片，这里我放文字了-->
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <swiper-item>
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     <view class="item">A
     
     </view>
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </swiper-item>
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <!-- 第二个轮播图 -->
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <swiper-item>
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     <view class="item">B
     
     </view>
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </swiper-item>
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <!-- 第三个轮播图 -->
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <swiper-item>
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     <view class="item">C
     
     </view>
    
    
    
   
   
  15. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </swiper-item>
    
    
    
   
   
  16. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <!-- 还需要第四个轮播图就再添加一个<swiper-item></swiper-item>即可 -->
    
    
    
   
   
  17. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </swiper>

wxss中的代码：


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     .swiper-container{
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     height: 
     
     150px;
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     }
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     .item{
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     height: 
     
     100%;
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     line-height: 
     
     150px;
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     text-align: center;
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     }
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     swiper-item
     
     :nth-child(
     
     1) 
     
     .item{
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     background-color: darkgoldenrod;
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     }
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     swiper-item
     
     :nth-child(
     
     2) 
     
     .item{
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     background-color: chartreuse;
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     }
    
    
    
   
   
  15. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     swiper-item
     
     :nth-child(
     
     3) 
     
     .item{
    
    
    
   
   
  16. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     background-color:magenta;
    
    
    
   
   
  17. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     }

 运行结果：

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>
 
 

 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     {
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       "window": {
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         "width": "750rpx",
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         "height": "1334rpx"
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       }
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     }

 5.2 微信小程序数据请求

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


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     wx.
     
     request({
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     url: 
     
     'https://example.com/api/data', 
     
     // 开发者服务器接口地址
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     method: 
     
     'GET', 
     
     // 请求方法，如GET或POST
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     data: {}, 
     
     // 请求参数
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     header: {
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     'content-type': 
     
     'application/json' 
     
     // 头部信息
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       },
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     success(
     
     res) {
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     console.
     
     log(res.
     
     data) 
     
     // 接口调用成功的回调
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       },
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     fail(
     
     err) {
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     console.
     
     error(err) 
     
     // 接口调用失败的回调
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       }
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     })

💙在页面发起请求：


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     // 在页面的JavaScript文件中发起请求
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     Page({
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     data: {
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     items: []
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       },
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     onLoad: 
     
     function(
     
     ) {
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     this.
     
     fetchData();
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       },
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     fetchData: 
     
     function(
     
     ) {
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         wx.
     
     request({
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
          
     
     url: 
     
     'https://example.com/api/items',
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
          
     
     success: 
     
     (res) => {
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
            
     
     this.
     
     setData({ 
     
     items: res.
     
     data });
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           },
    
    
    
   
   
  15. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
          
     
     fail: 
     
     (err) => {
    
    
    
   
   
  16. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             wx.
     
     showToast({
    
    
    
   
   
  17. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
              
     
     title: 
     
     '加载失败',
    
    
    
   
   
  18. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
              
     
     icon: 
     
     'none'
    
    
    
   
   
  19. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             });
    
    
    
   
   
  20. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           }
    
    
    
   
   
  21. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         });
    
    
    
   
   
  22. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       }
    
    
    
   
   
  23. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     });

 💙六.笔记总结

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

[原文链接](https://blog.youkuaiyun.com/weixin_73355603/article/details/143093006?ops_request_misc=&request_id=&biz_id=102&utm_term=%E5%B0%8F%E7%A8%8B%E5%BA%8F&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~sobaiduweb~default-4-143093006.nonecase&spm=1018.2226.3001.4450)

小粥学姐
关注
微信小程序项目实训--慕尚花坊学习笔记
lllggk的博客
03-13 1145
爱礼精选</view><view class="left-view-item">鲜花玫瑰</view><view class="left-view-item">永生玫瑰</view><view class="left-view-item">玫瑰珠宝
自动构建 & 一键回滚 & Jenkins自动构建微信小程序（多文整合，亲测有用，作为笔记用）
sjskkkkk的博客
07-31 1206
Jenkins+gogs自动构建前后端并快速回滚实现自动构建前端后端合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 自动构建 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可
微信小程序学习
weixin_30905981的博客
08-26 1657
最近工作正好有闲暇时间，根据公司安排先前期学习调研一下“微信小程序”，以供后期解决相关的运营需求，而本篇文章就是我对此次学习的一次总结。 什么是小程序 ？ 如何全面具体的学习？ 注册与新建小程序 认识开发工具 目录结构与代码构成 JSON 配置文件 WXML 模版文件 WXSS 样式文件 JS 脚本文件 小程序的执行流程 小程序知识体系导图 小程序开发的重要说明 WXSS 模版语法 ...
微信小程序学习笔记
brycegao321的博客
01-08 955
上周微信小程序游戏“跳一跳”很火， 其实这是微信推广小程序的套路。 基于好奇心， 我仔细学习了小程序开发的知识。  1、小程序脚本语法类似于JavaScript， 文件后缀是.js；不同的是微信提供了wx前缀的API。 2、界面布局仍用常见的xml标签方式， 文件后缀是wxml; 3、 界面样式文件后缀是wxss(即WeiXin Style Sheet的缩写）， 格式跟css类似，具体定义可
微信小程序学习(一)
Mr.Yuan
12-27 4728
WXML 数据绑定 WXML中的动态数据均来自对应Page的data。 数据绑定使用”Mustache”语法（双大括号）将变量包起来 支持运算 算数运算 三元运算 逻辑运算 字符串运算 数据路径运算 组合 数组 {{item}} 对象 …拓展运算符:将一个对象展开,复制到一个新的对象 view> {{message}} view> // page.js Pag
微信小程序学习（一）
xiangmomo1的博客
12-22 332
一、数据库建立（LeanCloud的基本使用） 1.注册登录LeanCloud 注册网址:leancloud 2.新建LeanCloud服务应用
微信小程序个人/企业开放服务类目一览表
weixin_34342905的博客
01-03 5480
之前写了个牙科小程序，结果服务类目没写对，审核没过，在网上搜了小程序官方的服务类目表，还有一些审核标准。 微信小程序个人开放服务类目表 服务类目类目分类一类目分类二引导描述 出行与交通 代驾 / / 生活服务 家政、丽人、摄影/扩印、婚庆服务、环保回收/废物回收 / / 餐饮 点评与推荐、菜谱、餐厅排队 / ...
【小程序-慕尚花坊03】网络请求拦截器和响应拦截器
最新发布
m0_59269218的博客
08-26 1078
深恶理解网络请求拦截器和响应拦截器
微信小程序实战小小应用——豆瓣电影
weixin_30716141的博客
10-13 1638
昨天趁着项目结束的空闲期，自己看了一下微信小程序的开发，试着用豆瓣的开源API做了一个小应用，很小很小的应用，主要是展示最近上映的电影列表以及电影的详情页展示。包含的主要技术点如下：底部tab页标签的导航切换基本的布局展示（本例中多使用flex布局），图文混排事件处理；网络请求水平滚动scroll-view的实现运行的效果演示如下，其中“加入想看清单”功能和第二个...
ScorllView笔记
08-27
IOS里面ScorllView笔记，适合新手开发
微信小程序学习篇（一）
棒怡情的专栏
10-14 4837
Hi! 最新小程序很"火"，然后我也就紧跟时代步伐。简单的学习了一下。把笔记记下来，以便自己更好的学习和复习。       言归正传，任何技术学习起来都要先了解一下发展背景：       一、什么是微信小程序。     小程序是一种不需要下载安装即可使用的应用，它实现了应用「触手可及」的梦想，用户扫一扫或搜一下即可打开应用。也体现了「用完即走」的理念，用户不用关心是否安装太多应用的问题。应用
微信小程序的学习(持续更新中)
code^_^熊的博客
03-26 1187
1. 小程序开发工具的下载 1.1 小程序开发工具的安装：   点击链接: 微信小程序开发工具下载网站. 小程序开发工具的安装图示：     2.app.json文件的配置   小程序的制作可以参考的文档：链接: 微信小程序官方文档. 2.1 小程序官方文档使用举例：   app.json文件中的配置要用到图片中“全局配置–框架–配置项 里面的选项”   2.1.1 pages配置的使用举例   2.1.2 window配置的使用举例   2.1.
微信小程序学习入门
人间草木
04-04 376
微信小程序官方文档 https://developers.weixin.qq.com/miniprogram/dev/index.html https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0008aeea9a8978ab0086a685851c0a 第一步： 安装开发工具 https://deve...
微信小程序简要学习（上）
Derrick
10-28 465
微信小程序简要学习（上）   一、主目录结构 app.js为外部全局主js，可以当作一个父类 app.json为全局配置文件，以对象形式存在 app.wxss为全局样式文件，公用   二、页面目录结构 items.js为私有的js，相当于子类 items.json为以json为对象形式存在的配置(每个页面都有page对象) items.wxml为元素渲染页面 items.wxss为私有样式，私有样式可以覆盖公有(import导入)   三、程序页面加载 小程序默认加载pages中的第一个目录（第一行
微信小程序基础Day01
weixin_51494148的博客
01-02 1577
小程序开发的区别 小程序运行在微信环境 小程序无法调用DOM和BOM的API 但是小程序可以调用微信环境提供的一些API 地理 定位 扫码 支付 … 小程序开发模式: 申请小程序开发账号 安装小程序的开发者工具 创建和配置小程序项目 微信开发者工具的安装和使用 安装: 下载最新版本: https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html 小程序代码的构成 项目的基本组成结构 -1 pages用来存放所有小程序的页面，
微信小程序入门教程学习笔记
qq_42183184的博客
08-29 9524
作为一个刚刚入坑微信小程序的小白，以下是我在学习中的笔记，因为我真的太健忘了...
详细的微信小程序学习笔记(从入门到项目)(1)
热门推荐
才华有限的博客
09-21 2万+
微信小程序(1) 准备工作 1 获取 AppID(小程序ID) 登录微信公众平台,新建一个邮箱,避免旧有的邮箱有注册过公众号等.无法获取. 进行小程序的注册. 选择个人, 然后填写信息.进行登录之后, 在首页, 设置中. 然后点击开发设置 进行获取 AppID(小程序ID) 2 下载安装开发工具 开发工具下载地址：https://developers.weixin.qq.c...
学习项目：仿微信小程序小打卡开发笔记
总结上述知识点，仿微信小程序“小打卡”的项目不仅是一个学习实践，还涉及到了微信小程序的开发环境配置、遵循微信小程序的开发规范、以及小程序的页面布局和功能实现等多个方面。对于希望涉足微信小程序开发的...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值