超详细微信小程序开发学习笔记，看完你也可以动手做微信小程序项目-阿里云开发者社区

超详细微信小程序开发学习笔记，看完你也可以动手做微信小程序项目

2024-08-20 18179

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 这篇文章是一份全面的微信小程序开发学习笔记，涵盖了从小程序介绍、环境搭建、项目创建、开发者工具使用、文件结构、配置文件、模板语法、事件绑定、样式规范、组件使用、自定义组件开发到小程序生命周期管理等多个方面的详细教程和指南。

1、官网
https://developers.weixin.qq.com/miniprogram/introduction/

1、微信小程序介绍

1.1 为什么是微信小程序

1.2 微信小程序历史

1.3 疯狂的微信小程序

1.4 还有其它小程序不容忽视

1.5 体验

1.5.1 官方微信小程序体验

1.5.2 其它优秀的第三方小程序

2、环境准备

2.1 注册账号

2.2 获取APPID

登录微信公众号：https://mp.weixin.qq.com/

2.3 开发工具

3、第一个微信小程序

3.1 打开微信开发者工具

3.2 新建小程序项目

3.3 填写项目信息

不使用模板，创建出来的项目是这样。

创建项目的时候，使用模板。创建的项目结构不一样。如3.4

3.4 成功

4、微信开发者工具介绍

官网工具介绍：https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

5、小程序结构目录

5.1 小程序文件结构和传统web对比

5.2 基本的项目目录

6、小程序配置文件

6.1 全局配置 app.json

官网：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

6.1.1 快速生成一个新的页面

新的页面放在最前面，默认打开新页面地址。

6.1.2全局配置文件（window）

6.1.3 tabbar

官网：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

6.2 页面配置page.json

官网：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html#%E9%85%8D%E7%BD%AE%E9%A1%B9

6.3 sitemap 配置-了解即可

7、模板语法

7.1 数据绑定

7.1.1 普通写法

7.1.2 组件属性

7.1.3 bool类型

7.2 运算

7.2.1 三元运算

7.2.2 算数运算

7.2.3 逻辑判断

7.2.4 字符串运算

7.3 列表渲染

官网：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html

7.3.1 wx:for

7.3.2 block

7.4 条件渲染

7.4.1 wx:if

7.4.2 hidden

8、小程序事件的绑定

8.1 wxml

8.2 page

8.3 特别注意

9、样式WXSS

9.1 尺寸单位

案例
需要实现的需求

/*
    1 设计稿 750px
        750 px = 750 rpx
        1 px = 1 rpx
    2 把屏幕宽度 改成 375 px
        375 px = 750 rpx
        1 px = 2 rpx
        1rpx = 0.5px
    3 存在一个设计稿 宽度 414 或者未知 page
        1 设计稿 page 存在一个元素 宽度100px
        2 拿以上的需求 去实现 不同宽度的页面适配
        page px = 750 rpx
        1 px = 750 rpx / page
        100 px = 750 rpx * 100 / page
        假设 page = 375px
    4 利用 一个属性 calc属性 css 和 wxss 都支持 一个属性
        1 750 和 rpx 中间不要留空格
        2 运算符的两边也不要留空格

*/

view{
   /* width:200rpx; */
    height:200rpx;
    font-size:40rpx;
    background-color:aqua;
    /* 以下代码写法是错误的 */
    /* width: 750 rpx * 100 / 375 ; */
    width:calc(750rpx*100/375)
}

9.2 样式导入

9.3 选择器

9.4 小程序中使用less

10、常见组件

10.1 view

10.2 text

<!--
    1 长按文字复制 selectable
    2 对文本内容进行 解码
-->
<text selectable decode>    
    test &nbsp; 123 &lt;
</text>

10.3 image

官网：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

10.4 swiper

官网：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html


<!--
    1 轮播图外层容器 swiper
    2 每一个轮播项 swiper-item
    3 swiper 标签 存在默认样式
        1 width 100%
        2 height 150px image 存在默认宽度和高度 320px * 240
        3 swiper 高度 无法实现由内容撑开
    4 先找出来 原图的宽度和高度 等比例 给swiper 定 宽度和高度
      原图的宽度和高度 1125 * 352 px
      swiper 宽度 / Swiper 高度 = 原图的宽度 / 原图的高度
      swiper 高度 = swiper 宽度 * 原图的高度 / 原图的宽度
      height: 100 vm * 352 / 1125
    5 autoplay 自动轮播
    6 interval 修改轮播时间
    7 circular 衔接轮播
    8 indicator-dots 显示 指示器 分页器 索引器
    9 indicator-color 指示器未选择的颜色
    10 indicator-active-color 选中的时候指示器的颜色
-->

<swiper autoplay interval="1000" circular     indicator-dots     indicator-color="#0094ff"     indicator-active-color="#ff0094">
    <swiper-item> <image mode="widthFix" src="https://gw.alicdn.com/imgextra/i2/6000000006671/O1CN01kmf0MN1z9N0TQusrK_!!6000000006671-0-octopus.jpg_q90.jpg_.webp" /> </swiper-item>
    <swiper-item> <image mode="widthFix" src="https://gw.alicdn.com/imgextra/i2/6000000002347/O1CN01C5Y67M1TCyPwSr2uM_!!6000000002347-0-lubanimage.jpg_q90.jpg_.webp" /> </swiper-item>
    <swiper-item> <image mode="widthFix" src="https://gw.alicdn.com/imgextra/i4/2206525783763/O1CN010lspLY1dfVA8PCKwq_!!2206525783763-0-alimamacc.jpg_q90.jpg_.webp" /> </swiper-item>
</swiper>