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

简介: 原生微信小程序笔记完整总结

    🤹‍♀️潜意识Java:个人主页

🎙座右铭:得之坦然,失之淡然。

💎擅长领域:大前端

是的,我需要您的:

🧡点赞❤️关注💙收藏💛

是我持续下去的动力!


目录

一. 小程序的基本了解

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 小程序和网页的区别 *

image.gif 编辑


1.2 小程序的项目结构

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

image.gif 编辑

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

image.gif 编辑

image.gif 编辑

image.gif 编辑

🍓你要有个概念:

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

1.3 小程序的页面结构

image.gif 编辑

💜如上图所示:

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

2.js就是原生js

3.wxml可以看成html

4.wxss可以看成css

image.gif 编辑


 

💚二. 小程序页面


 

2.1 创建小程序页面

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

第一步:找到app.json

image.gif 编辑

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

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

image.gif

第三步:小程序会自动创建出index页面,非常简单!

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

image.gif 编辑


2.2 什么是wxml

可以直接认为是html😀

wxml和html有一些区别:

image.gif 编辑

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


2.3 什么是wxss

可以直接认为是css 😀

image.gif 编辑

image.gif 编辑

image.gif 编辑

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


💜三. 小程序的基本语法


3.1 view

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

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

<view>hello world</view>

image.gif

image.gif 编辑


3.2 scorll-view

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

实现一个案例帮助你更快的理解scorll-view

image.gif 编辑

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>

image.gif

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;
}

image.gif

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

image.gif 编辑

注意事项:

💙

用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>

image.gif

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;
}

image.gif

运行结果:

image.gif 编辑

swiper的常用属性:

image.gif 编辑  


3.4  text

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

image.gif 编辑

wxml中代码:

<text selectable>18888888888</text>

image.gif

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

这是text唯一具有的特性!


3.5 button

button是一个按钮,看下面这图足够了!

image.gif 编辑


3.6 image

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

image.gif 编辑

🏃‍♀️基本使用方式:

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

image.gif

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

image.gif 编辑

使用方式如图所示:

image.gif 编辑


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


4.1 定义data数据

找到页面的 .js文件

image.gif 编辑

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

image.gif 编辑


4.2 使用data数据

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

image.gif 编辑  


4.3 事件绑定bind:tap

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

使用方式

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

image.gif

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


4.4 this.setdata

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

image.gif 编辑


4.5 条件渲染vx:if

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

image.gif 编辑 image.gif 编辑

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


4.6 hidden

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

image.gif 编辑

image.gif 编辑 基本上和wx:if是一个用法,感觉会其中一个就差不多了,多去找几个项目做做!


4.7 v:if 和 hidden的对比

image.gif 编辑

image.gif 编辑


4.8  wx:for列表渲染

image.gif 编辑

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

image.gif 编辑


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


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>

image.gif

{
  "window": {
    "width": "750rpx",
    "height": "1334rpx"
  }
}

image.gif


5.2 微信小程序数据请求

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

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

image.gif

💙在页面发起请求:

// 在页面的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'
        });
      }
    });
  }
});

image.gif

💙六.笔记总结

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


🤹‍♀️潜意识Java:个人主页

🎙座右铭:得之坦然,失之淡然。

💎擅长领域:大前端

是的,我需要您的:

🧡点赞❤️关注💙收藏💛

是我持续下去的动力!

相关文章
|
4月前
|
机器学习/深度学习 人工智能 JSON
微信小程序原生AI运动(动作)检测识别解决方案
近年来,疫情限制了人们的出行,却推动了“AI运动”概念的兴起。AI运动已在运动锻炼、体育教学、线上主题活动等多个场景中广泛应用,受到互联网用户的欢迎。通过AI技术,用户可以在家中进行有效锻炼,学校也能远程监督学生的体育活动,同时,云上健身活动形式多样,适合单位组织。该方案成本低、易于集成和扩展,已成功应用于微信小程序。
|
4月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1738 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
6月前
|
小程序 前端开发 JavaScript
微信小程序结合PWA技术,提供离线访问、后台运行、桌面图标及原生体验,增强应用性能与用户交互。
微信小程序结合PWA技术,提供离线访问、后台运行、桌面图标及原生体验,增强应用性能与用户交互。开发者运用Service Worker等实现资源缓存与实时推送,利用Web App Manifest添加快捷方式至桌面,通过CSS3和JavaScript打造流畅动画与手势操作,需注意兼容性与性能优化,为用户创造更佳体验。
168 0
|
6月前
|
存储 小程序 JavaScript
|
6月前
|
存储 小程序 关系型数据库
原生小程序 获取手机号并进行存储到mysql数据库
原生小程序 获取手机号并进行存储到mysql数据库
|
7月前
|
小程序
云笔记微信小程序模板
一款简单的云笔记,记事本,手机备忘录微信小程序页面模板。包含:添加记事本、内容编辑、用户反馈等。
229 0
|
1月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
28 0
|
3月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
82 0
在线课堂+工具组件小程序uniapp移动端源码