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

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

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

1、微信小程序介绍

image.png

1.1 为什么是微信小程序

image.png

1.2 微信小程序历史

image.png

1.3 疯狂的微信小程序

image.png

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

image.png

1.5 体验

1.5.1 官方微信小程序体验

image.png

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

image.png

2、环境准备

2.1 注册账号

image.png

2.2 获取APPID

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

image.png

2.3 开发工具

image.png

image.png

3、第一个微信小程序

3.1 打开微信开发者工具

image.png
image.png

3.2 新建小程序项目

3.3 填写项目信息

不使用模板,创建出来的项目是这样。
image.png
image.png

创建项目的时候,使用模板。创建的项目结构不一样。如3.4
image.png

3.4 成功

image.png

4、微信开发者工具介绍

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

image.png

image.png

5、小程序结构目录

image.png

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

image.png

5.2 基本的项目目录

image.png

6、小程序配置文件

image.png

6.1 全局配置 app.json

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

6.1.1 快速生成一个新的页面

新的页面放在最前面, 默认打开新页面地址。
image.png

6.1.2全局配置文件(window)

image.png

6.1.3 tabbar

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

image.png

image.png

6.2 页面配置page.json

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

6.3 sitemap 配置-了解即可

image.png

7、模板语法

image.png

7.1 数据绑定

7.1.1 普通写法

image.png

7.1.2 组件属性

image.png

7.1.3 bool类型

image.png

7.2 运算

7.2.1 三元运算

image.png

7.2.2 算数运算

image.png

7.2.3 逻辑判断

image.png

7.2.4 字符串运算

image.png

image.png

7.3 列表渲染

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

7.3.1 wx:for

image.png

image.png

7.3.2 block

image.png

7.4 条件渲染

7.4.1 wx:if

image.png

7.4.2 hidden

image.png
image.png

image.png

8、小程序事件的绑定

8.1 wxml

image.png

8.2 page

image.png

8.3 特别注意

image.png

9、样式WXSS

image.png

9.1 尺寸单位

image.png

案例
需要实现的需求
image.png
image.png

image.png

image.png

image.png

/*
    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 样式导入

image.png

image.png

9.3 选择器

image.png

9.4 小程序中使用less

image.png

image.png

10、常见组件

image.png

10.1 view

image.png

10.2 text

image.png

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

10.3 image

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

image.png

10.4 swiper

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

image.png


<!--
    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>
10.4.1 swiper

swiper的宽度:100%,100vm
image.png

10.4.2 swiper-item

image.png

10.5 navigator

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

image.png

10.6 rich-text

官网:https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

image.png

image.png

10.7 button

image.png

image.png
image.png

image.png
image.png

image.png

提示 :如果按钮设置的type=“warn”没有效果
image.png
image.png

10.8 icon

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

image.png

10.9 radio

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

image.png

10.10 checkbox

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

image.png

11 自定义组件

image.png

使用步骤
1、创建自定义组件
2、引入组件(.json文件)
3、使用组件(wxml文件)

11.1 创建自定义组件

image.png
image.png

如何快速生成组件的四个文件。在微信开发者工具中,右键文件夹,选择新建Component
image.png

11.1.1 声明组件

image.png

11.1.2 编辑组件
11.1.3 注册组件

11.2 声明引入自定义组件

image.png

11.3 页面中使用自定义组件

image.png

11.4 其它属性

image.png

11.5 组件传参(父传子)

官网:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
步骤:
1、父组件,标签中传值
2 子组件中js,properties接收参数
3 子组件正常使用该参数
父传子组件数据解析:

image.png

11.6 组件传参(子传父)

demo17
步骤:1、子组件触发父组件 (子组件绑定的触发事件,父组件中接收:bind+绑定的事件名)
2、父组件被触发的事件执行业务

image.png

12 小程序生命周期

官网:https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
image.png

12.1 应用生命周期

image.png

12.2 页面生命周期

image.png

12.3 页面生命周期图解

官网:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html

在这里插入图片描述

相关文章
|
16天前
|
缓存 小程序 前端开发
商城/点餐/家政类小程序源码合集_微信抖音小程序源码开发从入门到精通实战
本文系统讲解如何利用现有源码快速开发商城、点餐、家政类微信/抖音小程序,涵盖环境搭建、核心功能实现、多平台部署与优化,提供完整技术方案。实战导向,助力开发者高效入门与落地。
|
18天前
|
存储 小程序 Java
热门小程序源码合集:微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
小程序已成为企业获客与开发者创业的重要载体。本文详解PHP、Java、uni-app三大技术栈在电商、工具、服务类小程序中的源码应用,提供从开发到部署的全流程指南,并分享选型避坑与商业化落地策略,助力开发者高效构建稳定可扩展项目。
|
3月前
|
人工智能 小程序 前端开发
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
223 0
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
|
5月前
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
1078 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
5月前
|
JSON 监控 小程序
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
296 14
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
|
6月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
499 12
|
12月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
2560 7
|
12月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
2052 1
|
12月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
1806 7
|
6月前
|
小程序 Java 关系型数据库
weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
本文介绍了一款基于微信小程序的校园二手物品交易平台的开发与实现。该平台采用Java语言开发服务端,使用MySQL数据库进行数据存储,前端以微信小程序为载体,支持管理员和学生两种角色操作。管理员可管理用户、商品分类及信息、交易记录等,而学生则能注册登录、发布购买商品、参与交流论坛等。系统设计注重交互性和安全性,通过SSM框架优化开发流程,确保高效稳定运行,满足用户便捷交易的需求,推动校园资源共享与循环利用。

热门文章

最新文章